Integrating JavaScript Values from Gravity Forms into Loop & Logic Templates

1

Hi,

I’m looking for a solution to utilize a JavaScript value extracted from a Gravity Form within a Loop & Logic (L&L) template. The objective is to dynamically display content in the L&L template based on a user’s selection from a form on the same page.

Currently, I can capture the user’s choice via AJAX from the Gravity Form, but I am unsure how to effectively pass this value into my L&L template for dynamic content rendering. This process seems to be the inverse of the typical Get/Set JS variable functions usually used.

Could you provide guidance or a solution on how to achieve this integration?

Thank you for your help!

2

Hi Guillaume!
So this won’t be possible with L&L strictly, as templates are rendered at pageload, meaning that values are expected to already exist, either in the template or WP database when the page is requested by a user.

You’ll have to write a script to check for changes in inputs (gform_input_change - Gravity Forms Documentation) and update content in your template as changes are made. For the sake of making this easier to work with and keeping it as DRY as possible, I’d set up areas in the template with references to your field names stored in data attributes, and push updates to these when the matching field is updated (the value of data-gform-field-id should match the fieldId output by Gravity, you can find it in the DOM by looking at the input’s name attribute ie. <input type="text" name="input_1.6" id="input_3_1_6" value="Tangible" aria-required="true" autocomplete="family-name">):

<span data-gform-field-id="1.6">Placeholder Here</span>

This script is working for me!

gform.addAction( 'gform_input_change', function( elem, formId, fieldId ) {
  console.log('Change triggered for input!', fieldId);
  
    const fieldSpans = document.querySelectorAll(`span[data-gform-field-id="${fieldId}"]`);

    fieldSpans.forEach(span => {
      span.innerHTML = elem.value;
    });
    
    // Try dispatching change event
    elem.dispatchEvent(new Event('change'));  


}, 10);
3

Hi Julia, thanks a lot for your answer and this lead. I’ll try this :slight_smile:

1 Like