Javascript Html表单拒绝通过JQuery提交

因此，我在学习AJAX/JQuery教程，学习一个注册脚本，该脚本将由PHP/MySQL执行，并通过JQuery提交

现在我遇到的问题是表单直接提交到操作页面，这不应该是这样，因为它应该提交到script.js以下是表单的html代码

<form  method="post" id="register-form" action="transact-user.php">     
    <h2 class="form-signin-heading"></h2>
    <div class="form-group">
                        <div class='row'>
                        <div class='col-sm-6'>
                        <input type='text' class='form-control' id='fname' name='fname' placeholder="First name">
                        </div>
                        <div class='col-sm-6'>
                        <input type='text' class='form-control' id='lname' name='lname' placeholder="Last name">
                        </div>
                        </div>
    </div>

    <div class="form-group">
    <input type="text" class="form-control" placeholder="Phone Number"  name = "phone" id = "phone" >
    </div>

    <div class="form-group">
    <input type="email" class="form-control" placeholder="Email address"  name = "email" id ="email">
    <span id="check-e"></span>
  </div>

   <div class="form-group">
    <input type="password" class="form-control" placeholder="Password" name = "password" id = "password">
    </div>

    <div class="form-group">
    <input type="password" class="form-control" placeholder="Password Again" name = "confirmpassword" id = "confirmpassword">
    </div>

    <div class="form-group">
    <button class="btn btn-primary btn-block btn-apply" type="submit" name="btn-save" id = "btn-submit"><span class="glyphicon glyphicon-log-in"></span> &nbsp;Register</button>
   </div>


  </form>

</div> <!-- /container -->

<div id = "ack"></div>

最后，这是操作php脚本transact-user.php

    <?php

if($_POST)
{

$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$password = $_POST['password'];
$confirmpassword = $_POST['confirmpassword'];




        if($email != '') {
    $qry = "SELECT * FROM users WHERE email='$email'";
    $result = mysqli_query($mysqli,$qry);
    if($result) {
        if(mysqli_num_rows($result) > 0) {

                        echo "Email already in use";

        }
        @mysqli_free_result($result);
    }
    else {
        die("Query failed");
    }
}
            $activation = md5(uniqid(rand(), true)); 

            if ($stmt = "INSERT INTO users(firstname, lastname, email, password, verification, phone)"
                    ." values('$fname', '$lname', '$email', '$password', "
                    . "'$activation','$phone')" or 
                    die("Could not perform query ".mysqli_error($mysqli))) {

            $result = mysqli_query($mysqli, $stmt)
                                or die("The system could not register you"
                       . "".mysqli_error($mysqli) . "<br>" . $stmt);    

                if ($result){


                echo "sent";


                }

                //echo "<a href=\"gethotel.php?hid=".$row['hotel_id'].
                //<a href = ""></a>

                /* close statement */
                //$stmt->close();
                }

    }

 ?>

---

之所以向我们发出此问题，是因为您正在挂接
提交
按钮的
单击
事件，并且没有阻止事件完成

还要注意，用于生成查询字符串的选择器不正确，因为在
：
之前应该有一个空格，而在
：
和
输入之间应该没有空格，例如
$（“#注册表单：输入”）

要修复问题，请将钩子连接到
表单的
提交
事件
，并使用
preventDefault（）
。试试这个：

$("#register-form").submit(function(e) {
    e.preventDefault();
    if ($("fname").val().trim() == "" || $("lname").val().trim() == "") {
        $("div#ack").html("Please enter both your first name and your surname");
    } else {
        $.post(this.action, $(this).find(':input').serializeArray(), function(data) {
            $("div#ack").html(data);   
        });   
    }     
});

看一看PreventDefault将注册按钮类型从
submit
更改为
按钮
@ReaganGallant这是个坏主意。这意味着当用户点击相应字段上的“返回”按钮时，表单无法提交，并使屏幕阅读器无法访问表单。@Rorymcrossan对于屏幕阅读器，请添加属性role=“button”。他的表单是使用action方法而不是jquery发布的，因为他的按钮被设置为submit。@ReaganGallant更改了它，它工作得非常好。谢谢
$("#register-form").submit(function(e) {
    e.preventDefault();
    if ($("fname").val().trim() == "" || $("lname").val().trim() == "") {
        $("div#ack").html("Please enter both your first name and your surname");
    } else {
        $.post(this.action, $(this).find(':input').serializeArray(), function(data) {
            $("div#ack").html(data);   
        });   
    }     
});