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()置于其他条件下，$.get()似乎不会触发，因为我猜表单提交的速度更快。否则，如果我将event.preventDefault()放在.submit(function( event ) {之后，那么在用户更改电子邮件后，我无法取消绑定提交。

我做错了什么？

P.S。

我的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而不是$ _GET

，你必须使用$ _POST

这次你使用$ .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;
    });
});

表单preventDefault然后再次激活不工作

1 个答案: