javascript - 形成 PreventDefault 然后再次激活不起作用

Question

我的模态中有一个小表单，如下所示:

    <form name="form" action="" method="post">
          <div class="modal-body">
              <input type="text" name="edited_id" value="" id="edited_id" class="hidden"/>
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="edited_name" class="form-control" id="edit_name" value="">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="edited_email" class="form-control" id="edit_email" value="">
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input type="submit" name="edit_submit" class="btn btn-primary" value="Edit user"/>
          </div>
      </form>

如果用户输入的电子邮件已经存在于我的数据库中，我想阻止表单提交。我有以下脚本:

$("#check_email").click(function() {
    var email = $(this).parent().siblings().find("#email").val();
    var that = $(this);
    $(this).parent().parent().submit(function( event ) {
        $.get("php/verify_email.php", {email: email}, function(data){
            if(data === "")
            {
                that.parent().parent().unbind('submit').submit();
            }
            else {
                alert(data);
                event.preventDefault();
            }
        });
    });
});

问题是，如果我将 even.preventDefault() 置于 else 条件下，$.get() 似乎不会触发，因为我猜想表单提交速度更快。否则，如果我将 event.preventDefault() 放在 .submit(function( event ) { 之后，那么在用户更改后我无法取消绑定(bind)提交以工作电子邮件。

我做错了什么？

附注

我的 php 文件如下所示:

<?php
include "connect.php";

if(isset($_GET['email']) && !empty($_GET['email'])){

    $sql = "SELECT * FROM users WHERE email='".$_GET['email']."';";

    $result = $conn->query($sql);

    if ($result->num_rows > 0){
        echo "The email is already in our database. Please try another one!";
    }
}

?>

Answer 1

我了解您希望在已使用电子邮件的情况下避免发送表单。

首先，执行此操作的神奇按钮在哪里:D？我在example中添加了按钮。您必须确保您的“this ”是您想要的元素，创建类似 .parent().parent().parent() 的结构到处都是愚蠢的——一处改变，一切都不起作用。

下一步 为了避免表单提交，您必须 return false;在提交函数内，preventDefault()与 <a> 合作或其他事件，如 click

接下来..如果您发送ajax，您的回调函数可以在您点击提交后返回到您的浏览器。例如 checkClick -> sendAjax -> submitClick -> ajaxBack

下一步 :D - PHP:您的表单有 method="post"但服务器使用$_GET所以..如果你发送post如果 get 则必须使用 $_POST比 $_GET

这次你使用了$.get，所以我不知道你的ajax配置，但这可能会导致错误。

这是一些代码，但我确信这不是您想要的最终实现，但它应该有所帮助:)顺便说一句，对不起英语。

html:

<form name="form" action="" method="post">
      <div class="modal-body">
          <input type="text" name="edited_id" value="" id="edited_id" class="hidden"/>
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="edited_name" class="form-control" id="edit_name" value="">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="edited_email" class="form-control" id="edit_email" value=""> <button type="button" id="check_email" data-dismiss="modal">check</button>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <input type="submit" name="edit_submit" class="btn btn-primary" value="Edit user"/>
      </div>
  </form>

JavaScript:

$("#check_email").click(function() {
    var email = $(this).parent().find("#email").val();
    var that = $(this);
        alert(email);
    console.log($(this).parent().parent().parent())
    $(this).parent().parent().parent().submit(function( event ) {
        $.get("php/verify_email.php", {email: email}, function(data){
            if(data === "")
            {
                that.parent().parent().unbind('submit').submit();
            }
            else {
                alert(data);
                event.preventDefault();
            }
        });
        return false;
    });
});