title: jQuery: Clearing Form Inputs
body: <p>I have tried to different ways to clear a form:</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p>jQuery #1:</p>
  
  <pre><code>function clearInputs(){
  $("#txtFirstName").val('');
  $("#txtLastName").val('');
  $("#ddlGender").val('');
  $("#txtMinutes").val('');
  $("#txtSeconds").val('');
  }
  </code></pre>
  
  <p>This works perfectly.</p>
  
  <p>jQuery #2:</p>
  
  <pre><code>function clearInputs(data){
  $("#addRunner :input").each(function(){
  $(this).val('');
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Here's the button click handler:</p>
  
  <pre><code>$("#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");
  });
  </code></pre>
  
  <p>PHP Post code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>} </p>
  
  <p>If I use jQuery method #2, I get this error in the console:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'status' of null
  </code></pre>
  
  <p>Why does this happen?</p>
  
  <p>I forgot to include this key information:</p>
  
  <pre><code>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)));
  </code></pre>
  
  <p>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.</p>