Assigning values to drop downs in forms

Hi Chris - It’s definitely feasible with a little Javascript that looks for your existing drop down values and changes them to an assigned number. One drawback would be that rewriting the values on submission means that your Unbounce lead database would show the rewritten number value and not the text values that you set. So, you’ll definitely want to keep that in mind.

Mark from our Technical Team has come up with a script that does the rewrite:

<script>
  
  (function(){

    // The dropdown's ID (without #)
    var id = 'country';

    // Map of old to new values
    var values = {
      'Australia': 'AU',
      'Canada': 'CA',
      'United States': 'US',
      'United Kingdom': 'UK'
    };

    // No need to change anything from here on
    Object.keys(values).forEach(function(oldValue) {
      document.querySelector('select#' + id + ' option[value="' + oldValue + '"]').value = values[oldValue];
    });

  })();
  
</script>

You’ll just need to add that to the Javascripts panel on your page (you can find more on that [http://support.unbounce.com/entries/513757-Using-Custom-JavaScript-and-CSS-on-Your-Landing-Page](<a href=)">here --the placement for this script doesn’t matter, since it’s set to fire after the page has loaded, regardless)

You’ll need to adjust:

var id = 'country';

So that country is replaced with your drop down’s field name.

And then adjust:

var values = {   
  'Australia': 'AU',   
  'Canada': 'CA',   
  'United States': 'US',   
  'United Kingdom': 'UK'   
};   

So that each left hand country name is replaced with your own drop down values and the right hand abbreviations are changed to be the corresponding number values.

Hello Chris,

Technically, this could be done using jQuery in a similar way. However, we don’t recommend changing the names of fields themselves. That’s because doing so will break any validation that you’ve added in the form builder and prevent field mapping (for webhooks and third party integrations) from working.

If you’re only sending data from one Unbounce page to another in a multi-step form, this shouldn’t be an issue. For example, if the field is called first_name on the first page, all you need to do is add a hidden field to the second, also called first_name.

However, if you then want to post this data to another server, I can see the issue. At this point you may wish to look into Webhooks (http://support.unbounce.com/entries/3…), because they support field mapping, which would allow you to send first_name as propery_owner_first_name.

I’m trying to accomplish exactly what is laid out here, but the code does not seem to be working. Can someone tell me if there should be changes made to the above code in 2022. Need this ASAP so if anyone knows if would be greatly appreciated.

Thanks for your reply on this @julien_level. 👏🏻 Also tagging @Quinn_Omori in case he has anything to add RE: the original code posted back in 2014.