Change hidden form field value based on user selection in another field


#1

We have a form that uses javasript (which I believe we got from Unbounce) to change user-friendly city names in a form field to our city IDs before passing the data to our CRM. The script:

<br />



lp.jQuery(function($){





 // The dropdown's ID (without #)



var id = 'region_abbrev';





 // Map of old to new values



var values = {







  'Atlanta, GA': 'ATL',







  'Austin, TX': 'AUS',







  'Baltimore, MD': 'BAL'



};





 // No need to change anything from here on



$.each(values, function(oldVal, newVal) {



  $('select#' + id + ' option[value="' + oldVal + '"]').val(newVal);



});



  });

I really need to way to pass in two other variables based on the users’s city selection, as well.

In other words:

If user picks region_abbrev = “Atlanta, GA” I would like to send:

  • region_abbrev = “ATL” (this is what current script does)

  • region_attribute_1 = “happy”

  • region_attribute_2 = "red"
    Where each city would trigger different values. Something like:

    region_abbrev|region_abbrev_new|region_attribute_1|region_attribute_2Atlanta, GA|ATL|happy|redAustin, TX|AUS|happy|purpleBaltimore, MD|BAL|sad|purple

I’m happy to enter the in separate lists, as in the provided code, like so:

'Atlanta, GA': 'ATL',



  'Austin, TX': 'AUS',



  'Baltimore, MD': 'BAL'





 'Atlanta, GA': 'happy',



  'Austin, TX': 'happy',



  'Baltimore, MD': 'sad'





 'Atlanta, GA': 'red',



  'Austin, TX': 'purple',



  'Baltimore, MD': 'purple'

I just don’t know how to tell it to update a different form field, instead of itself. (Yes. I’m a complete code idiot.)

Not looking for anything elegant; brute hackery is perfect. Just need it to work!

If anyone can help with a script template for that, I would really appreciate it!