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提交

回答

相關問題