onclick jQuery提交表单而不重新加载页面

Question

hey guys so this page im trying to create has tabs with the names of months for each tab and the content of the tabs is a form and a submit button. The problem im facing is, for example, if im on the February tab and i have filled in the form and when i click submit the page reloads(the data inserted into database) and goes back to the first tab which is January. how do i stop that from happening? meaning after clicking on submit and data is inserted successfully it still stays on the February tab. i read that i have to use tag with onClick attribute but thats it. my knowledge of javascript is minimal.

part of the tab with content:

             <div class="tabContent" id="feb">
         <form method="post" action="income.php">
    <input type="hidden" name="feb" value="February">
            <center><h2>February </h2></center>
            <div>
    <div style="height:0px;">
    <div class="rmtotal">
         <h3>Your Total Income :</br> RM   <input type="text" id="febtotal"         
                   name="febtotal" size="11" readonly value="<?php if(@$fsql) {echo   
                       htmlentities(@$fprev['total']);} if(isset($_POST['febtotal']))
                         {echo htmlentities($_POST['febtotal']);}?>" ></h3>
    </div>
    <input type="submit" value="Save" class="save" name="febsave">
    <button type="submit" class="prev" name="febprev" id="button" 
             onClick="">Select from previous Month</button>
    </div>
    <table border="1" rules="groups" cellpadding="10px;" class="tableincome">
    <thead>
        <th>Monthly Salary</th>
        <th></th>
        <th>RM</th>
    </thead>
    <tr>
        <td>Basic Salary</td>
        <td></td>
        <td><center><input type="text" class="feb" placeholder="0" 
                name="febbasic" size="11" value="<?php if(@$fsql) {echo 
          htmlentities(@$fprev['basic']);} if(isset($_POST['febbasic'])){echo 
             htmlentities($_POST['febbasic']);}?>"></center></td>
    </tr>
    </table>
    </form>
      </div>
      </div>  

Answer 1

You can write a custom function that will be executed when someone clicks the submit button. That function needs to return false to prevent the default behavior.

For the function itself I would use Ajax to send an asynchronous request to the server that can store the data in the database. If you use jQuery it will be very easy to use Ajax:

function handleClick(){
   //send the data to the server
   $.post(/*...see jQuery documentation*/)

   //prevent the form from submitting and the page from reloading
   return false; 
}

EDIT: Or just follow the posted link :D, just saw it has the same solution