How to avoid a page from reloading on submitting a form inside a collapsible panel?

Question

In my Bootstrap application, I have included collapsible panels script (HTML,CSS and Jquery) through this link: https://codepen.io/nhembram/pen/XKEJJp. Though I have replaced the content of these panels with horizontal forms in Bootstrap. I am displaying whether an error has occurred or not at the end of the form, after the submit button. Now the problem that I am facing is that when I open the panel and submit the form, the panel automatically collapses. Hence the user has to open the panel again to see the operation status. I do not want the page to reload i.e. the panel to collapse. I have tried action="#" and many things but they do not work. Please help me out. Thanks in advance. This is my code:

<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

If you use jQuery and ajax you can submit your form in the background without reloading the page like this:

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

Hope that helps!