Question

I have this form in HTML:

<form action="#" method="post">
    <label for="label-id">id</label>
    <input type="text" name="id" id="label-id" />
    <label for="label-name">Name</label>
    <input type="text" name="name" id="label-name" />
    <label for="label-description">Description</label>
    <input type="text" name="description" id="label-description" />
    <input type="reset" value="Cancel" />
    <input type="submit" value="Update" />
</form>

There are no values in it, because I set the values with jQuery (AJAX call to a backend system) in this way:

$('#label-id').val(data.id);
$('#label-name').val(data.name);
$('#label-description').val(data.description);

So, if I press the input type=”reset” button, all values are empty. But I want, that pressing on the button the values which I set with the three lines above in jQuery should be there.

For example.
The AJAX call gives me the data id=12, name=”test”, description=”my desc”, the values are set to the text input fields and I see these values. Now someone is changing name=”test” to “test123″. Pressing on the reset button, the value should be name=”test” instead of “test123”.

How can I do this?

Thank you in advance & Best Regards.

Answer 1

You can set the defaultValue attribute/property for each <input> element, so when the reset button is pushed, all elements are reset to that defined default value:

$('#label-id').val(data.id)[0].defaultValue = data.id;
$('#label-name').val(data.name)[0].defaultValue = data.name;
$('#label-description').val(data.description)[0].defaultValue = data.description;

Working demo: http://jsfiddle.net/AndyE/NDahF/

nb: you can just use .attr("defaultValue", value) in place of [0].defaultValue, but it’s not quite as efficient.

Also note that defaultValue applies only to text elements. If you have other types of field you can handle the <form> element’s onreset event to re-apply the defaults to selects, checks, radios, etc.

$('form').bind("reset", function () {
    $('#label-id').val(data.id);        
    $('#label-name').val(data.name);
    $('#label-description').val(data.description);
    $('#label-someselect').val(data.someSelectValue);

    // Cancel the default action
    return false;
});