javascript - 以编程方式关闭 Bootstrap 中的模式对话框并在提交时显示另一个页面-6ren

javascript - 以编程方式关闭 Bootstrap 中的模式对话框并在提交时显示另一个页面

转载作者：行者123 更新时间：2023-12-02 21:50:30

当用户转到要求他们注册的页面时，我想显示带有 ID 和密码的 Bootstrap 模式对话框。当用户按下提交按钮时，我想:

验证密码并注册
关闭对话框
将它们带到另一个页面以显示一些信息

当前发生的情况是当用户按下“提交”按钮时。我进行验证并尝试隐藏 Bootstrap 模式对话框，但随后页面重新显示并且对话框返回。这种情况一次又一次地发生。

这是jsfiddle

这是 HTML 页面:

<!DOCTYPE html>

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Immedia Signup</title>

    <script src="https://npmcdn.com/parse/dist/parse.min.js"></script>

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <!-- Immedia stylsheet overrides -->
    <!-- <link href="css/im-styles.css" rel="stylesheet" /> -->

    <style>
      html,
      body {
        background: url() no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        /* color: #212529; */
        /* color: #bccee0; */
        color: #bccee0;
      }

      .big-text-on-bg-img {
        width: 75%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 1.2;
      }

      @media (min-width: 450px) {
        .container-xs {
          max-width: 500px;
        }
      }

      .display-5 {
        font-size: 2.5rem;
        font-weight: 300;
        line-height: 1.2;
      }
    </style>
    <title>Immedia Home</title>
  </head>
  <body onload="onloadHandler()">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <h1 class="masthead-brand">Modal Test Page</h1>
        </div>
      </header>
    </div>
    <!-- cover-container -->
    <!-- Modal -->
    <div
      class="modal fade"
      id="signupModal"
      data-backdrop="static"
      tabindex="-1"
      role="dialog"
      aria-labelledby="signupModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="signup-title">
              Thanks for entering an email address and password to protect your
              account.
            </h5>
          </div>
          <!-- modal-header -->
          <div class="modal-body">
            <form id="signup-form" onsubmit="submitHandler()">
              <div class="form-group">
                <label for="email">Email address</label>
                <input
                  type="email"
                  autocomplete="username"
                  class="form-control"
                  id="email"
                  aria-describedby="emailHelp"
                  required
                />
                <small id="emailHelp" class="form-text text-muted"
                  >We'll never spam you or share your email.</small
                >
              </div>
              <!-- form-group -->
              <div class="form-group">
                <label for="password">Password</label>
                <input
                  type="password"
                  autocomplete="new-password"
                  class="form-control"
                  id="pwd-field"
                  aria-describedby="passwordHelp"
                  required
                />
                <small id="passwordHelp" class="form-text text-muted">
                  Passwords must have at least 8 characters with one uppercase
                  one lowercase, one digit and one special character
                  "!@#$%&amp;*()"
                </small>
              </div>
              <!-- form-group -->
              <div class="form-group">
                <button
                  id="submit-button"
                  type="submit"
                  class="btn btn-primary"
                >
                  Submit
                </button>
              </div>
              <!-- form-group -->
            </form>
          </div>
          <!-- modal-body -->
        </div>
        <!-- modal-content -->
      </div>
      <!-- modal-dialog -->
    </div>
    <!-- modal fade-->

    <!-- JavaScript -->
    <script>
      // Function definitions
      //

      $("#signupModal").on("hidden.bs.modal", function() {
        $("body").removeClass("signupModal");
      });

      // Hide a DOM element on the page
      // Process the signup when the user presses submit
      $("#submit-button").click(function() {
        const email = $("#email").val();
        const password = $("#pwd-field").val();
        console.info("email: " + email + ', password: "' + password + '"');

        if (true) {
          // Do not check for valid password. Assume it is for now.
          console.info("valid password: ", password);

          try {
            // Signup user here
            console.info("submitHandler(): successfully signed up");
            $("#signupModal").modal(hide);
            // They signed up successfully. Send them to the next page (for example only)
            window.location.href = "https://www.duckduckgo.com";
         } catch (err) {
            console.error("Error signing up: ", err);
          }
        } else {
          // invalid password
          $("#pwd-field").val("");
        }
        console.info("submitHandler(): exiting function");
      });

      // Begin page execution
      function onloadHandler() {
        console.info("onloadHandler()");
        $("body").addClass("#signupModal");
        $("#signupModal").modal("toggle");
     }
    </script>
  </body>
</html>

最佳答案

您正在单击表单内的提交按钮。这将触发表单提交，并尝试重定向提交请求。由于您没有在 form 标记上指定任何 action 和 method 属性，浏览器不知道将 form 提交重定向到哪里 请求，您会看到一个空白页面。

在您的代码中，您已在提交按钮上使用 js 指定了一个操作监听器。监听器内的代码将执行，之后将执行默认操作，即表单提交。为了防止这种情况，添加e.preventDefault()并且不执行form Submit事件。

下面的代码有效。您将得到一个空白页，并显示控制台错误 拒绝显示 ' https://duckduckgo.com/ ' 在框架中，因为在 jsfiddle 或 stackoverflow 代码片段中运行代码时，祖先违反了以下内容安全策略指令:“frame-ancestors 'self'”。这表明页面重定向正确发生并且将在您的应用程序中工作。 SO 和 JSFiddle 不喜欢在其代码片段中显示其他网站。

$("#signupModal").on("hidden.bs.modal", function() {
  $("body").removeClass("signupModal");
});

// Hide a DOM element on the page
// Process the signup when the user presses submit
$("#submit-button").click(function(e) {
  // ************Add below code to prevent defauilt submit button form submit **********
  e.preventDefault();
  const email = $("#email").val();
  const password = $("#pwd-field").val();
  console.info("email: " + email + ', password: "' + password + '"');

  if (true) {
    // Do not check for valid password. Assume it is for now.
    console.info("valid password: ", password);

    try {
      // Signup user here
      console.info("submitHandler(): successfully signed up");
      $("#signupModal").modal('hide');
      // They signed up successfully. Send them to the next page (for example only)
      // ************ Change code to replace so that register page is removed from browser history on redirect **********
      window.location.replace("https://www.duckduckgo.com");
    } catch (err) {
      console.error("Error signing up: ", err);
    }
  } else {
    // invalid password
    $("#pwd-field").val("");
  }
  console.info("submitHandler(): exiting function");
});

// Begin page execution
function onloadHandler() {
  console.info("onloadHandler()");
  $("body").addClass("#signupModal");
  $("#signupModal").modal("toggle");
}

html,
body {
  background: url() no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  /* color: #212529; */
  /* color: #bccee0; */
  color: #bccee0;
}

.big-text-on-bg-img {
  width: 75%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.2;
}

@media (min-width: 450px) {
  .container-xs {
    max-width: 500px;
  }
}

.display-5 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="viewport" content="width=device-width" />
  <title>Immedia Signup</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="https://npmcdn.com/parse/dist/parse.min.js"></script>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
  <!-- Immedia stylsheet overrides -->
  <!-- <link href="css/im-styles.css" rel="stylesheet" /> -->
</head>

<body onload="onloadHandler()">
  <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
    <header class="masthead mb-auto">
      <div class="inner">
        <h1 class="masthead-brand">Modal Test Page</h1>
      </div>
    </header>
  </div>
  <!-- cover-container -->
  <!-- Modal -->
  <div class="modal fade" id="signupModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="signup-title">
            Thanks for entering an email address and password to protect your account.
          </h5>
        </div>
        <!-- modal-header -->
        <div class="modal-body">
          <!-- ************ Remove form submit code ***********-->
          <form id="signup-form">
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" autocomplete="username" class="form-control" id="email" aria-describedby="emailHelp" required />
              <small id="emailHelp" class="form-text text-muted">We'll never spam you or share your email.</small
                    >
                  </div>
                  <!-- form-group -->
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input
                      type="password"
                      autocomplete="new-password"
                      class="form-control"
                      id="pwd-field"
                      aria-describedby="passwordHelp"
                      required
                    />
                    <small id="passwordHelp" class="form-text text-muted">
                      Passwords must have at least 8 characters with one uppercase
                      one lowercase, one digit and one special character
                      "!@#$%&amp;*()"
                    </small>
            </div>
            <!-- form-group -->
            <div class="form-group">
              <button id="submit-button" type="submit" class="btn btn-primary">
                      Submit
                    </button>
            </div>
            <!-- form-group -->
          </form>
        </div>
        <!-- modal-body -->
      </div>
      <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
  </div>
  <!-- modal fade-->
</body>

</html>

关于javascript - 以编程方式关闭 Bootstrap 中的模式对话框并在提交时显示另一个页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60139588/

文章推荐： java - 更新cloudera quickstart vm以使用java7

文章推荐： sql-server - 监视 SSRS 订阅错误

javascript - 点击表单外部的按钮以调用表单中“提交”按钮上的“提交”
假设我有一个带有隐藏提交按钮的表单，我在其中输入值，然后我点击一个按钮，就会出现带有确认消息和确认按钮的对话框。当我单击“确认”按钮时，我还单击了表单中隐藏的提交按钮。这可能吗？我如何在 JQuery
git - 提交 PR 并提交更改后，是否可以压缩 Git 提交？
我们正在学习 Git 并使用 GitHub 作为我们的托管站点。我们都 fork upstream repo 并 PR 我们的提交到 upstream 以获取我们的更改。我们正在努力学习如何压缩我
javascript - 如果我选中 2 个输入单选按钮，禁用的“提交”按钮将启用，但如果我取消选中它们...“提交”按钮不会禁用返回
我只需要一些关于这段代码的帮助。 var prv3; var markIt3 = function(e) { if (prv3 === this && this.checked) { th
javascript - 如何使用 Javascript 提交 2 个表单 w/1 提交？ 1 表格使用 "GET"& 其他使用 "POST"
如果 1 个表单使用“GET”方法而另一个使用“POST”方法，我如何提交位于同一页面上的 2 个表单。每个表单都有相同的操作并转到相同的下一页。需要帮忙。感谢大家的帮助。我怎样才能得到下面这两个使
Javascript 提交
您好，我的表单中有以下脚本 function pdf() { var frm = document.getElementById("form1"); frm.action = "http://www.
iOS胖静态库&提交
我有一个 iOS 胖静态库(iphoneos 和 iphonesimulator)，如果我在应用程序提交期间使用它，它会因为二进制文件包含 iphonesimulator 代码而失败吗？最佳答案我
Git卡在状态/添加/提交
我似乎有一个卡住的 git repo。它卡在所有基本的添加、提交命令上，git push 返回所有内容为最新的。从其他帖子我已经完成了 git gc 和 git fsck/ 我认为基本的调试步骤是
jquery 表单使用 .on() 提交
我正在尝试发送由 jquery 创建的表单。该表单附加到一个 div 中，下面的变量“data”是使用 php 创建的，我将只发布最重要的 js 代码。我尝试了很多带有和不带有“on()”的操作，但
Bootstrap 选项卡中的表单不工作/提交
我面临一个简单的问题，但不知道如何解决。我正在使用 twitter bootstrap 的标签。选项卡有效，但每个选项卡中的表单不提交。表单在没有选项卡的情况下提交。以下是我用于标签的链接
git - 检查多个存储库中是否需要推送/提交
我的计算机上有 140 个 git 存储库，每周我可以处理其中 10-15 个。有没有办法知道是否忘记提交/推送我的一个项目？这些存储库都位于同一位置:“C:/Projects”。输出类似于 C:
Javascript if/else 提交
我对 javascript 完全陌生，目前正在开发我的第一个函数。我有这 2 个文本输入区域，可以在其中输入他的姓名和级别。 Nom: Niveau (1 á 6): 提交后，
Docker 提交 - 未保存数据库更改
我安装了最新的 Docker CS，得到了 LAMP image来自 Docker 集线器。我正在尝试在其中创建一个数据库并使用保存在其中的数据库制作一个新图像。启动容器:docker run --
jquery - 提交()事件的错误
我有这个 jQuery 简单代码: 由于某种原因，submit() 无法正常工作(我的表单在单击 old_thumb 按钮后未提交。有人可以帮助我吗？这里是 html 的一部分(它很长
jquery 提交 onclick
如何获得 input type="submit"onclick 事件来触发 commitfunds.valdiate？我不能使用类或 ID。它必须是一个 onclick 事件。这是代码: row A
javascript - 提交/输入后将焦点保持在同一输入字段
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and th
javascript 提交()命令不发送我的帖子数据
来自 this earlier thread我以为我知道可以使用 javascript submit() 命令通过 POST 方法发送表单数据。但我无法让它工作。这个演示在目的方面没有明显的意义，但请
mysql XA 提交
在 mysql 重新启动时提交 XA 待处理事务时，出现以下错误。请帮助我解决这个错误。 mysql> XA RECOVER CONVERT XID; +----------+------------
javascript - 逐步增强表格(提交)
我有一个带有的表单. 如果启用了 Javascript，我将删除此 submit -输入字段$('#no-js-submit').remove();并添加“fire-ajax”按钮 $('Fire
javascript - ‘提交’onload进入循环
我希望在页面加载后提交此表单，并且我使用了以下代码来完成此操作。问题是页面不断重新加载并停留在该循环中。 HTML Select Genre
python - Mechanize 提交
我们有一个表单，其中有几个单独的提交按钮，它们执行不同的操作。问题是我有几个具有以下 HTML 的按钮: 现在您无法使用标准的 find_control 函数按值定位元素。所以我写了一个谓词函数来

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 以编程方式关闭 Bootstrap 中的模式对话框并在提交时显示另一个页面