Как избежать перезагрузки страницы при отправке формы внутри складной панели? - PullRequest
Новая
       17

Как избежать перезагрузки страницы при отправке формы внутри складной панели?

0 голосов
/ 06 июня 2018

В моем приложении 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>

1 Ответ

0 голосов
/ 06 июня 2018

Если вы используете 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>

Надеюсь, это поможет!

...