Форма Html отказывается быть отправлена ​​через JQuery

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 событием 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); 
     }); 
    }  
}); 

Answer 2

Ваша форма будет размещена с помощью метода действия, а не 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>