title: success message not appearing after ajax form submitted
body: <p>I have prepared one HTML form backed with Jquery and PHP. The form is giving the correct out put in PHp but when the form is submitted, it is not showing the success message &amp; not getting the fields empty. The code is given below:</p>
  
  <pre><code>   function sendContact() {
          event.preventDefault();
  
          var valid;
          valid = validateContact();
          if (valid) {
              jQuery.ajax({
                  // input submisssion though Ajax
                  url: "xxxx.php",
                  data: 'userName=' + $("#userName").val() + '&amp;userEmail=' + $("#userEmail").val() + '&amp;subject=' + $("#subject").val() + '&amp;content=' + $(content).val(),
                  type: "POST",
                  success: function (data) {
                      // Thankyou message on sucessful submission.
                      $("#mail-status").html(data);
                      $('#mail-status').show();
  
                      // Clear the form.
                      $('#userName').val('');
                      $('#userEmail').val('');
                      $('#content').val('');
                  },
                  error: function () {
                  }
              });
          }
      }
  
      //error checking
      function validateContact() {
          var valid = true;
          $(".InputBox").css('background-color', '');
          $(".info").html('');
  
          if (!$("#userName").val()) {
              $("#userName-info").html("(required)");
              $("#userName").css('background-color', '#FFFFDF');
              valid = false;
          }
          if (!$("#userEmail").val()) {
              $("#userEmail-info").html("(required)");
              $("#userEmail").css('background-color', '#FFFFDF');
              valid = false;
          }
          if (!$("#userEmail").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
              $("#userEmail-info").html("(invalid)");
              $("#userEmail").css('background-color', '#FFFFDF');
              valid = false;
          }
          if (!$("#content").val()) {
              $("#content-info").html("(required)");
              $("#content").css('background-color', '#FFFFDF');
              valid = false;
          }
  
          return valid;
      }
  </code></pre>
  
  <p>The AJAX library used is: <a href="https://code.jquery.com/jquery-2.1.1.min.js" rel="nofollow">https://code.jquery.com/jquery-2.1.1.min.js</a>" type="text/javascript
  The HTML Code is:</p>
  
  <pre><code>&lt;div id="frmContact"&gt;
  &lt;div id="mail-status" style="display: none;"&gt;Thanking you.&lt;/div&gt;
  
          &lt;label style="padding-top:20px;"&gt;Name&lt;/label&gt;&lt;span id="userName-info" class="info"&gt;&lt;/span&gt;&lt;br/&gt;
          &lt;input type="text" name="userName" id="userName" class="InputBox"&gt;&lt;br&gt;
  
          &lt;label&gt;Email&lt;/label&gt;&lt;span id="userEmail-info" class="info"&gt;&lt;/span&gt;&lt;br/&gt;
          &lt;input type="text" name="userEmail" id="userEmail" class="InputBox"&gt;&lt;br/&gt;
  
          &lt;label&gt;Content&lt;/label&gt;&lt;span id="content-info" class="info"&gt;&lt;/span&gt;&lt;br/&gt;
          &lt;textarea name="content" id="content" class="InputBox" cols="25" rows="6"&gt;&lt;/textarea&gt;&lt;br/&gt;
  
          &lt;button name="submit" class="btnAction" onClick="sendContact();"&gt;Send&lt;/button&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>I have checked no of sites &amp; googled for the correct code but could not find?. Could you one spot the correct one please?</p>