Gravity Forms Drop-down Dynamic Population Issue

Question

I have a Gravity Form where I dynamically populate a drop-down and a second field with the count of the items in that dropdown.

If the count of items is >1, I use the selected item info to go get some additional info and use it to populate a second drop-down. This works fine. Here's the relevant section of code:

// When a choice from the dropdown "Which League (F32)" is selected,
// populate "League ID (F57)",
// populate "League Name (F64)" and
// populate dropdown "Player Two (F13)"
jQuery("#input_5_32").on('change',function(){
    var myval = jQuery(this).val();

    jQuery("#input_5_57").val(myval);
    jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text());

    jQuery.ajax({
        type: 'post',
        dataType:'JSON',
        url : bb_ajax_url,
        data : { league_id: myval, action:'get_player_two_names' },
        success : function( data ) {
            jQuery('#input_5_13').html('');
            jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>'));
            jQuery.each(data , function(k,p){
                jQuery('#input_5_13').append(jQuery('<option value="'+p.v+'">'+p.t+'</option>'));
            });

        },
    });
});

Most of the time, however, there's only one item in the 1st drop-down, in which case, I don't need the user to open it and click on the item to make a selection, I already know what it's going to be. I'd like to use the info and trigger the same routine which dynamically populates the 2nd drop-down so I can hide the 1st drop-down and save the user a little time and irritation.

The working module gets triggered based on a change to the 1st drop-down. Can I trigger this behavior some other way, or perhaps fake the selection from drop-down #1?

Got my plugin conflict out of the way so I tried again to implement @Wouter Bouwman's answer, though I'm probably making a mistake somewhere. Here's what I did:

    //Check whether the amount of options is only one
if (jQuery('#input_5_32').length === 1) {
  jQuery('#input_5_32').change(); //Trigger the change event
  console.log("Yes, Routine to not need 'Which League' has been executed");
  var myval = jQuery(this).val();
  console.log(myval);
  jQuery("#input_5_57").val(myval);
  jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text());

  jQuery.ajax({
      type: 'post',
      dataType:'JSON',
      url : bb_ajax_url,
      data : { league_id: myval, action:'get_player_two_names' },
      success : function( data ) {
          jQuery('#input_5_13').html('');
          jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>'));
          jQuery.each(data , function(k,p){
              jQuery('#input_5_13').append(jQuery('<option value="'+p.v+'">'+p.t+'</option>'));
          });

      }
  });
}

the #input_5_32 isn't getting filled with anything, and the #input_5_64 is getting filled with "Select the League for this Match" instead of the league Name. The dropdown #input_5_13 still says "Select Player Two".

I must be implementing the suggestion incorrectly but need a little assistance here.

If you ever need to do this again, John, this can readily accomplished with the Gravity Forms Populate Anything plugin: gravitywiz.com/documentation/gravity-forms-populate-anything — Dave from Gravity Wiz

Wouter Bouwman Wouter Bouwman · Accepted Answer · 2017-11-10T08:56:05

I've put together a small example of how to activate the onChange when there is only one option in the dropdown. It also shows you what happens when there are two options.

Practically it will mean that you only have to add the following to your jQuery.

if (jQuery('#input_5_32').length === 1) { //Check wether the amount of options is only one
  jQuery('#input_5_32').change(); //Trigger the change event
}

$('#select').change(function(e) {
  $('#select2').show();
});

if ($('#select option').length === 1) {
  $('#select').change();
}

$('#select3').change(function(e) {
  $('#select4').show();
});

if ($('#select3 option').length === 1) {
  $('#select3').change();
}

<div>
<select id='select'>
  <option val='1'>Only option</option>
</select>

<select id='select2' hidden>
  <option val='1'>Opt1</option>
  <option val='2'>Opt2</option>
  <option val='3'>Opt3</option>
  <option val='4'>Opt4</option>
  <option val='5'>Opt5</option>
  <option val='6'>Opt6</option>
</select>
</div>

<div>
<select id='select3'>
  <option val='1'>First option</option>
  <option val='1'>Second option</option>
</select>

<select id='select4' hidden>
  <option val='1'>Opt1</option>
  <option val='2'>Opt2</option>
  <option val='3'>Opt3</option>
  <option val='4'>Opt4</option>
  <option val='5'>Opt5</option>
  <option val='6'>Opt6</option>
</select>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

UPDATE: I've edited your code a little bit. The difference is that the check has to be placed outside of the onChange event.

jQuery("#input_5_32").on('change', function() {
  var myval = jQuery(this).val();

  jQuery("#input_5_57").val(myval);
  jQuery("#input_5_64").val(jQuery('#input_5_32 option:selected').text());

  jQuery.ajax({
    type: 'post',
    dataType: 'JSON',
    url: bb_ajax_url,
    data: {
      league_id: myval,
      action: 'get_player_two_names'
    },
    success: function(data) {
      jQuery('#input_5_13').html('');
      jQuery('#input_5_13').append(jQuery('<option value="">Select Player Two</option>'));
      jQuery.each(data, function(k, p) {
        jQuery('#input_5_13').append(jQuery('<option value="' + p.v + '">' + p.t + '</option>'));
      });
    },
  });
});

if (jQuery('#input_5_32').length === 1) { //Check wether the amount of options is only one
  jQuery('#input_5_32').change(); //Trigger the change event
}

Gravity Forms Drop-down Dynamic Population Issue

1 Answers