在jQuery中發佈表格

Question

我嘗試通過jQuery發佈我的表單。這是我第一次。 :)

我的HTML和JS看起來不錯，我的JS代碼給我一個錯誤。

你能幫我嗎？

-

我的HTML代碼：

 <form id="createAccount" action="login.php" method="post" class="default-form"> 
     <p class="alert-message warning"><i class="ico fa fa-exclamation-circle"></i> All fields are required! <i class="fa fa-times close"></i></p> 
      <input class="required" type="text" id="Username" placeholder="Username"> 
      <input class="required email" type="text" id="Email" placeholder="Email"> 
      <input class="required" type="password" id="Password" placeholder="Password"> 
      <input class="required" type="password" placeholder="Repeat Password"> 
      <button type="submit" class="submit-btn button"><i class="fa fa-plus-circle"></i> Register</button> 
     </form> 

我的JS：

<script> 
$(document).ready(function() { 
    $('#createAccount').on('submit', function() { 

     var Username = $('#Username').val(); 
     var Email = $('#Email').val(); 
     var Password = $('#Password').val(); 

     if(Username == '' || Email == '' || Password == '') { 
       alert('Fields are empty.'); 
     } else { 
      $.ajax({ 
       url: $(this).attr('action'), 
       type: $(this).attr('method'), 
       data: $(this).serialize(), 
       dataType: 'json', 
       success: function(json) { 
         if(json.reponse == 'ok') { 
           alert('All is good'); 
         } else { 
           alert('Error : '+ json.reponse); 
         } 
       } 
      }); 
     } 
     return false; 
    }); 
}); 
</script> 

我的PHP（login.php中）：

<?php 
if(isset($_POST['Username']) && isset($_POST['Email']) && isset($_POST['Password'])) { 
    if(($_POST['Username'] != '') && ($_POST['Email'] != '') && ($_POST['Password'] != '')) { 
     $reponse = 'ok'; 
    } else { 
     $reponse = 'Fields are empty.'; 
    } 
} else { 
    $reponse = 'Error'; 
} 

$array['reponse'] = $reponse; 
echo json_encode($array); 
?> 

當我嘗試發送它的形式，我的警報呼應「錯誤」。

Answer 1

jQuery的serialize方法，當在form元素上調用時，將使用字段的name屬性，而不是id s。如果您喜歡，您可以包含ID屬性，但您也需要名稱：

<form id="createAccount" action="login.php" method="post" class="default-form"> 
    <p class="alert-message warning"><i class="ico fa fa-exclamation-circle"></i> All fields are required! <i class="fa fa-times close"></i></p> 
    <input class="required" type="text" id="Username" name="Username" placeholder="Username"> 
    <input class="required email" type="text" id="Email" name="Email" placeholder="Email"> 
    <input class="required" type="password" id="Password" name="Password" placeholder="Password"> 
    <input class="required" type="password" name="Repeat-Password" placeholder="Repeat Password"> 
    <button type="submit" class="submit-btn button"><i class="fa fa-plus-circle"></i> Register</button> 
</form>