如何避免在可折叠面板内提交表单时重新加载页面？

Question

在我的 Bootstrap 应用程序中，我通过以下链接包含了可折叠面板脚本（HTML、CSS 和 Jquery）：https://codepen.io/nhembram/pen/XKEJJp。 尽管我在 Bootstrap 中用水平表单替换了这些面板的内容。在提交按钮之后，我在表单末尾显示是否发生错误。 现在我面临的问题是，当我打开面板并提交表单时，面板会自动折叠。因此，用户必须再次打开面板才能查看操作状态。 我不希望页面重新加载，即面板折叠。 我尝试了 action="#" 和很多东西，但它们不起作用。 请帮帮我。 提前致谢。 这是我的代码：

<div class="wrapper center-block">
  <div class="panel-group" id="employee" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#employee" href="#delete_employee" aria-expanded="false" aria-controls="delete_employee">
          Delete Employee
        </a>
      </h4>
    </div>
    <div id="delete_employee" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        <form class="form-horizontal" action="#" method="post">
          <div class="form-group"> 
            <label style="text-align: left"  class="control-label col-md-offset-4 col-md-2" for="emp_id">Employee ID</label>
            <div class="col-md-2">
              <input type="text" class="form-control" name="eid" placeholder="Enter ID">
            </div>
          </div>

          <div class="form-group">
          <div class="col-md-offset-4"> 
            <div class="col-md-3">
              <input type="submit" name="delete_perm" class="btn btn-primary" value="Delete Permanently">
            </div>
            <div class="col-md-3">
              <input type="submit" name="delete_temp" class="btn btn-primary" value="Delete Temporary">
            </div>
          </div></div>
          <center>*This action will delete all the details of the employee*</center>
          <?php
          if(isset($_POST['delete_perm'])){
            $eid = mysqli_real_escape_string($db,$_POST['eid']);
            $eid = intval($eid);
            $sql = "UPDATE `personal_details` SET `Active`=0 WHERE `ResourceID`='$eid'";
            mysqli_query($db,$sql);
                if( mysqli_affected_rows($db) == 0) 
                  echo "<center>Employee ID does not exist</center>";
                else
                    echo "<center>Deleted data successfully</center>";
          }
          elseif(isset($_POST['delete_temp'])){
            $eid = mysqli_real_escape_string($db,$_POST['eid']);
            $eid = intval($eid);
            $sql = "UPDATE `personal_details` SET `Long_Leave`=1 WHERE `ResourceID`='$eid'";
            mysqli_query($db,$sql);
                if( mysqli_affected_rows($db) == 0) 
                  echo "<center>Employee ID does not exist</center>";
                else
                    echo "<center>Employee deleted temporarily</center>";
          }
          ?>
        </form>

      </div>
    </div>
  </div>
</div>
</div>

Answer 1

如果您使用 jQuery 和 ajax，您可以在后台提交表单而无需重新加载页面，如下所示：

<script>
    (function(){
        // listen for when the form is submitted (when they click type="submit" button)
        $(document).on('submit', 'form', function(e){
            // Stop the form from submitting and reloading the page
            e.preventDefault();

            // Grab the form that we just listened for
            var form = $(this)

            // Trigger an ajax request
            $.ajax({
                // Set the method
                type: 'post',

                // Link to your php that will update your database (the form's action="")
                url: '/link-to-your.php',

                // pass through the data from the form
                data: form.serialize(),

                // This will fire off if everything was successful. 
                // You technically do not have to add anything here. 
                // The form will have submitted in the background and the page will not reload.
                success: function(data) {
                    alert('form was submitted');
                }
            });
        });
    })();
</script>

希望有帮助！