Html表单拒绝通过JQuery提交

-1

因此，我正在关注一个注册脚本的AJAX/JQuery教程，该教程将由PHP/MySQL执行，并将通过JQuery提交。Html表单拒绝通过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(); 
       } 

    } 

?>

来源

2016-08-15 user1867071

看一看的preventDefault – RST

从'submit'您的注册按钮类型更改为'button' –

@ReaganGallant这是一个坏主意。这意味着当用户在适当的字段上返回时不能提交表单，并且使屏幕阅读器的表单不易访问。 –

问题我们因为您正在接触submit按钮的click事件，并且不会阻止事件完成。

另外请注意，您的选择建立查询字符串是不正确，因为应该有:前的空间，而不是:和input之间，如$("#register-form :input")

要解决该问题挂钩的submit事件form并使用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); 
     }); 
    }  
});

来源

2016-08-15 08:55:48

感谢您的答案，但它不起作用 – user1867071

你的形式被使用操作方法，而不是jQuery的，因为按钮被设置为submit公布。改为将您的按钮类型更改为button。

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

来源

2016-08-15 12:00:20

Html表单拒绝通过JQuery提交

回答

相关问题