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');