Question

I have a form on which some text fields and two buttons are displayed. The first button is save and second button is reset. I call a function on update button which updates the data using..

$.ajax({
         url:"url",
         data:something
        and so on...});

This function updates the data in DB and alert a success message on success response. I hit the reset button and the old data is filled up in the form but I want the latest updated data in all form fields. How can i do this?

Answer 1

Update the value attribute of your inputs, that way when the reset button is clicked it resets those forms inputs to the new values rather then whatever was default.

$('input').change(function() {
   $(this).attr('value', $(this).val());
});

Fiddle Demo: http://jsfiddle.net/muXHM/

Another Fiddle Demo:: http://jsfiddle.net/muXHM/1/
This one you can see the effect better as instead of updating the value on input change, I added a save button you have to click first. To use, type some value into the first input, hit reset and it’ll reset the value to ‘test’, type something else in there and hit save first followed by reset then it doesn’t change… type something different in there again and hit reset and now it resets it to the value you saved.