Question

我正在尝试构建一个网页，您可以在其中搜索数据库中的特定媒体。您有多个复选框来过滤数据。后端查询工作正常。

问题是没有一个复选框会通过Ajax提交表单。显示警报（＆＃34;测试＆＃34;）。如果我通过提交按钮手动提交表单，则会提交表单并显示数据。

HTML：

<form id = "extended_search_form" method = "post" action = "extended_search.cfm">
    <div id = "datatype_filter">
        <ul class = "selectbox">
            <li id = "datatype_filter_select">
                Bitte einen Dateityp wählen             
                <ul class = "checkboxes">
                <!--- checkboxes getting loaded on datatype_filter click --->
                <!--- example checkbox --->
                   <li>
                      <label><input name="datatype_filter_checkboxes" value="1" type="checkbox"> Fotograph</label>
                   </li>
                </ul>
            </li>
        </ul>
    </div>
    <input type = "submit" value = "Submit">
</form>

使用Javascript：

$("#datatype_filter").on("change","input[name=datatype_filter_checkboxes]", function() {
    alert("test");
    $("#extended_search_form").unbind("submit").submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        console.log(formData);
        $.ajax({
            url: "test.cfc?method=testSearch",
            type: "post",
            dataType: "json",
            data: formData,
            contentType: false,
            processData: false,
            error: function(event,jqhxr,ajaxSettings,error) {
                console.log(error);
            }
        }).done(function(result) {
            alert("Success");
        });
    });
});

我缺少什么，表格不会在复选框更改事件中提交？

Answer 1

从submit事件处理程序移动change事件处理程序，并定义文档就绪处理程序。

您需要submit()复选框更改事件处理程序中的父窗体。

$("#datatype_filter").on("change", "input[name=datatype_filter_checkboxes]", function () {
    $(this).closest('form').submit(); //Target parent form and submit it
});

$("#extended_search_form").off("submit").on('submit', function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    console.log(formData);
    $.ajax({
        url: "test.cfc?method=testSearch",
        type: "post",
        dataType: "json",
        data: formData,
        contentType: false,
        processData: false,
        error: function (event, jqhxr, ajaxSettings, error) {
            console.log(error);
        }
    }).done(function (result) {
        alert("Success");
    });
});

Answer 2

删除此行代码$("#extended_search_form").unbind("submit").submit(function(e) {表单提交不需要此链接。并在FormData var formData = new FormData($("#extended_search_form")[0]);

中添加表单的ID

$("#datatype_filter").on("change","input[name=datatype_filter_checkboxes]", function() {
        e.preventDefault();
        var formData = new FormData($("#extended_search_form")[0]);
        console.log(formData);
        $.ajax({
            url: "test.cfc?method=testSearch",
            type: "post",
            dataType: "json",
            data: formData,
            contentType: false,
            processData: false,
            error: function(event,jqhxr,ajaxSettings,error) {
                console.log(error);
            }
        }).done(function(result) {
            alert("Success");
        });
});

Answer 3

如果单击一个复选框，您将submit event绑定到表单但不提交。我相信如果您将$("#extended_search_form").submit()添加到代码的末尾（参见下面的示例）

，您的代码就会有效

$("#datatype_filter").on("change","input[name=datatype_filter_checkboxes]", function() {
    alert("test");
    $("#extended_search_form").unbind("submit").submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);
        console.log(formData);
        $.ajax({
            url: "test.cfc?method=testSearch",
            type: "post",
            dataType: "json",
            data: formData,
            contentType: false,
            processData: false,
            error: function(event,jqhxr,ajaxSettings,error) {
                console.log(error);
            }
        }).done(function(result) {
            alert("Success");
        });
    });
    $("#extended_search_form").submit();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "extended_search_form" method = "post" action = "extended_search.cfm">
    <div id = "datatype_filter">
        <ul class = "selectbox">
            <li id = "datatype_filter_select">
                Bitte einen Dateityp wählen
            </li>
            <ul class = "checkboxes">
                <!--- checkboxes getting loaded on datatype_filter click --->
                <!--- example checkbox --->
                <label><input name="datatype_filter_checkboxes" value="1" type="checkbox"> Fotograph</label>
            </ul>
        </ul>
    </div>
    <input type = "submit" value = "Submit">
</form>

复选框更改不会通过AJAX提交表单

3 个答案: