title: How to send a request using JQuery Ajax when submitting a form without reloading the page
body: <p>I have this form here that requires the user to enter a value.</p>
  
  <pre><code>&lt;form id="result" name="result" action="/HelloStruts2/views/register.action" method="post"&gt;
      &lt;label&gt;UserName&lt;/label&gt;
      &lt;input type="text" name="userBean.username" value="" id="result_userBean_username"/&gt;
      &lt;input type="submit" id="registerSubmit" value="Submit"/&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>and this is my script.</p>
  
  <pre><code>$(document).ready(function(){
       $('#registerSubmit').live('click',function(){
           alert("XD");
           $.ajax({
               //this is the php file that processes the data and send mail
               url: "register.action", 
               //GET method is used
               type: "POST",
               //pass the data           
               //Do not cache the page
               cache: false,
               //success
               success: function (html) {              
                   //if process.php returned 1/true (send mail success)
                  $('#result').html(html);       
               }       
           });
       })
  })
  </code></pre>
  
  <p>The form is being validated successfully when I submit the form the thing is instead of sending a request, the whole page is being reloaded or refresh, how do I prevent this from happening?</p>
  
  <p><strong>UPDATE</strong>
  I have updated my script with this.</p>
  
  <pre><code>$(document).ready(function(){
       $('#result').on('submit',function(e){
           e.preventDefault();
           $.ajax({
               //this is the php file that processes the data and send mail
               url: "register.action", 
               //GET method is used
               type: "POST",     
               //Do not cache the page
               cache: false,
               //success
               success: function (html) {              
                  $('#content').html(html);       
               }       
           });
       })
  })
  </code></pre>
  
  <p>but when I click the button the second time, the page is reloading instead of sending a request</p>