html – Clear form fields with jQuery

The Question :

416 people think this question is useful

I want to clear all input and textarea fields in a form. It works like the following when using an input button with the reset class:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

This will clear all fields on the page, not just the ones from the form. How would my selector look like for just the form the actual reset button lives in?

The Question Comments :

The Answer 1

504 people think this answer is useful
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});

The Answer 2

645 people think this answer is useful

For jQuery 1.6+:

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .prop('checked', false)
  .prop('selected', false);

For jQuery < 1.6:

$(':input','#myform')
  .not(':button, :submit, :reset, :hidden')
  .val('')
  .removeAttr('checked')
  .removeAttr('selected');

Please see this post: Resetting a multi-stage form with jQuery

Or

$('#myform')[0].reset();

As jQuery suggests:

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

The Answer 3

164 people think this answer is useful

Any reason this shouldn’t be used?

$("#form").trigger('reset');

The Answer 4

61 people think this answer is useful

This won’t handle cases where form input fields have non empty default values.

Something like should work

$('yourdiv').find('form')[0].reset();

The Answer 5

52 people think this answer is useful

if you use selectors and make values to empty values, it is not resetting the form, it’s making all fields empty. Reset is to make form as it was before any edit actions from user after the load of form from server side. If there is an input with name “username” and that username was prefilled from server side, most of solutions on this page will delete that value from input, not reset it to the value how it was before user’s changes. If you need to reset the form, use this:

$('#myform')[0].reset();

if you need not to reset the form, but fill all inputs with some value, for example empty value, then you can use most of the solutions from other comments.

The Answer 6

29 people think this answer is useful

Simple but works like a charm.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

The Answer 7

29 people think this answer is useful

If someone is still reading this thread, here is the simplest solution using not jQuery, but plain JavaScript. If your input fields are inside a form, there is a simple JavaScript reset command:

document.getElementById("myform").reset();

More about it here: http://www.w3schools.com/jsref/met_form_reset.asp

Cheers!

The Answer 8

21 people think this answer is useful
$('form[name="myform"]')[0].reset();

The Answer 9

18 people think this answer is useful

Why does it need to be done with any JavaScript at all?

<form>
    <!-- snip -->
    <input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords


Tried that one first, it won’t clear fields with default values.

Here’s a way to do it with jQuery, then:

$('.reset').on('click', function() {
    $(this).closest('form').find('input[type=text], textarea').val('');
});

The Answer 10

14 people think this answer is useful

If you want to empty all input boxes irrespective of its type then it’s a minute step by

 $('#MyFormId')[0].reset();

The Answer 11

12 people think this answer is useful

I got easiest trick to reset form

jQuery("#review-form")[0].reset();

or

$("#review-form").get().reset();

The Answer 12

12 people think this answer is useful

With Javascript you can simply do it with this syntax getElementById("your-form-id").reset();

you can also use jquery by calling the reset function this way $('#your-form-id')[0].reset();

Remember not to forget [0]. You will get the following error if

TypeError: $(…).reset is not a function

JQuery also provides an event you can use

$(‘#form_id’).trigger(“reset”);

I tried and it works.

Note: Its important to notice that these methods only reset your form to their initial value set by the server on page load. This means if your input was set on the value ‘set value’ before you did a random change, the field will be reset to that same value after reset method is called.

Hope it helps

The Answer 13

7 people think this answer is useful
$('#editPOIForm').each(function(){ 
    this.reset();
});

where editPOIForm is the id attribute of your form.

The Answer 14

6 people think this answer is useful

Why you dont use document.getElementById("myId").reset(); ? this is the simple and pretty

The Answer 15

6 people think this answer is useful

Tested and verified code:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript must be included in $(document).ready and it must be with your logic.

The Answer 16

5 people think this answer is useful

Most easy and best solution is-
$("#form")[0].reset();

Don’t use here –
$(this)[0].reset();

The Answer 17

4 people think this answer is useful

Let us say if you want to clear the fields and except accountType,in the mean time dropdown box will be reset to particular value,i.e ‘All’.Remaining fields should be reset to empty i.e text box.This approach will be used for clearing particular fields as our requirement.

 $(':input').not('#accountType').each( function() {

    if(this.type=='text' || this.type=='textarea'){
             this.value = '';
       }
    else if(this.type=='radio' || this.type=='checkbox'){
         this.checked=false;
      }
         else if(this.type=='select-one' || this.type=='select-multiple'){
              this.value ='All';
     }
 });

The Answer 18

4 people think this answer is useful

I use this :

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

And here is my button:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>

The Answer 19

3 people think this answer is useful

Use this Code Where you want to Call Normal Reset Function by jQuery

setTimeout("reset_form()",2000);

And Write this Function Out Site jQuery on Document Ready

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

The Answer 20

3 people think this answer is useful

Some of you were complaining that radios and such are cleared of default “checked” status… All you have to do is add the :radio, :checkbox selectors to the .not and the problem is solved.

If you can’t get all the other reset functions to work, this one will.

  • Adapted from ngen’s answer

    function form_reset(formID){
        $(':input','#'+formID)
        .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
        .val('');
    }
    
    

The Answer 21

2 people think this answer is useful
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 

  1. frmID is the identification of the form
  2. OnSuccess of the operation we call the JavaScript function with the name “ClearInput

    <script type="text/javascript">
        function ClearInput() {
            //call action for render create view
            $("#frmID").get(0).reset();
        }
    </script>
    
    
  3. if you do both of these right, then you will not be able to stop it from working…

The Answer 22

2 people think this answer is useful

By using a combination of JQuery’s .trigger() and native Javascripts’s .reset() all form elements can be reset to blank state.

$(".reset").click(function(){
    $("#<form_id>").trigger("reset");
});

Replace <form_id> with id of form to reset.

The Answer 23

2 people think this answer is useful
$(document).ready(function() {
    $('#reset').click(function() {
    $('#compose_form').find("input[type=text] , textarea ").each(function() {
    $(this).val('');
   });
  });
});  

The Answer 24

1 people think this answer is useful

The following code clear all the form and it’s fields will be empty. If you want to clear only a particular form if the page is having more than one form, please mention the id or class of the form

$("body").find('form').find('input,  textarea').val('');

The Answer 25

0 people think this answer is useful

If i want to clear all the fields except accountType..Use the following

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

The Answer 26

0 people think this answer is useful

the code I see here and on related SO questions seems incomplete.

Resetting a form means setting the original values from the HTML, so I put this together for a little project I was doing based on the above code:

            $(':input', this)
                .not(':button, :submit, :reset, :hidden')
                .each(function(i,e) {
                    $(e).val($(e).attr('value') || '')
                        .prop('checked',  false)
                        .prop('selected', false)
                })

            $('option[selected]', this).prop('selected', true)
            $('input[checked]',   this).prop('checked',  true)
            $('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

Please let me know if I’m missing anything or anything can be improved.

The Answer 27

0 people think this answer is useful

None of the above works on a simple case when the page includes a call to web user control that involves IHttpHandler request processing (captcha). After sending the requsrt (for image processing) the code below does not clear the fields on the form (before sending the HttpHandler request ) everythings works correctly.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>

The Answer 28

0 people think this answer is useful

I’ve written a universal jQuery plugin:

/**
 * Resets any input field or form
 */
$.fn.uReset = function () {
    return this.filter('form, :input').each(function () {
        var input = $(this);
        
        // Reset the form.
        if (input.is('form')) {
            input[0].reset();
            return;
        }

        // Reset any form field.
        if (input.is(':radio, :checkbox')) {
            input.prop('checked', this.defaultChecked);
        } else if (input.is('select')) {
            input.find('option').each(function () {
                $(this).prop('selected', this.defaultSelected);
            });
        } else if (this.defaultValue) {
            input.val(this.defaultValue);
        } else {
            console.log('Cannot reset to default value');
        }
    });
};

$(function () {
    // Test jQuery plugin.
    $('button').click(function (e) {
        e.preventDefault();
        
        var button = $(this),
            inputType = button.val(),
            form = button.closest('form');
        
        if (inputType === 'form') {
            form.uReset()
        } else {
            $('input[type=' + inputType + '], ' + inputType, form).uReset();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
    <input type="text" value="default"/><br /><br />
    Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
    Ch 2 <input type="checkbox" name="color" value="2" /><br />
    Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
    <select name="time"><br />
        <option value="15">15</option>
        <option selected="selected" value="30">30</option>
        <option value="45">45</option>
    </select><br /><br />
    R 1 <input type="radio" name="color" value="1" /><br />
    R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
    R 3 <input type="radio" name="color" value="3" /><br /><br />
    <textarea>Default text</textarea><br /><br />
    
    <p>Play with form values and then try to reset them</p>
    
    <button type="button" value="text">Reset text input</button>
    <button type="button" value="checkbox">Reset checkboxes</button>
    <button type="button" value="select">Reset select</button>
    <button type="button" value="radio">Reset radios</button>
    <button type="button" value="textarea">Reset textarea</button>
    <button type="button" value="form">Reset the Form</button>
</form>

The Answer 29

-2 people think this answer is useful

Add hidden reset button as follows

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
     var btn = $("#" + btnSelector);
     btn.click();
}

The Answer 30

-4 people think this answer is useful

$(‘form’).submit(function() {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});

Add a Comment