Блог

Главная - Вопросы по программированию - Запретить закрытие модала после отправки начальной загрузки формы 4

Запретить закрытие модала после отправки начальной загрузки формы 4

#javascript #php #jquery

#javascript #php #jquery

Вопрос:

Я уже видел другие вопросы, но не имеет ничего похожего на мой вопрос:

Я использую bootstrap 4 и пытаюсь предотвратить закрытие моего модала.

Вот что я пытаюсь сделать:

index.php:

У меня есть кнопка под названием View button, в которой я вызываю anotherfile.PHP-файл внутри модала.

Модал открыт и anotherfile.php проявляется должным образом.

anotherfile.php имеет следующие:

Простое текстовое поле с кнопкой отправки и некоторыми вычислениями внутри POST в том же файле PHP.

Поэтому, когда я нажимаю кнопку отправки, модал закрывается. Я ищу способ обновления, и результаты должны появляться в модальном.

Вот мой anotherfile.php код

  <?php
    include ('dbconfig.php');
    global $conn;
    
    if(!empty($_POST)){
      //some calculation is done using the ID posted from the form.
    }
    ?>

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Get Data</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>Download Data</h2>
       <div class="row">
            <div class="col-sm-6 col-xs-12">
              <form action="" Method="POST">
                <div class="form-group">
                  <label for="pwd">ID:</label>
                  <input type="text" class="form-control" id="id" placeholder="Enter ID" name="id" required>
                </div>
                <button type="submit" class="btn btn-primary btn-lg btn-block">Download</button>
                <a href="detail.php" class="btn btn-warning btn-lg btn-block">Go Back</a>
              </form>
            </div>
        </div>
    </div>
    
    </body>

Везде форма помещается внутри модала. Здесь я размещаю PHP-файл внутри модала. Это совершенно другое. Пожалуйста, не закрывайте его дублирующим вопросом.

Комментарии:

1. Сохраняете ли вы результаты в базе данных или где-либо еще, где потребуется запрос POST? Если нет, вы можете установить прослушиватель событий на кнопке отправки, затем выполните e.preventDefault() . Это предотвратит отправку формы. Затем вы можете выполнить свои вычисления, а затем соответствующим образом обновить компоненты формы, установив их свойство value в JavaScript. AJAX может быть и другим вариантом для вас.

2. Я отправляю запрос POST и получаю значения из базы данных в соответствии с размещенными значениями. единственная проблема заключается в том, что страница обновляется, и из-за этого модал закрывается.

3. Проверьте это: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch Установите прослушиватель событий щелчка на кнопке, используйте e.preventDefault(), чтобы предотвратить публикацию запроса в форме, затем используйте выборку для отправки запроса post и ожидания ответа, затем соответствующим образом обновите modal.

4. Как вы вызываете anotherfile.php внутри модального? Используете ли вы iframe?