Update Gravity Forms Total From Separate JavaScript File [RESOLVED]

Get Help
,
1

Is there a way to update the Gravity Forms total from a separate JavaScript file? I’m using the following script to count the uploads from the Smart Uploads addon for Gravtiy Forms. It keeps track of the uploads, and adds the count to the quantity field.

The script works fine, however the number inserted by the script doesn’t effect the total. The total only updates if an option is changed within the form, or if you manually type into the quantity field (due to it running something on keyup / keydown judging by the console).

Is there anything I could add to the botton of this script to update the total?

// Select the node that will be observed for mutations
const targetNode = $(`[name="fileuploader-list-files"]`)[0];

// Options for the observer (which mutations to observe)
const config = { attributes: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.attributeName === 'value') {
            let fileCount = (function(){
                try {
                    return JSON.parse(targetNode.value).length;
                } catch (e) {
                    return 0;
                }
            }())
            // Adds the file count to the quantity input
            document.getElementById("input_2_12").value = fileCount;

            // I need something here to update the Gravtiy Forms total

        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

I’m using a number field with a calculation for my total. It looks like this:

  <ul>
    <li id="field_2_27" class=
    "gfield gforms-total gfield_calculation field_sublabel_below field_description_below gfield_visibility_visible">
    <label class="gfield_label" for="input_2_27">Total</label></li>
  </ul>

  <div class="ginput_container ginput_container_number">
    <input name="input_27" id="input_2_27" type="text" value="" class="small" tabindex=
    "4" readonly="readonly" aria-invalid="false" />
  </div>
2

Hello Soor. You can use the gform_calculation_result filter (there is a JavaScript version and you also need to use the PHP version to ensure the amount validates):

3

Thanks. I did look through the documentation before posting but I didn’t have much luck with anything I tried. Is this the way I’d implement the JavaScript part of the script? I’m also a little unsure how to actually refresh the total, are there any guides or references that include refreshing of the total?

Also, I’ll just add. I don’t need to perform any calculations. The total is correct, it just doesn’t update. All I need to do is refresh the total in the front end, like what happens when you make a change in the form. (e.g if you change a drop down option, the total updates).

$(document).on('change', 'input', function() {
// Select the node that will be observed for mutations
const targetNode = $(`[name="fileuploader-list-files"]`)[0];

// Options for the observer (which mutations to observe)
const config = { attributes: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.attributeName === 'value') {
            let fileCount = (function(){
                try {
                    return JSON.parse(targetNode.value).length;
                } catch (e) {
                    return 0;
                }
            }())
            console.log(fileCount); // This is the number of files
            document.getElementById("input_2_12").value = fileCount;
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Update Gravity Forms total
gform.addFilter( 'gform_calculation_result', function( result, formulaField, formId, calcObj ) {
    
    // Refresh Total
 
    return result;
});

});
4

Managed to figure it out. I did it like so:

 document.getElementById("input_2_12").value = fileCount;
$("#input_2_12").keydown()
1 Like
5

Thank you for the update!