Question

所以我正在关注一个注册脚本的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>

的script.js

$("button#btn-submit").click(function()
{  /* validation */

   /* form submit */

       if ($("fname").val()=="" || $("lname").val()=="" )
       $("div#ack").html("Please enter both your first name and your surname");

       else
           $.post($("#register-form").attr("action"),
                    $("#register-form:  input").serializeArray(),
                    function(data){
                     $("div#ack").html(data);   
                    });

           $("#register-form").submit(function(){
               return false;
           })         
   /* form submit */

});

最后，这是动作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();
                }

    }

 ?>

Answer 1

问题是因为您正在联系click按钮的submit事件并且不会阻止事件完成。

另请注意，构建查询字符串的选择器不正确，因为:之前应该有一个空格，:和input之间不应该有空格，例如$("#register-form :input")

要解决问题挂钩submit的{{1}}事件并使用form。试试这个：

preventDefault()

Html表单拒绝通过JQuery提交

1 个答案: