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


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 />


 // 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!