Veljex February 2016

jQuery on change of any form fields value but ignoring display toggles

I'm re-building a large form containing both input fields and dropdown menus to submit via AJAX once a field has been de-focosued and only if the value has been changed. I have a jQuery selector listening for any changes to the form as below.

$('.settings :input').change(function(field){

I have everything working fine and this fires off the AJAX request when needed however a part of the form toggles a section of the form's visibility.

The snippet above is detecting the show/hide of the sub-fields that are being changed as a change and fires off separate AJAX calls for each field.

Is there an alternative to change that I can use to only fire if the event is of the input's value or a method to detect if the event is a value change?

Answers


Veljex February 2016

The visibility of the form fields was toggling at a parent level essentially show/hiding the wrapper for each "row". Logging each event to the console displayed the two events differently. The initial event for changing the dropdown which triggers the toggle sends a legitimate change event.

The shown/hidden fields were submitting a triggered event instead. I managed to filter out the legitimate requests by adding an if statement to ignore triggered events.

$('.settings :input').change(function(field){
    if(field.isTrigger != true){
        .. process AJAX

Post Status

Asked in February 2016
Viewed 2,770 times
Voted 7
Answered 1 times

Search




Leave an answer