Populate GF SELECT field using AJAX / MYSQL working except on form error

Get Help
, , , ,
1

Hello. I have a Gravity Form that has a ZIP CODE (single-line text) field and SETTING (dropdown) field. The SETTING field has values manually entered.

When a ZIP CODE is entered, and a SETTING is chosen from the dropdown, an ORGANIZATIONS (dropdown) field is displayed and populated with results if ZIP and SETTING are a match, from a MySQL query. So in the database, if ZIP=01040 and SETTING=Hospital, it will populate are organization names with those two matches.

The form works as intended UNLESS the form is submitted first without all required fields. When Gravity throws an error due to required fields, the ORGANIZATIONS field is simply blank (and loads unhidden), and choosing a ZIP and SETTING no longer populates the ORGANIZATIONS field.

Any ideas or pointers on this?

Included below is the the JS and PHP code being used with this Gravity form.

Thanks!

Bryan

FUNCTIONS.PHP FILE
============================
function get_org_name()
{
 	 $zip = $_POST["zip"];
	 $care_setting = $_POST["care_setting"];
 	 global $wpdb;
	 $query = $wpdb->get_results("SELECT ORG_NAME FROM lms_setting where SETTING = '$care_setting' and ZIP='$zip'",ARRAY_A);
     echo json_encode($query);
}

add_action( 'wp_ajax_get_org_name', 'get_org_name' );
add_action( 'wp_ajax_nopriv_get_org_name', 'get_org_name' );

CUSTOM JS
============================
jQuery(document).ready(function( $ ){
  $('.user-organization').hide();
    // do a POST ajax call
  $("#input_3_7").change(function(){
     var care_setting = $("#input_3_7 option:selected").val();
     var zip = $('#input_3_6').val();
     if(zip != '')
       getOrgName(zip,care_setting);
  });
  $("#input_3_6").focusout(function(){
    var zip = $('#input_3_6').val();
    var care_setting = $("#input_3_7 option:selected").val();
    if(care_setting != '')
       getOrgName(zip,care_setting);
});
  
  function getOrgName(zip,care_setting){
  $.ajax({
      type: "POST",
      url: '<?php echo admin_url('admin-ajax.php'); ?>',
      data: ({
        action: "get_org_name",
        zip:zip,
        care_setting:care_setting
      }),
      success: function (response){
        response = response.substring(0, response.length-1);
        console.log(JSON.parse(response).length);
        if(JSON.parse(response).length == 0){
          $("#choice_3_13_0").trigger('click');
          $('#field_3_19 select#input_3_19').empty();
          $('.user-organization').hide();
        }
        else{
        $('.user-organization').show();
        $('#field_3_12').hide();
          $('#field_3_19 select#input_3_19').empty();
          $("#choice_3_13_0").prop("checked", false);
        $.each(JSON.parse(response),function(index,value){
          $('#field_3_19 select#input_3_19').append('<option value="' + value.ORG_NAME + '">' + value.ORG_NAME + '</option>');
        });
        }
      },
    error: function(error){
    console.log(error);
    }
    });
  }
});
2

Hmmm… Maybe just add a redundant .hide to it? Maybe try a:

$(document).on('gform_page_loaded', function(event, form_id, current_page){
   $('#field_3_12').hide();
});

Just guessing at the organization field.

3

Oh and use the same gform_page_loaded to repopulate the Settings field.