onclickjquery可以在不重新加载页面的情况下提交表单

onclick jquery to submit form without reloading the page

本文关键字：情况下 表单 提交 加载 新加载 onclickjquery      更新时间：2024-05-27

嘿，伙计们，所以我试图创建的这个页面有每个选项卡的月份名称，选项卡的内容是一个表单和一个提交按钮。例如，我面临的问题是，如果我在二月选项卡上，我已经填写了表格，当我单击提交时，页面会重新加载（数据插入数据库），并返回到第一个选项卡，即一月。我该如何阻止这种情况的发生？这意味着在点击提交并成功插入数据后，它仍然停留在二月选项卡上。我读到我必须使用带有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，刚刚看到它有相同的解决方案

相关文章：