0

I have a site with a Gravity Forms form (also using the GF Populate Anything add-on plugin) that has data being loaded dynamically using ajax. I am trying to add a very simple javascript function to one of the input forms but the jquery function does not detect any change when the input value changes dynamically. The function works when I manually input changes but not when it is dynamically changed. Here is my javscript function:

jQuery( document ).ready(function($) {

    $(document).on('change', '#input_3_17', function() {

        alert(  $("#input_3_17").val() );

        // my simple function here

    });

});

I don't have access to the code that controls the ajax change--that is being done by another plugin (https://gravitywiz.com/documentation/gravity-forms-populate-anything/). Is there any way I can get jquery to detect this change in my own code?

The alert in the code above is triggered if I manually change the input data, or on page load if I set a value using .val().

Here is what the html looks like on page load:

<input name="input_17" id="input_3_17" type="text" value="" class="medium" aria-invalid="false" disabled="">

and this is what the input html looks like after a value change:

<input name="input_17" id="input_3_17" type="text" value="6,160.00" class="medium" aria-invalid="false">

If I enter

$("#input_3_17").val();

into the developer tools console, it outputs the current value--so I know that the change is occurring to the dom, but I just can't seem to access it. What are my options? Is this even possible?

UPDATE: After contacting the plugin authors directly of the custom Gravity Forms add-on I am using, GF Populate Anything, they provided the custom event needed. See in the answers below.

Kasia
  • 41
  • 1
  • 6
  • In other words, you need gravity forms to monitor changes to your input, thus resulting in gravity forms submitting the change. right? – Kevin B Nov 18 '19 at 16:59
  • Or, are you asking how to detect changes that the plugin is making to the input? not manual changes? because... that's not what the change event is for. – Kevin B Nov 18 '19 at 17:04
  • Yes, I need to detect the changes that the plugin is making to the input (which it is doing using ajax). I don't need to change the input value--and my javascript function will not be changing the submitted data. – Kasia Nov 18 '19 at 17:10
  • The solution available in the duplicate post is not detecting any dynamic changes in the value. It is detecting the value set in the code (input.value = 'foo';) but not any dynamically updated values. – Kasia Nov 18 '19 at 17:35
  • That suggests it isn’t being updated – Kevin B Nov 18 '19 at 17:35
  • Even though entering $("#input_3_17").val(); into the console after the value changes results in the updated value? – Kasia Nov 18 '19 at 17:41
  • 1
    [The jQuery docs](https://api.jquery.com/change/) for `.change()` say: *Note: Changing the value of an input element using JavaScript, using .val() for example, won't fire the event.* So your handler will never detect a change coming from AJAX and JS. you need to listen for something else. [Some searching turned up](https://stackoverflow.com/questions/14086195/jquery-gravity-forms-perform-jquery-on-bad-validation) mention of [`gform_post_render()`](https://docs.gravityforms.com/gform_post_render/), maybe that helps? – Don't Panic Nov 18 '19 at 21:13

2 Answers2

2

So I contacted the plugin developers for the Gravity Perks add-on plugin GF Populate Anything and here is there response which worked perfectly:

After GP Populate Anything updates fields with AJAX, it kicks off the following event:

$(document).trigger('gppa_updated_batch_fields', this.formId);

You should be able to hook into that event like so:

$(document).on('gppa_updated_batch_fields', function(event, form_id){
   console.log(form_id);
   $('#input_' + form_id + '_' + input_id).css('background', 'red');
});
Kasia
  • 41
  • 1
  • 6
0

If I understand you correctly you can use this.
This script fires everytime. More info at GF docs here

(function($) {
  $(document).on('gform_post_render', function(event, form_id, current_page){

  // Add you jQuery here

  });
})(jQuery);
Keviin Cosmos
  • 177
  • 14
  • This didn't work for my form, possibly because I am also using a custom Gravity Forms add-on plugin. I used a custom event hook created by the developers which they shared with me, `gppa_updated_batch_fields` – Kasia Nov 20 '19 at 17:06