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

Question

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

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

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) {表单提交不需要这个链接。并在FormDatavar 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>