How reset forms elements (input, selection, text field, etc.) In events using jQuery

Question

I need to reset form elements after clicks, for example.

Is there a way to reset from jQuery without selecting each element and removing the attribute value.

Some elements that do not have an attribute value, such as textarea or radio

And some like the button . I do not want to remove the value from it.

I want to use jQuery to use reset for other events

Code, e.g. http://jsfiddle.net/pgNrF/

<input type="button" value="Input Button"> <input type="checkbox"> <input type="hidden"> <textarea></textarea> <span>Reset</span> 

Answer 1

This is already inlined if you complete these form elements in real form:

 <form id="myform"> <input type="button" value="Input Button"> <input type="checkbox"> <input type="file"> <input type="hidden"> <input type="image"> <input type="password"> <input type="radio"> <input type="submit"> <input type="text"> <select> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <textarea></textarea> <button type="button">Button</button> <button type="reset">Reset</span> </form> 

Fiddle

If you just need to use jQuery:

 $('span').click(function() { $('#myform').get(0).reset(); }); 

Fiddle

Answer 2

if you do not use <form> , then using jQuery -

 $('span').click(function() { $("input").val("") $("select option").removeAttr("selected"); $("textarea").val(""); }); 

Answer 3

Late comment about reloading text fields.

Using the Chrome version of version 54.0.2840.99 m on a PC running Windows 10 Home, I found that the built-in reset function, called by the regular / unmodified reset or form.reset () button, returns the original value of the textarea field, but only if the text field was not previously cleared programmatically, say, using a custom clear button that empties the innerHTML text area.

This is not observed when the text field is first loaded without a default value, but if the text field is encoded to display data from the previous publication of the form, then the text field may be empty and the text area should be reset to the value it had when loading forms.

I found that the textarea defaultValue attribute, which uses the native reset, does not clean up correctly when the innerHTML text area has been emptied, and then subsequent discards just clear the text field, rather than returning the text area as expected. I consider this a mistake, because compared to clearing and resetting other text input fields, textarea works differently.

This "odd-man" behavior can be handled by adding your own initialValue attribute to the text field and setting it to innerHTML. Since the built-in reset function and the user-defined cleanup function do not affect the user attribute, the value is saved and can be used to restore the textarea value by overriding the reset button to call a function that sets the innerHTML text field to the value of the initialValue attribute and then calls form.reset () to process other input fields. Note that calling the form.reset () function calls the reset function, called by the modified reset button, so as not to execute any code after form.reset ().

Answer 4

Edit

 <span>Reset</span> 

to

 <input type='reset' value='Reset'> 

A reset value has been made for all default values ​​of the form.

If you also need to undo some events, you can do this with jQuery:

 $("input:reset").click(function() { // unbind and reset what is left }); 

Answer 5

If you do not use the reset button, use this jquery code

  $('span').click(function() { $('input').val(''); $("textarea").val(''); });