Question

我正在尝试使用jquery提交表单，但由于某种原因，我的表单无效。除了出现#loading之外，我提交表单时没有任何反应。

控制台显示没有数据被发送。我试图避免使用＆＃39;序列化＆＃39;发送表格。任何建议都会很棒。非常感谢。

$(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）按钮类型=＆＃39;按钮＆＃39;防止默认表单提交。

2）</form>结束标记缺失。

3）ajax成功后隐藏加载。

4）更改id值是详细信息而不是详细信息var details = $("#detail").val();

5）你必须回复或返回process_details.php页面中的任何html内容，以获得ajax成功或返回。

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

为什么这个ajax形式不起作用？

1 个答案: