AJAX表单提交

Question

I'm coding a CMS for Game Server Sellers, but ran into a problem. I have the following code:

<div id="ServerResponse" align="center"></div>
<form id="RegistrationForm" method="post" action="/account.php?do=create">
  <input type='text' placeholder='{#Name#}' id='Name' name="Name" autocomplete="off">
  <input type='text' placeholder='{#Surname#}' id='Surname' name="Surname" autocomplete="off"><br />
  <select name="day" id="day" style='width: 55px;'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
  </select>

  <select name="month" id="month" style='width: 90px;'>
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
  </select>

  <select name="year" id="year" style='width: 70px;'>
    <option value="1950">1950</option>
    <option value="1951">1951</option>
    <option value="1952">1952</option>
    <option value="1953">1953</option>
    <option value="1954">1954</option>
    <option value="1955">1955</option>
    <option value="1956">1956</option>
    <option value="1957">1957</option>
    <option value="1958">1958</option>
    <option value="1959">1959</option>
    <option value="1960">1960</option>
    <option value="1961">1961</option>
    <option value="1962">1962</option>
    <option value="1963">1963</option>
    <option value="1964">1964</option>
    <option value="1965">1965</option>
    <option value="1966">1966</option>
    <option value="1967">1967</option>
    <option value="1968">1968</option>
    <option value="1969">1969</option>
    <option value="1970">1970</option>
    <option value="1971">1971</option>
    <option value="1972">1972</option>
    <option value="1973">1973</option>
    <option value="1974">1974</option>
    <option value="1975">1975</option>
    <option value="1976">1976</option>
    <option value="1977">1977</option>
    <option value="1978">1978</option>
    <option value="1979">1979</option>
    <option value="1980">1980</option>
    <option value="1981">1981</option>
    <option value="1982">1982</option>
    <option value="1983">1983</option>
    <option value="1984">1984</option>
    <option value="1985">1985</option>
    <option value="1986">1986</option>
    <option value="1987">1987</option>
    <option value="1988">1988</option>
    <option value="1989">1989</option>
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
    <option value="1996">1996</option>
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
  </select>

  </br>

  <input type='text' placeholder='{#Username#}' id='Username' name="Username" autocomplete="off"><br />
  <input type='password' placeholder='{#Password#}' id='Password' name="Password" autocomplete="off"><br />
  <input type='password' placeholder='{#RPassword#}' id='RPassword' name="RPassword" autocomplete="off"><br />
  <input type='text' placeholder='EMail' id='Email' name="Email" autocomplete="off"><br />
  <input type='submit' value='{#Registration#}'> <input type="reset" value="{#ResetF#}"><br />
</form>

</center>

The thing is, I'm not able to make this form to post data through AJAX Post, it just opens account.php?do=create page.

Can you please help me to solve this problem?

All js like jquery.js, jquery.form.js are included

I'm using this code to do AJAX stuff:

<script type="text/javascript">
  $(document).ready(function(){
    var options = { 
      target: "#ServerResponse",
      timeout: 3000
    };

    $('#RegistrationForm').submit(function() { 
      $(this).ajaxSubmit(options); 
       return false;
    }); 
  });
</script>

Also I'm using Smarty, and code mentioned above is inside {literal}{/literal} tags.

Answer 1

Submit on a form is an event and to cancel the default action of a submit event you need to use event.preventDefault();. See Here

preventDefault

If an event is cancelable, the preventDefault method is used to signify that the event is to be canceled, meaning any default action normally taken by the implementation as a result of the event will not occur. If, during any stage of event flow, the preventDefault method is called the event is canceled. Any default action associated with the event will not occur. Calling this method for a non-cancelable event has no effect. Once preventDefault has been called it will remain in effect throughout the remainder of the event's propagation. This method may be used during any stage of event flow.

Maybe try your ajax this way.

$('#RegistrationForm').submit(function(e) {
 e.preventDefault(); 
 var postData = $(this).serialize();
 var formURL = $(this).attr("action");
 $.ajax({
     type: "POST",
     url: formURL,
     timeout: 3000,
     data: postData,
     success: function(response){
       $("#ServerResponse").html(response);   
     }          
   });
});