Clear form fields with jQuery

Question

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         


        

Answer 1

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.

Answer 2

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

Don't use here -
$(this)[0].reset();

Answer 3

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';
     }
 });

Answer 4

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

Answer 5

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.

Answer 6

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