jQuery Clearing Form Inputs

Question

I have tried to different ways to clear a form    lt form action  service php  id  addRunner  name  addRunner  method  post  gt  First Name   lt input type  text  name  txtFirstName  id  txtFirstName    gt  lt br   gt  Last Name    lt input type  text  name  txtLastName  id  txtLastName    gt  lt br   gt  Gender   lt select id  ddlGender  name  ddlGender  gt  lt option value    gt --Please Select-- lt  option gt   lt option value  f  gt Female lt  option gt   lt option value  m  gt Male lt  option gt   lt  select gt  lt br   gt  Finish Time   lt input type  text  name  txtMinutes  id  txtMinutes  size  10  maxlength  2  gt  Minutes   lt input type  text  name  txtSeconds  id  txtSeconds  size  10  maxlength  2  gt  Seconds   lt br   gt   lt button type  submit  name  btnSave  id  btnSave  gt Add Runner lt  button gt   lt input type  hidden  name  action  value  addRunner  id  action  gt   lt  form gt    jQuery  1   function clearInputs        txtFirstName   val          txtLastName   val          ddlGender   val          txtMinutes   val          txtSeconds   val          This works perfectly   jQuery  2   function clearInputs data       addRunner  input   each function      this  val            This clears the form but does not let me submit any more any information to it  I try and click the button again and it does nothing   Here s the button click handler       btnSave   click function        var data       addRunner  input   serializeArray          post     addRunner   attr  action    data  function json           if  json status     fail                alert json message                     if  json status     success                alert json message               clearInputs                      json          PHP Post code    lt  php if   POST        if    POST  action       addRunner              fname   htmlspecialchars   POST  txtFirstName              lname   htmlspecialchars   POST  txtLastName              gender   htmlspecialchars   POST  ddlGender              minutes   htmlspecialchars   POST  txtMinutes              seconds   htmlspecialchars   POST  txtSeconds             if preg match      w s  i    fname     preg match      w s  i    lname                 fail  Invalid name provided                       if  empty  fname     empty  lname                      fail  Please enter a first and last name                       if  empty  gender                  fail  Please select a gender                       if  empty  minutes     empty  seconds                  fail  Please enter minutes and seconds                        time    minutes      seconds        query    INSERT INTO runners SET first name   fname   last name   lname   gender   gender   finish time   time         result   db connection  query        if   result             msg    Runner     fname      lname   added successfully            success  msg         else           fail  Insert failed               exit          If I use jQuery method  2  I get this error in the console   Uncaught TypeError  Cannot read property  status  of null   Why does this happen   I forgot to include this key information   function fail   message       die json encode array  status   gt  fail    message   gt  message        function success   message       die json encode array  status   gt  success    message   gt  message       This sends the message back to the AJAX function in jQuery  It looks like after I submit the form once using method  2 the success fail messages are blanked out

User · Answer

I figured out what it was  When I cleared the fields using the each   method  it also cleared the hidden field which the php needed to run   if    POST  action       addRunner      I used the  not   on the selection to stop it from clearing the hidden field

User · Answer

Took some searching and reading to find a method that suited my situation  on form submit  run ajax to a remote php script  on success failure inform user  on complete clear the form   I had some default values  all other methods involved  val     thereby not resetting but clearing the form   I got this too work by adding a reset button to the form  which had an id of myform       myform  gt  input type reset    trigger  click      This for me had the correct outcome on resetting the form  oh and dont forget the   event preventDefault      to stop the form submitting in browser  like I did      Regards  Jacko

User · Answer

I d recomment using good old javascript   document getElementById  addRunner   reset

User · Answer

You may try      addRunner input   each function              Inputs are no selectors  so you do not need the   Haven t tested it with your code  Just a fast guess

User · Answer

Demo   http   jsfiddle net xavi3r D3prt       input    myform      not   button   submit   reset   hidden      val        removeAttr  checked      removeAttr  selected      Original Answer  Resetting a multi-stage form with jQuery    Mike s suggestion  from the comments  to keep checkbox and selects intact   Warning  If you re creating elements  so they re not in the dom   replace  hidden with  type hidden  or all fields will be ignored       input    myform      removeAttr  checked      removeAttr  selected      not   button   submit   reset   hidden   radio   checkbox      val

[jquery] jQuery: Clearing Form Inputs

Examples related to jquery

Examples related to forms

Examples related to console