I have a couple of different things happening on one page, and I need to have the selections pulled from an elementor filter form to populate a gravity forms field (ideally a hidden one).

I have this code here:

jQuery(document).ready(function($) {
    function updateGravityFormHiddenFields() {
        var selectedValue = $('#wpc-taxonomy-work_location-3945').val();
        $('#input_3_14').val(selectedValue);
    }

    updateGravityFormHiddenFields();

    $('#wpc-taxonomy-work_location-3945').change(function() {
        updateGravityFormHiddenFields();
    });
});

Which doesn't work annoyingly. I can get it to change/populate once.. But then not again, if someone changes their selection. I'm essentially looking for something like this code, as this doesn't seem to allow for multiple different selections and different fields.

Any ideas/help working this out would be great :)

I have a couple of different things happening on one page, and I need to have the selections pulled from an elementor filter form to populate a gravity forms field (ideally a hidden one).

I have this code here:

jQuery(document).ready(function($) {
    function updateGravityFormHiddenFields() {
        var selectedValue = $('#wpc-taxonomy-work_location-3945').val();
        $('#input_3_14').val(selectedValue);
    }

    updateGravityFormHiddenFields();

    $('#wpc-taxonomy-work_location-3945').change(function() {
        updateGravityFormHiddenFields();
    });
});

Which doesn't work annoyingly. I can get it to change/populate once.. But then not again, if someone changes their selection. I'm essentially looking for something like this code, as this doesn't seem to allow for multiple different selections and different fields.

Any ideas/help working this out would be great :)

• filters
• jquery
• plugin-gravity-forms

2 Answers 2

$select.find('option:selected').text() should get the name of the selection:

jQuery(document).ready(function($) {
    function updateGravityFormHiddenFields() {
        var $select = $('#wpc-taxonomy-work_location-3945');
        var selectedText = $select.find('option:selected').text(); // Get the selected option's text
        console.log("Selected Name:", selectedText); // Debugging line
        $('#input_3_14').val(selectedText).trigger('change'); // Ensure value update
    }

    // Initial population
    updateGravityFormHiddenFields();

    // Use .on() instead of .change()
    $(document).on('change', '#wpc-taxonomy-work_location-3945', function() {
        console.log("Change detected"); // Debugging line
        updateGravityFormHiddenFields();
    });
});

Try this: $(document).on('change', selector, callback) This ensures the event listener remains attached even if the element is dynamically updated.

jQuery(document).ready(function($) {
    function updateGravityFormHiddenFields() {
        var selectedValue = $('#wpc-taxonomy-work_location-3945').val();
        console.log("Selected Value:", selectedValue); // Debugging line
        $('#input_3_14').val(selectedValue).trigger('change'); // Ensure value update
    }

    // Initial population
    updateGravityFormHiddenFields();

    // Use .on() instead of .change()
    $(document).on('change', '#wpc-taxonomy-work_location-3945', function() {
        console.log("Change detected"); // Debugging line
        updateGravityFormHiddenFields();
    });
});