Modify underlying form.reset() values

Question

I'm using $('form-selector').get(0).reset() to reset form values to their original page load state.

After editing, the form will submit via $.ajax() and I'll have new "default" values on our server. The form element will still exist in the dom, and the user can submit again to update. I'd like the "default" (reset values) to reflect what's on our server (ignoring any other external updates). Is it possible to update the underlying values that form.reset() will change each form element to without a page refresh?

Cross-browser support would be nice, but since this is an internal app, Google Chrome only is sufficient.

HTML

<form>
    <input type="text" value="foo" name="bar" />
    <input type="submit" value="Submit" />
    <Input type="reset" value="Reset" />
</form>

JAVASCRIPT

$(function(){
    $('form').submit(function() {
        // Omitting code that sends form values to the server

        // TODO: update underlying form.reset()
        // values to what's currently in each
        // form element.

        return false;
    });
});

UPDATE

Ack! I failed to mention that I'm looking for something to handle all form element types. i.e. input[type=text], input[type=radio], input[type=checkbox], select, textarea.

Would be especially awesome if it can handle HTML5 form elements as well... i.e. input[type=date], input[type=number], input[email], input[url], input[type=range], input[type=color], etc.

Sorry for the confusion.

Answer 1

If you change attributes of the form elements directly, rather than using the .val() method, the new values will be reflected on a form reset. You'll need to treat text fields differently from radio buttons, checkboxes, etc.

    $('input').attr('value', function() { return this.value });
    $('textarea').prop('innerHTML', function() { return this.value });                                              
    $(':checked').attr('checked', 'checked');                                              
    $(':selected').attr('selected', 'selected');
    $(':not(:checked)').removeAttr('checked');
    $(':not(:selected)').removeAttr('selected');                                              

Answer 2

Something like this:

$("#foo").prop("defaultValue", "bar");

As David Budiac mentioned in his comment, this doesn't work for select elements. Select elements have a separate property named defaultSelected.

More about the defaultValue property

I realize that these links go to Microsoft's site but they seem to work in pretty much all mainstream browsers.

Answer 3

Javascript does not know what the reset values are, so you'll have to define them either on page load or make hidden field(s) with the reset values. Then when you call reset, set them.

Let's say you have hidden fields for each field you have in your form, like text boxes (you can do similar ones for dropdowns and radio/select)

If you have 2 text fields (txtfield1 and txtfield2), you would also have hidden fields for them (called txtfield1-hdn and txtfield2-hdn respectively).

$('form-selector').get(0).reset(function() {
  $('form-selector').find('input').each(function(){
    $(this).val($($(this).attr('id') + '-hdn').val());
  });
});

of if you have default values in the text field html then you can just do this:

<input id="Text1" type="text" value="myValue" />

$('form-selector').get(0).reset(function() {
  $('form-selector').find('input').each(function(){
    $(this).val($(this).attr('value'));
  });
});