Override the form 'Reset' behavior when data is refreshed via ajax

问题

I am relying on the "Reset" behavior of a form to cancel the edits, the problem i am facing is that once post the data is updated via ajax, the reset still reverts back to the data that was loaded with the page origionally.

So basically what I need to be able to do is "Reset" the "Reset" function. Make sense?

回答1:

Try this:

$("#yourForm").bind("reset", function() {

    // reset the form manually with the "newest" data

    return false;
});

In this case, you will have to store the new data (that you got from the Ajax callback). And then, when the user resets the form, you manually fill the form elements with that data.

回答2:

There is also a native way.

form-elements have attributes to store the initial value.

To do this, the following would be interesting:

defaultValue(text-input,textarea)
defaultChecked(radio,checkbox)
defaultSelected(option)

So what to do to really set a new initial point for reset(): Walk the elements and assign the current attributes(value,checked,selected) to these default-attributes.

回答3:

I don't think it's possible - Reset always reverts to the values provided in HTML code. I suppose the simplest way will be put received AJAX's data somewhere (ie hidden fields) and provide your custom Reset button which will load these (from hidden inputs or wherever you store them) data back into form.

来源：https://stackoverflow.com/questions/4065844/override-the-form-reset-behavior-when-data-is-refreshed-via-ajax