Refresh form data after saving in ajax

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?

I think a bit more of an example/explanation will be needed for anyone to help you. — 0x6C77, Jan 06 '12 at 14:03
i call a function on onclick of the update button and a javascript function updateform() is called that updates the data using $.ajax function. after updating the data a success message "succesfully saved data" is alerted by javascript. but the form remaining on my page is reset by hitting reset button the old data of form are shown.thats the problem. i need updated data in form fields. — Manish Jangir, Jan 06 '12 at 14:06
You know that Ajax returns you only string right? Knowing that, you'll receive this string and you'll use javascript to repopulate your fields, or you can try to refresh the page.. — , Jan 06 '12 at 14:06
Please explain this a little more.. I don't really get what you're trying to do. Do you want to replace the form values with data you're grabbing via Ajax? Is that right? Also, what Update button? You said there were two buttons - one Save and one Reset. — Rudolph Gottesheim, Jan 06 '12 at 14:08
i want to replace the form values which i have updated by ajax.. — Manish Jangir, Jan 06 '12 at 14:09
@rajzana you need to grab those new values, it will be a string and then you use javascript again to update those field values — , Jan 06 '12 at 14:10
i have commented again that one update and second is reset button. that was my mistak. sorry for that.. — Manish Jangir, Jan 06 '12 at 14:11
Ah, I think I know what you mean.. Is the reset button an ``? If it is, then what you're trying to do isn't possible because the browser always resets to the values that were set in HTML. Also, in 99.9% of the cases there shouldn't even be a reset button. They're bad for a thousand reasons. — Rudolph Gottesheim, Jan 06 '12 at 14:13
possible duplicate of [Refresh DOM with jquery after AJAX call](http://stackoverflow.com/questions/2660736/refresh-dom-with-jquery-after-ajax-call) — Jakub, Jan 06 '12 at 14:25

score 0 · Answer 1 · answered Jan 06 '12 at 14:11

0

You can use:
$("#element").prop("defaultValue", "new value");

answered Jan 06 '12 at 14:11

Lior

5,454
8
30
38

Jeff Wilbert · Accepted Answer · 2012-01-06T14:22:39.743

0

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.

edited Jan 06 '12 at 14:22

answered Jan 06 '12 at 14:11

Jeff Wilbert

4,400
1
20
35

but if the data is not saved due to some reason the user can reset the old data. – Manish Jangir Jan 06 '12 at 14:28
You'd only use the code to update the inputs when the data successfully saves of course... I.E. in your update button's AJAX successful callback response that it did save correctly. Look at the second Fiddle demo, the 'save' button in that example is the 'update' button in yours, except yours has an ajax call with a response you parse to see if the save was successful, you'd just move it inside of there. – Jeff Wilbert Jan 06 '12 at 14:30

score 0 · Answer 3 · answered Jan 06 '12 at 14:12

If you want to have the latest data retrieved from the DB to your form fields, you'll need to do an ajax call for that.

You can return an JSON object after updating the data in your DB and amend the text field values in the callback function.

Or you can create an onclick event handler to the reset button and retrieve with $.get() the latest data from your DB and then amend the value of the form text fields in the callback function.

The callback functions should look like: function(result) { //eval the result as a JSON object $("input[name='myTextField']").val(result.whatever) }

Refresh form data after saving in ajax

3 Answers3