HTML reset button in combination with text field values set with jQuery

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.

Nick Craver · Accepted Answer · 2010-12-15 10:16:15Z

3

If you store the data object and make a function of it you can do this, for example:

var currentData;

Make sure this is outside of everything so it's scoped correctly...e.g. your ready handler or even global. ...and turn the field reset into a function:

function resetForm() {
  $('#label-id').val(currentData.id);
  $('#label-name').val(currentData.name);
  $('#label-description').val(currentData.description);
}

Then in your success handler where you're running the above code, store your data (that you're using currently) and run the function we made using it, e.g:

currentData = data;
resetForm();

Now you can use that same function on the reset event of the <form> as well, and stop the normal reset, like this:

$("form").bind("reset", function(e) {
  resetForm();
  e.preventDefault();
});

answered Dec 15, 2010 at 10:16

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy E · Accepted Answer · 2010-12-15 10:55:19Z

2

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

edited Dec 15, 2010 at 10:55

answered Dec 15, 2010 at 10:18

Andy E

346k86 gold badges482 silver badges452 bronze badges

9 Comments

Nick Craver Over a year ago

I'm pretty sure this won't work in older browsers will it? Firefox 2 at least, not sure about IE

Andy E Over a year ago

@Nick: it was defined in DOM level 1. It works just fine in IE 6, and I don't think anyone uses Firefox 1 anymore ;-)

Tim Over a year ago

It works in this way, but can you tell me why I need the [0]?

Nick Craver Over a year ago

@Andy - oh no I mean it doesn't work in FF2, it was added in 3 IIRC

Andy E Over a year ago

@Tim: see the note at the bottom of the answer. [0] gives us access to the first DOM element within a jQuery object so that we can manipulate its properties directly. attr is somewhat inefficient because it takes the long route to achieve exactly the same thing.

|

Collectives™ on Stack Overflow

HTML reset button in combination with text field values set with jQuery

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related