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

时间:2013-12-10 13:00:40

标签: javascript jquery

嘿大家好,所以我试图创建的这个页面有每个标签的月份名称标签,标签的内容是表格和提交按钮。我面临的问题是,例如,如果即时通讯在二月份选项卡上,我填写了表单,当我点击提交页面重新加载(数据插入数据库)并返回到第一个选项卡,即1月。我如何阻止这种情况发生?单击提交并且数据插入成功后,它仍然保留在二月选项卡上。我读到我必须使用带有onClick属性的标签,但就是这样。我对javascript的了解很少。

包含内容的标签的一部分:

             <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>  

1 个答案:

答案 0 :(得分:0)

您可以编写一个自定义函数,当有人单击提交按钮时将执行该函数。 该函数需要返回false以防止默认行为。

对于函数本身,我将使用Ajax向服务器发送异步请求,该服务器可以将数据存储在数据库中。如果你使用jQuery,那么使用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; 
}

编辑:或者只是按照发布的链接:D,只是看到它有相同的解决方案