提交 HTML 表单后延迟 Bootstrap 模态隐藏答案

【问题标题】：Delay the Bootstrap modal hide after the HTML form is submitted提交 HTML 表单后延迟 Bootstrap 模态隐藏
【发布时间】：2022-01-21 20:45:06
【问题描述】：

在我的 WordPress v5.8.2 中，我在 Bootstrap modal v4 中有一个自定义 HTML 表单。

<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="form" method="POST" class="form">
          <input id="name" name="name" class="form-control" type="text" placeholder="Full Name" value="">
          <button type="submit" name="form_submit" id="form_submit" class="btn">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <div id="confirm" class="row d-none">
          <div class="col-12 text-center">
            <div id="alert" role="alert"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

为了用户体验，希望在表单提交后在 div #confirm 中使用以下 jQuery 显示 2 秒的确认消息：

  $(document).on("submit", "#form", function(e) {
    $name = $(this).find('input[name=name]').val(); // Name
    $("#alert").text('Thank you ' + $name + '.');
    $("#confirm").removeClass("d-none");
    setTimeout(function() {
      $("#modal").modal('hide');
    }, 2000);
  });

我想在模态框隐藏之前按住 2 秒钟，这样我就可以在 #confirm div 中显示消息。但是模态会立即关闭。

这里是https://jsfiddle.net/kingBethal/08v2qfa5/10/。

【问题讨论】：

您是在尝试响应提交事件的完成，还是只是在提交表单时显示某种消息？
此感谢信息将在单击提交按钮时显示为表单提交确认，此按钮只有在通过其他功能验证表单后才会启用。
您可以参考Prevent Default on Form Submit jQuery 来捕捉提交事件，然后使用ajax 提交您的表单。
@LamTranDuc 虽然我想做非 ajax 方式来保持代码简单，但它总是回到 ajax 以使其简单:)。
@theKing 你的问题解决了吗？

标签： jquery bootstrap-modal

【解决方案1】：

我建议您使用button 类型的按钮（不是submit 类型的按钮），然后以编程方式处理表单提交

请看下面的示例代码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Test</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        window.addEventListener('load', () => {
            document.getElementById('submitButton').addEventListener('click', () => {
                let name = document.getElementById('name').value;
                if (name !== '') {
                    let alertPlaceholder = document.getElementById('alertPlaceholder');
                    alertPlaceholder.outerHTML = '<div class="alert alert-primary">Thank you, ' + name + '!</div>';
                    setTimeout(() => { document.getElementById('form').submit(); }, 2000);
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Test</button>
        <div class="modal" id="exampleModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">This is a test</h5>
                    </div>
                    <div class="modal-body">
                        <div id="alertPlaceholder"></div>
                        <form id="form">
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input class="form-control" id="name" name="name" value="Fabio" />
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" id="submitButton">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

这段代码对我有用，但是我采取了ajax方式来解决我的问题。

【解决方案2】：

您的代码的问题是当您单击提交时，它会直接提交您的表单而不执行您的 JS 脚本，因此要执行 JS 脚本，您必须阻止提交表单。为此，将此代码放入提交Js

e.preventDefault()

脚本执行后提交表单代码

document.getElementById("form").submit()

这是工作代码，希望对您有所帮助。

 
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">

    </script>
          <script>
          $(document).on("submit", "#form", function(e) {
            e.preventDefault()
            $name = $(this).find('input[name=name]').val(); // Name
            $("#alert").text('Thank you ' + $name + '.');
            $("#confirm").removeClass("d-none");
            setTimeout(function() {
              $("#modal").modal('hide');
             document.getElementById("form").submit();
            }, 2000);
           
          });
          </script>
    </head>
    <body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
      Launch modal
    </button>

     <!-- Modal -->
    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form id="form" method="POST" class="form">
              <input id="name" name="name" class="form-control" type="text" placeholder="Full Name" value="">
              <button type="submit" name="form_submit" id="form_submit" class="btn">Submit</button>
            </form>
          </div>
          <div class="modal-footer">
            <div id="confirm" class="row d-none">
              <div class="col-12 text-center">
                <div id="alert" role="alert"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    </body>
    </html>

【讨论】：

我之前的代码中有e.preventDefault()，但这会阻止表单数据保存在后端，因为它会阻止表单提交事件。
在“提交”事件处理程序中调用preventDefault() 方法会阻止提交表单。为了使您的解决方案起作用，您必须以编程方式提交表单
@Neeraj，你的代码无论如何都不起作用
只是因为问题不清楚@Fabio
@Neeraj，您需要将document.getElementById('form').submit(); 语句移到超时事件处理程序中

【解决方案3】：

@lam-tran-duc 的 Talking queue 建议使用 ajax，我就是这样解决的：

形式：

    <!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="form" method="POST" class="form">
          <input id="name" name="name" class="form-control" type="text" placeholder="Full Name" value="">
          <button type="submit" name="form_submit" id="form_submit" class="btn">Submit</button>
        </form>
      </div>
      <div class="modal-footer">
        <div id="confirm" class="row d-none">
          <div class="col-12 text-center">
            <div id="alert" role="alert"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在 WordPress functions.php 文件中的 ajax 变量下面声明：

/*
 * ajax variables in functions.php
 */

function ajax_variables() {?>
  <script type = "text/javascript" >
    var ajax_url = '<?php echo admin_url("admin-ajax.php"); ?>';
  var ajax_nonce = '<?php echo wp_create_nonce("ajax_nonce"); ?>'; 
  </script> <?php
}

add_action('wp_head', 'ajax_variables');

通过下面的 JS 脚本，我可以阻止表单提交，所以我可以显示确认消息，然后通过 ajax 处理表单提交：

/*
 * .js file
 */

$(document).on("submit", "#form", function(e) {
  $name = $(this).find('input[name=name]').val(); // Name
  $("#alert").text('Thank you ' + $name + '.');
  $("#confirm").removeClass("d-none");
  setTimeout(function() {
    $("#modal").modal('hide');
  }, 20000);

  // ajax
  var form_data = $(this).serializeArray();

  // Here we add our nonce. The one created in functions.php ajax_variables function.
  form_data.push({
    "name": "form",
    "value": ajax_nonce
  });

  // ajax petition.
  $.ajax({
    url: ajax_url, // AJAX endpoint from ajax_variables function
    type: 'post',
    security: '<?php echo $ajax_nonce; ?>',
    data: form_data
  });

  // prevents the submit event to refresh the page.
  return false;

});

【讨论】：