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   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

User · Answer

form name  myform     0  reset

User · Answer

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

User · Answer

This won t handle cases where form input fields have non empty default values   Something like should work     yourdiv   find  form   0  reset

User · Answer

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

User · Answer

Simple but works like a charm       form   trigger  reset      jquery document getElementById  myform   reset      native JS

User · Answer

If i want to clear all the fields except accountType  Use the following   q   input    myform   not   accountType   val     removeAttr  checked   removeAttr  selected

User · Answer

reset   click function           this  closest  form   find  input type text   textarea   val

User · Answer

For jQuery 1 6        input    myform      not   button   submit   reset   hidden      val        prop  checked   false     prop  selected   false     For jQuery  lt  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

User · Answer

By using a combination of JQuery s  trigger   and native Javascripts s  reset   all form elements can be reset to blank state     quot  reset quot   click function           quot   lt form id gt  quot   trigger  quot reset quot         Replace  lt form id gt  with id of form to reset

User · Answer

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

User · Answer

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

User · Answer

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   lt script gt  function reset form         var fm document getElementById  form1        fm reset       lt  script gt

User · Answer

form   submit function      var el     this        lt button type  reset  style  display none    gt  lt  button gt         appendTo el       click        remove      return false

User · Answer

I use this        reset   click function          input type text    each function           this  val                  And here is my button    lt a href     class  reset  gt     lt i class  fa fa-close  gt  lt  i gt       Reset  lt  a gt

User · Answer

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

User · Answer

using  Ajax BeginForm  Create    AcceptanceQualityDefect   new AjaxOptions         OnSuccess    ClearInput       HttpMethod    Post       UpdateTargetId    defect-list       InsertionMode   InsertionMode Replace    new    id    frmID          frmID is the identification of the form OnSuccess of the operation we call the JavaScript function with the name  ClearInput    lt script type  text javascript  gt      function ClearInput               call action for render create view             frmID   get 0  reset           lt  script gt   if you do both of these right  then you will not be able to stop it from working

User · Answer

Any reason this shouldn t be used       form   trigger  reset

User · Answer

document  ready function             reset   click function             compose form   find  quot input type text    textarea  quot   each function           this  val

User · Answer

editPOIForm   each function         this reset          where editPOIForm is the id attribute of your form

User · Answer

I got easiest trick to reset form  jQuery   review-form   0  reset      or                             review-form   get   reset

User · Answer

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    lt input type  reset   value  ClearAllFields  onclick  ClearContact      gt     lt script type  text javascript  gt         function ClearContact                  form  text   val                    lt  script gt

User · Answer

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

User · Answer

Add hidden reset button as follows   lt input id  resetBtn  type  reset  value  reset  style  display none    gt     Call reset buttons click event    Similar to ClearInputs  resetBtn    function ClearInputs btnSelector         var btn           btnSelector        btn click

User · Answer

Most easy and best solution is-     form   0  reset     Don t use here -   this  0  reset

User · Answer

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

User · Answer

Why you dont use document getElementById  myId   reset      this is the simple and pretty

User · Answer

I ve written a universal jQuery plugin    x000D   x000D      x000D     Resets any input field or form x000D      x000D    fn uReset   function      x000D      return this filter  form   input   each function      x000D          var input     this   x000D           x000D             Reset the form  x000D          if  input is  form      x000D              input 0  reset    x000D              return  x000D            x000D   x000D             Reset any form field  x000D          if  input is   radio   checkbox      x000D              input prop  checked   this defaultChecked   x000D            else if  input is  select      x000D              input find  option   each function      x000D                    this  prop  selected   this defaultSelected   x000D                  x000D            else if  this defaultValue    x000D              input val this defaultValue   x000D            else   x000D              console log  Cannot reset to default value    x000D            x000D          x000D     x000D   x000D    function      x000D         Test jQuery plugin  x000D         button   click function  e    x000D          e preventDefault    x000D           x000D          var button     this   x000D              inputType   button val    x000D              form   button closest  form    x000D           x000D          if  inputType      form     x000D              form uReset   x000D            else   x000D                 input type     inputType           inputType  form  uReset    x000D            x000D          x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt h3 gt Form lt  h3 gt  x000D   lt form gt  x000D       lt input type  text  value  default   gt  lt br   gt  lt br   gt  x000D      Ch 1  default checked   lt input type  checkbox  name  color  value  1  checked  checked    gt  lt br   gt  x000D      Ch 2  lt input type  checkbox  name  color  value  2    gt  lt br   gt  x000D      Ch 3  default checked   lt input type  checkbox  name  color  value  3  checked  checked    gt  lt br   gt  lt br   gt  x000D       lt select name  time  gt  lt br   gt  x000D           lt option value  15  gt 15 lt  option gt  x000D           lt option selected  selected  value  30  gt 30 lt  option gt  x000D           lt option value  45  gt 45 lt  option gt  x000D       lt  select gt  lt br   gt  lt br   gt  x000D      R 1  lt input type  radio  name  color  value  1    gt  lt br   gt  x000D      R 2  default checked   lt input type  radio  name  color  value  2  checked  checked    gt  lt br   gt  x000D      R 3  lt input type  radio  name  color  value  3    gt  lt br   gt  lt br   gt  x000D       lt textarea gt Default text lt  textarea gt  lt br   gt  lt br   gt  x000D       x000D       lt p gt Play with form values and then try to reset them lt  p gt  x000D       x000D       lt button type  button  value  text  gt Reset text input lt  button gt  x000D       lt button type  button  value  checkbox  gt Reset checkboxes lt  button gt  x000D       lt button type  button  value  select  gt Reset select lt  button gt  x000D       lt button type  button  value  radio  gt Reset radios lt  button gt  x000D       lt button type  button  value  textarea  gt Reset textarea lt  button gt  x000D       lt button type  button  value  form  gt Reset the Form lt  button gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

Why does it need to be done with any JavaScript at all    lt form gt       lt  -- snip -- gt       lt input type  reset  value  Reset   gt   lt  form gt    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

[jquery] Clear form fields with jQuery

Examples related to jquery

Examples related to html

Examples related to forms