簡體   English   中英

onclick jQuery提交表單而不重新加載頁面

[英]onclick jquery to submit form without reloading the page

大家好,因此我試圖創建的此頁面包含一些選項卡,每個選項卡的名稱都為月份,並且選項卡的內容為表格和提交按鈕。 即時通訊面臨的問題是,例如,如果即時通訊在2月選項卡上,並且我已經填寫了表格,並且當我單擊提交時,頁面將重新加載(將數據插入數據庫)並返回到第一個選項卡,即1月。 我如何阻止這種情況發生? 表示點擊提交並成功插入數據后,它仍然停留在2月選項卡上。 我讀到我必須使用具有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>  

您可以編寫一個自定義函數,當有人單擊“提交”按鈕時將執行該函數。 該函數需要返回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,只是看到它具有相同的解決方案

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM