I have a form with three dependent location select fields and a text field which lets a user add a new city if it is missing from the dropdown. The following function works fine when I create a new form. It puts the fields in sync to start with and keeps them that way when the user makes their selections.
There is a problem though when the form is edited. This is because once the page loads the function below automatically puts the fields back in sync before the user does anything like on the initial creation. So the previously selected values are overwritten. When the form is being edited I would like to have the change event only fire if the user actually changes any of the dropdowns themselves. I am able to check if the form is being edited or created but not sure how to change my function. function() { $("#update-button").hide(); if ($("#field-city-text").val() == '') { $("#field-city-text-wrapper").hide(); } $("#field-country").change(function () { var country = $(this).val(); $("#field-city-wrapper").hide(); $("#field-city").val(''); updateState(); }) .change(); $("#field-state").change(updateCity).change(addCity); $("#field-city").change(addCity); } Any thoughts appreciated.