How the reset button (input type="reset") works under the hood?
(I want to extend it so it'll clear the inputs after post in asp.net mvc.)
Asked
Active
Viewed 9,444 times
-2
gdoron
- 147,333
- 58
- 291
- 367
2 Answers
4
It makes the browser set the current value of every form control back to its default value (as specified in the HTML, e.g. with the value or selected attributes).
Since it is client side, it cannot be extended with a server side technology like ASP.NET.
If you want to clear inputs after post, then forget reset, just send back the form without any data in it in the HTTP response.
Quentin
- 914,110
- 126
- 1,211
- 1,335
-
I know it's change back the value to it's previous value. But where the previous value saved? – gdoron Nov 13 '11 at 11:12
-
The previous value isn't saved. – halfdan Nov 13 '11 at 11:13
-
@gdoron — In the value, selected and checked attributes (and in the child text nodes of a textarea). – Quentin Nov 13 '11 at 11:14
-
@halfdan it's saved! see this: http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery/3682131#3682131 – gdoron Nov 13 '11 at 12:32
-
@gdoron: No they weren't 'saved'. They are the values that were assigned to the textboxes/checkboxes/select list when the form was generated. Reset reverts all inputs back to the value that they were set when the form was rendered. – Tommy Nov 15 '11 at 01:33
-
@Tommy That is what i'm asking about. how the browser knows the value the input had when the forum was generated? – gdoron Nov 15 '11 at 11:17
-
@gdoron — Because the defaults are specified with the attributes that I've already told you about twice. – Quentin Nov 15 '11 at 11:20
-
@Quentin Tested what you wrote(twice) and You are right!!! sorry tested it with jsfiddler: http://jsfiddle.net/H742x/13/. But why the value of the textbox changes to the defaults while foo doesn't? – gdoron Nov 15 '11 at 11:36
-
@gdoron — Because reset resets all the values from their current value to the default value. It doesn't reset made up attributes set via the DOM to made up attributes set via HTML. – Quentin Nov 15 '11 at 11:40
-
@Quentin I saw the value attribute doesn't change at all when I wrote $('#a').attr('value', 'Doron');. maybe that is the reason? – gdoron Nov 15 '11 at 11:54
-
@gdoron — Some browsers get the value attribute and the value property confused. Don't set the value attribute programatically. Use the `val()` method instead. – Quentin Nov 15 '11 at 11:55
1
There's a form.reset (docs) method that does the same thing as clicking the form's reset button.
Alternatively you could write some jQuery code that resets the form fields, the topic is covered in this question - Resetting a multi-stage form with jQuery
