Dynamic Field Population Based on Dropdown value

Gravity Support Forums » Plugin Support » Gravity Forms

Is is there anyway to populate multiple fields using the example below? I know I can copy and paste the script every time I want to populate another field but I was hoping to be able to shorten the amount of code.

Do you know of an easy way to add this functionality using the code below from Alex?

Thanks!
------------------

<?php
add_filter("gform_pre_render_167", "monitor_dropdown");
function monitor_dropdown($form){

?>
    <script type="text/javascript">
    jQuery(document).ready(function(){

        jQuery('#input_167_3').bind('change', function()
        {
            //get selected value from drop down;
            var selectedValue = jQuery("#input_167_3").val();

            //populate a text field with the selected drop down value
            jQuery("#input_167_1").val(selectedValue);
        });
    });
    </script>
<?php

return $form;
}
?>

Posted 13 years ago on Thursday August 25, 2011 | Permalink

David Smith
Member
You can add as many field IDs as you want to the line that actually updates the value. For example, you could change this:
[js] //populate a text field with the selected drop down value jQuery("#input_167_1").val(selectedValue);
Copy
to this:
[js] //populate a text field with the selected drop down value jQuery("#input_167_1, #input_167_2, #input_167_4").val(selectedValue);
Copy
And it would update the value of all three fields.
Posted 13 years ago on Thursday August 25, 2011 | Permalink
Mattbw11
Member

I figured it would be something that easy, thank you!

With my fields now populating dynamically, I wondering... Is it possible to use jQuery in a similar way to populate a dropdown menu based on values entered into a number of fields? I am using a multi-page form. I have found a similar topic in the forum but it wont quite work for us.

Also, is there a way to add/subtract/mulitply/divide the value from an array of field values and then populate another field with the result?

Thanks for the help with all this you guys are great!

Posted 13 years ago on Thursday August 25, 2011 | Permalink
David Smith
Member
You can add options to a drop down menu like so:
[js] jQuery('#dropdown_id').append('<option value="option value">Option Name</option>');
Copy
The option value and name can be determined by retrieving the value of whatever field you'd like to populate there.

To calculate the total value of an array of values, you can do this:
[js] var total = 0; $.each(arr,function() { total += this; });
Copy
You can assign the total value just like you assign the value of the field in the original example.
Posted 13 years ago on Thursday August 25, 2011 | Permalink

Mattbw11
Member

Appreciate the quick replies!

(clearly) I am not very experienced with JQuery/php but just to be clear so I understand correctly.
would my updated code look something like this?

<?php
add_filter("gform_pre_render_167", "monitor_dropdown");
function monitor_dropdown($form){

?>
    <script type="text/javascript">
    jQuery(document).ready(function(){

        jQuery('#input_167_3').bind('change', function()
        {
            //get selected value from drop down;
            var selectedValue = jQuery("#input_167_3").val();

            //populate a text field with the selected drop down value
            jQuery("#input_167_1").val(selectedValue);

            //add options to a drop down menu
            jQuery('#dropdown_470').append('<option value="option value">  #input_9_300, #input_9_301 , #input_9_302 , #input_9_303  </option>');

            //calculate the total value of an array of values
           var total = 0;
           $.each(arr,function("#input_167_1, #input_167_2, #input_167_4") {
               total += this;
               });

        });
    });
    </script>
<?php

return $form;
}
?>

Which part of the code allows you to define the field that will hold the outputted value?

Thanks again, this will be great if we can add this functionality to our forms!
Cheers

Posted 13 years ago on Thursday August 25, 2011 | Permalink

sascha
Member

Just wanted to keep up to date on this. I could not subscribe to this topic without leaving some text here....

Posted 13 years ago on Friday August 26, 2011 | Permalink

David Smith
Member

The total portion of the code should work more like this:

[js]
//calculate the total value of an array of values
            var total = 0;
            $('#input_167_1, #input_167_2, #input_167_4').each(function() {
                total += $(this).val();
            });

            jQuery('#input_167_999').val(total); // update 999 to the field ID you wish to update the total for

Posted 13 years ago on Friday August 26, 2011 | Permalink