How can I update a default value for a form field after an ajax submission (not a form reset)

问题

I am using jQuery to submit my form via AJAX. This updates a database record and then returns a response for success or failure. The issue I am having is not critical but more for convenience.

When resetting a form it resets all the fields to their default values from when the page loads (for sake of simplicity.) This is not the behavior I want. The reason I want to change this is because if I submit the form and I then decide to change the value again then I decide I want to reset the form back to my last submitted values, it resets back to the initial defaults and not my new values that were recently submitted and saved in the database.

To try and better explain this I will show my process with the form field for a user's username.

Username: SomeDefaultUserNameFetched

I then change the username to Foo.

Username: Foo

I submit the form via AJAX and get a success response. I then decide maybe I don't like Foo and would prefer Bar.

Username: Bar

Then I decide I don't like Bar and Foo was just fine so I decide to reset the form. Resetting the form will give me:

Username: SomeDefaultUserNameFetched

As you can see the form reset is not saving my recently submitted form data. So my question is how can I, if this is even possible, update the form defaults so that when I hit reset the form will reset the fields with my latest submission.

Thanks and I really hope someone can push me in the right direction or let me know if this is even possible.

UPDATE: I would like to be able save this into the DOM if possible. Where are the default values stored at in the first place? I know I could modify my custom form reset to handle setting the form element values but I was trying not to have to cause this overhead if there was a way to update the DOM.

Thanks for the assistance

回答1:

there are three ways I can think of to do this:

1) send a new ajax request and fetch data from the database so that you will have the latest data being show upon form reset.

2) keep a JSON object (e.g. form_state) which will keep track of the latest valid state of the form

3) keep the defaults in some hidden fields (or even as attributes) and reset the form from there

回答2:

Create an attribute called default:

<input type="text" default="Some Name" id="name" />

When you want to update default just use something like this:

$("#name").attr("default","Ivan Castellanos")

And the reset button would be super simple:

$("#reset_btn").click(function(){
    $("[default]").val(function(){return $(this).attr("default")})
})

Good luck.

回答3:

Change your <input type="reset"> button to be a plain button and then add your own click event handler. Within your ajax submit save the values that were submitted, and within the button click handler change back to the saved values:

<input type="button" id="resetForm" value="Reset">

<script>
$("#resetForm").click(function() {
   // restore previously saved form values here
});
</script>

As for exactly how to save the values, I'll leave that as an exercise for the reader... (Hint: I'd either use an object or add data attributes to each form element.)

回答4:

Found Solution: I found this: http://www.w3schools.com/jsref/prop_text_defaultvalue.asp as my solution. By looping through my submission content I can update the default values as they are changed.

来源：https://stackoverflow.com/questions/8767048/how-can-i-update-a-default-value-for-a-form-field-after-an-ajax-submission-not

标签

php

jquery

html

event-handling