Question

我想将我的jQuery函数调用为HTML标签。我的登录表单连接到Azure数据库，我希望当客户端按下“登录”按钮以显示模式弹出窗口时显示一条特定消息，无论用户是否是数据库。

在我的jQuery脚本中，如果连接为true，我想通过将我重定向到另一个页面来处理该错误，否则，请更改弹出窗口中的消息。

现在，它没有进入jQuery函数，即使是错误的，我也总是得到真实的消息。

jQuery脚本：

<script>
  function checkForm(e) {
    e.preventDefault();
    $.post("https://studentshiftregister.azurewebsites.net/api/Login", function (data, status) {
      if (status === "200") {
        window.location.href = "#Portfolio";
        return true;
      } else {
        //display error information in the current form page
        $("#postLoginMessage").html("<font color=red>Login unsuccessfull!</font>");
        return false;
      }
    });
  }
</script>

HTML表单：

<form action="https://studentshiftregister.azurewebsites.net/api/Login" method="post" role="form" class="contactForm" onsubmit="checkForm()">
  <div class="form-group">
      <input type="email" class="form-control input-text" name="email" id="email" placeholder="Email" data-rule="email" data-msg="Please enter a valid email" />
      <div class="validation"></div>
  </div>
  <div class="form-group">
    <input type="password" name="password" class="form-control input-text" id="password" placeholder="Password" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
    <div class="validation"></div>
  </div>

  <div class="text-center"><button id="myBtn" type="submit" class="input-btn" >Login</button></div>
</form>
<div id="myModal" class="modal" >

  <!-- Modal content -->
  <div class="modal-content" > 
    <span class="close">&times;</span>
    <p id="postLoginMessage">Welcome back!</p>
  </div>

</div>

Answer 1

您正在调用不带参数的checkForm()，但是该函数希望第一个参数是Event对象，因此它可以调用e.preventDefault()。更改

onsubmit="checkForm()"

收件人：

onsubmit="checkForm(event)"

以HTML格式包含jQuery函数

1 个答案: