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.

Reply via email to