爲什麼這個ajax表單不工作？

Question

我想提交一個使用jQuery的表單，但由於某種原因我的表單不工作。當我提交除#loading之外的表單時，沒有任何反應出現。

控制檯顯示沒有數據正在發送。我試圖避免使用'序列化'發送表單。任何建議都會很棒。非常感謝。

$(document).ready(function() { 
    $("#loading").hide(); 

    $("#submit_details").on("click", function(e) { 
     $("#loading").show(); 
     e.preventDefault(); 

     var user_name = $("#user_name").val(); 
     var details = $("#details").val(); 
     var user_id = $("#user_id").val(); 
     var title = $("#title").val(); 

     $.post('process_details.php', { 
      title: title, 
      user_name: user_name, 
      details: details, 
      user_id: user_id 
     }, function(data) { 
      $("#loading").hide(); 
      $("#message").html(data); 
      $("#message").fadeIn(500); 
     }); 
     return false; 
    }); 
}); 

<form action="process_details.php" method="post" enctype="multipart/form-data" id="details_form"> 
    <input id="title" name="title" type="text" placeholder="Title" class="form-control" value="" required=""> 
    <input id="detail" name="detail" type="text" class="form-control" placeholder="More info" value=""> 
    <input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_session'];?>"> 
    <input type="hidden" id="user_name" name="user_name" value="<?php echo $_SESSION['user_name'];?>"> 

    <button type="submit" class="btn btn-primary pull-right" name="btn_submit_details" id="submit_details"> 
     Submit 
    </button> 
    <span class="pull-right"> 
     <i class="fa fa-spinner fa-spin fa-3x fa-fw" id="loading"></i> 
    </span> 

Answer 1

嘗試這種

1）按鈕類型= '按鈕'，以防止默認表單提交。

2）</form>結束標記丟失。 3）隱藏ajax成功後的加載。

4）改變id的值是沒有詳細的細節var details = $("#detail").val();

5）你有迴音或返回從process_details.php頁中的任何HTML內容，阿賈克斯成功或回報。

<form action="process_details.php" method="post" enctype="multipart/form-data" id="details_form"> 
<input id="title" name="title" type="text" placeholder="Title" class="form-control" value="" required=""> 
<input id="detail" name="detail" type="text" class="form-control" placeholder="More info" value=""> 
<input type="hidden" id="user_id" name="user_id" value="<?php echo $_SESSION['user_session'];?>"> 
<input type="hidden" id="user_name" name="user_name" value="<?php echo $_SESSION['user_name'];?>"> 

<button type="button" class="btn btn-primary pull-right" name="btn_submit_details" id="submit_details"> 
    Submit 
</button> 
<span class="pull-right"> 
    <i class="fa fa-spinner fa-spin fa-3x fa-fw" id="loading"></i> 
</span> 

<script> 

$(document).ready(function() { 

$("#loading").hide(); 

$("#submit_details").on("click", function(e) { 

    e.preventDefault(); 

    $("#loading").show(); 

    var user_name = $("#user_name").val(); 
    var details = $("#detail").val(); 
    var user_id = $("#user_id").val(); 
    var title = $("#title").val(); 

    $.post('process_details.php', { 
     title: title, 
     username: username, 
     details: details 
     user_id: user_id 
    }, function(data) { 

     alert(data); 
     $("#message").html(data); 
     $("#message").fadeIn(500); 
     $("#loading").hide(); //hide the loading after ajax success 
    }); 
    return false; 
}); 
}); 

    </script>