I need to reset forms elements after click span for example.

Is there a method to reset the from by jQuery without select each element and remove the attribute value.

Some of the elements not having attribute value like textarea or radio

And some like button I don't want to remove the value from it.

I want use jQuery to use the reset on other events

Code for example /

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

I need to reset forms elements after click span for example.

Is there a method to reset the from by jQuery without select each element and remove the attribute value.

Some of the elements not having attribute value like textarea or radio

And some like button I don't want to remove the value from it.

I want use jQuery to use the reset on other events

Code for example http://jsfiddle.net/pgNrF/

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

• javascript
• jquery

• 1 You might want to check out this question where the concept of resetting forms via jQuery has been discussed at length. – Andrew Commented Aug 21, 2013 at 17:59

5 Answers 5

This is already built in if you wrap those form elements in an actual 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</button>
</form>

FIDDLE

If you just have to use jQuery:

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

FIDDLE

A late comment about resetting textareas.

Using Chrome version Version 54.0.2840.99 m on a PC running Windows 10 Home version, I found that the native/built-in reset function that is called by a regular/unmodified reset button or the form.reset() statement does restore the initial field value of a textarea, but only if the textarea was not previously programmatically cleared, say with a custom clear button that empties the textarea's innerHTML.

This isn't observable when the textarea is first loaded without a default value, but if the textarea is coded to show data from a previous posting of the form, then the textarea may not be empty, and resetting the textarea should set the field to the value that it had when the form was loaded.

What I found was that the textarea's defaultValue attribute that the native reset uses is incorrectly cleared when the textarea's innerHTML was emptied and then subsequent resets just clears the textarea rather than resetting textarea as expected. I consider this a bug because compared to clearing and resetting other text input fields, the textarea works differently.

This 'odd-man-out' behavior can be worked-around by adding a custom initialValue attribute to a textarea and assigning the innerHTML value to the it. Since the native reset and custom clear function don't affect the custom attribute, the value is preserved, and can be used to restore the textarea's value by overriding a reset button to call a function that sets the textarea's innerHTML to the initialValue attribute's value and then calls the form.reset() function to handle the other input fields. Note that calling the form.reset() function causes the custom reset function called by the modified reset button to not execute any code after the form.reset().

if not using <form>, then using jQuery -

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

Change

<span>Reset</span>

to

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

It was made to reset all form values to default values.

If you also need to unbind some events you can do it using jQuery:

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

If you are not using the reset button please use this jquery code

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

});