title: Ajax and JQuery to post a form without refreshing
body: <p>Well i am trying to create a form that will not refresh the page after submit.
  After reading few papers on how to do that i came up with this code:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
  
          // enter key
          $("input").keypress(function(event) {
              if (event.which == 13) {
                  doLogin();
              }
          });
      });
  
      function doLogin() {
  
          if(!checkLoginField())
              return;
          $("#myform").validate({
              debug: false,
              submitHandler: function(form) {
                  // do other stuff for a valid form
                  $.post('process.php', $("#myform").serialize(), function(data) {
                      $('#results').html(data);
                  });
              }
          });
          return;
      }
  
      function checkLoginField() {
  
          $("#errEmptyEmail").css("display","none");
          $("#errEmptyName").css("display","none");
  
          if($("#email").val() == '') {
              $("#errEmptyEmail").css("display","block");
              return false;   
          }
  
          if($("#name").val() == '') {
              $("#errEmptyName").css("display","block");
              return false;
          }
  
          return true;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the form:</p>
  
  <pre><code>&lt;form name="myform" id="myform" action="" method="POST"&gt;  
      &lt;label&gt;Name&lt;/label&gt;  
      &lt;input type="text" name="name" id="name" size="30" value=""/&gt;  
      &lt;br&gt;&lt;br&gt;
      &lt;label&gt;Email&lt;/label&gt;  
      &lt;input type="text" name="email" id="email" size="30" value=""/&gt; 
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" name="submit" value="Submit" onClick="doLogin();"&gt; 
  &lt;/form&gt;
  &lt;div class="wrapError" id="errEmptyEmail"&gt;Please enter your email address.&lt;/div&gt;
  &lt;div class="wrapError" id="errEmptyName"&gt;Please enter your name.&lt;/div&gt;
  &lt;div id="results"&gt;&lt;div&gt;
  </code></pre>
  
  <p>On process.php there is code that handles the name/email (and other variables that will be added later).
  But the problem that i have right now is that when my form is empty and i press submit i get the error but after a while it disappears, because as i noticed the page is being refreshed.</p>
  
  <p>Any suggestions?</p>
  
  <p>Also is this style vulnerable for injections? cause i am planing to make an account manager so, i was also wondering if this is safe approach to handle data.</p>