Clear form fields with jQuery

Question

I want to clear all input fields and textarea in the form. It works as follows when using the enter button with the reset class:

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

This will clear all the fields on the page, not just those from the form. How would my selector look as soon as the form in which the actual reset button lives?

Answer 1

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

Answer 2

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-step form using jQuery

Or

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

As jQuery suggests :

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

Answer 3

For what reason should this not be used?

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

Answer 4

This will not handle cases where form input fields have non-empty default values.

Something like this should work

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

Answer 5

if you use selectors and make the values ​​empty, this does not reset the form, making all fields empty. Reset is to make the form, as it was before any editing actions from the user after loading the form from the server. If there is an input with the name "username" and that the username has been pre-populated by the server, most of the solutions on this page will remove this value from the input, not Reset, to the value that was before the user change. If you need a Reset form, use the following command:

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

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

Answer 6

Simple but works like a charm.

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

Answer 7

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

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

More on this here: http://www.w3schools.com/jsref/met_form_reset.asp

Hooray!

Answer 8

 $('form[name="myform"]')[0].reset(); 

Answer 9

Why does this 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

---

I tried this first, it will not clear the fields with default values.

Here you can do it with jQuery, then:

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

Answer 10

I got the easiest reset trick

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

or

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

Answer 11

If you want to clear all input fields regardless of their type, then this is a minute step on

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

Answer 12

With Javascript, you can simply do this 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, do not forget [0] . You will get the following error if

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

JQuery also provides an event that you can use

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

I tried and it works.

Note. It is important to note that these methods only reset constitute your form to their original value, set by the server when the page loads. This means that if your input was set to "set value" before a random change, the field will reset to the same value after calling the reset method.

Hope this helps

Answer 13

 $('#editPOIForm').each(function(){ this.reset(); }); 

where editPOIForm is the id attribute of your form.

Answer 14

Why aren't you using document.getElementById("myId").reset(); ? it's simple and beautiful

Answer 15

Tested and verified code:

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

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

Answer 16

The simplest and best solution is
$("#form")[0].reset();

Do not use here -
$(this)[0].reset();

Answer 17

Say, if you want to clear the fields and, with the exception of the accountType type, the drop-down list of time will reset to a certain value, that is, "All'.Remaining fields should be reset for an empty, i.e. text field. This approach will be used to clear certain 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'; } }); 

Answer 18

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> 

Answer 19

Use this code where you want to call Normal Reset jQuery Function

 setTimeout("reset_form()",2000); 

And write this function on jQuery site in the finished document

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

Answer 20

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

• frmID is form identification

• OnSuccess operation, which we call a JavaScript function called " ClearInput "

   <script type="text/javascript"> function ClearInput() { //call action for render create view $("#frmID").get(0).reset(); } </script> 

• if you do both of these rights, you cannot stop him from working ...

Answer 21

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

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

Answer 22

the code I see here and the related SO questions seem incomplete.

Resetting the form means setting the initial values ​​from HTML, so I put it together for a small project that I did based on the code above:

  $(':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 miss something or something else can be improved.

Answer 23

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

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

Answer 24

I wrote a generic 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> 

Answer 25

The following code clears the entire form and the fields will be empty. If you want to delete only a specific form, if the page has more than one form, specify the number or class of the form

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

Answer 26

try it

 $("input[type=text], textarea").val(""); 

Answer 27

Add a 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(); } 

Answer 28

$ ('form'). submit (function () {

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

});