Custom Drop Down Field Values


#1

How do you customize the field value for a custom drop down? For example, what the user sees is “Middle School” but I need the value submitted to be “MS” to map to our LeadPosting Site


#2

Form is here:
http://l.beliefnet.com/liberty-online…


#3

Hey Michael,

To customize the value for a drop down menu option, you’ll actually need to use some custom javascript. Here is an example pulled together by our developement team:

<script type="text/javascript">
<br /> jQuery(document).ready(function() {
<br /> jQuery.each( jQuery('#gender')[0].options, function(i, option) {
<br /> if (option.value === 'Dentist') {
<br /> option.value = 43;
<br /> }
<br /> else if (option.value === 'Doctor') {
<br /> option.value = 44;
<br /> }
<br /> else if (...) {
<br /> ...
<br /> }
<br /> });
<br /> });
<br /> </script>   

In the example code, you would just need to replace the ‘#gender’ with the given name of your drop down menu. In order to do so and try out this code, you will want to use a type of web inspector to determine what the option values are in the drop down menu after the published page is loaded. The reason for this is because the full HTML of each landing page is not generated until the page has been published from the Unbounce system.

Hope this helps!


#4

I am using this code you have provided but my landing page is still posting same data. here is my page link http://quantum.faro.com/jay-lenos-garage-pstest/ Can you please help. thanks!


#5

Did you find fix to this issue?


#6

Hi,

This is the script I use to do this. Maybe give this one a try instead and see if it fixes it.

<script>

  lp.jQuery(function($){

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

    // Map of old to new values
    var values = {
      'Apple': 'Fruit',
      'Lettuce': 'Vegetable',
      'Almonds': 'Nut',
      'Cheese': 'Dairy'
    };

    // No need to change anything from here on
    $.each(values, function(oldVal, newVal) {
      $('select#' + id + ' option[value="' + oldVal + '"]').val(newVal);
    });
  });

</script>

#7

Thanks Nicholas, It worked for me :slight_smile:


#8

Hi Nicholas,

Do you have a version of this script to change the values of a check-box response instead of a drop down? I have a form where I want to change the value of a checked box from the actual field value when checked to “True” and set it to “False” when it is submitted unchecked.

Any advice would be appreciated.


#9

Hi Charles,

Try this script below:

<script>
var checkBoxs = document.querySelectorAll('input[type="checkbox"]');
checkBoxs = Array.from(checkBoxs);

checkBoxs.forEach(function(el) {
	let newinput = document.createElement('input');
	newinput.type = 'hidden';
	newinput.name = 'value_of_' + el.value;
	newinput.value = 'false';

	el.parentElement.appendChild(newinput);
	el.addEventListener("change", function() {
		console.log(this.parentNode);
		console.log(this.parentNode.querySelector(`input[name="value_of_${this.value}"`));
		this.parentNode.querySelector(`input[name="value_of_${this.value}"`).value = this.checked;
	})
});
</script>

What it does is adds a field with either a “true” or “false” value for each of your checkboxes, regardless of how many checkboxes you have on a page. So for example, for a form like this…

…when you get the lead, it’ll bascially show this…

data

Let me know if that does the trick! Good luck.


#10

Hey Nicholas,

thx for the script. I’ve tried it but when I inspect element in the browser it still shows old values. Does it matter where the script is placed?


#11

Which script are your referring to? There are a few different ones referred to in this thread.