在Bootstrap中以编程方式关闭模式对话框，并在提交时显示另一页

问题描述 投票：0回答：1

[当用户进入需要他们注册的页面时，我想显示一个具有ID和密码的Bootstrap模式对话框。当用户按下“提交”按钮时，我要：

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

当前发生的情况是用户按下Submit按钮。我通过验证并尝试隐藏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/[email protected]/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>
javascript bootstrap-4 bootstrap-modal
1个回答
1
投票

您正在单击form中的提交按钮。这将触发form submit，在此尝试重定向提交请求。由于尚未在action标记上指定任何method和form属性，因此浏览器不知道将form submit请求重定向到何处，您会看到空白页。

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

下面的代码有效。在jsfiddle中运行代码或stackoverflow代码段。这表明页面重定向正确发生，并将在您的应用程序中工作。 SO和JSFiddle不喜欢在其代码段中显示其他网站。

https://duckduckgo.com/
$("#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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.