Question

我有一个页面可以生成许多表单 - 解析后的HTML格式如下：

<form action="" method="post" name="form">
    <input name="varenummer" type="hidden" value="1234"> 
    <input class="form-control-inline" name="antal" size="1" type="text" value="5"><br>
    <button class="btn btn-primary btn-sm myFavoriteClass" id="updateantal-1234" type="button">Opdater</button>
</form>

<form action="" method="post" name="form">
    <input name="varenummer" type="hidden" value="5678"> 
    <input class="form-control-inline" name="antal" size="1" type="text" value="13"><br>
    <button class="btn btn-primary btn-sm myFavoriteClass" id="updateantal-5678" type="button">Opdater</button>
</form>

我想要的是javascript只提交按下按钮的表单。

这是javascript：

$(document).ready(function() {
    $(document).on("click", ".myFavoriteClass", function() {
        function a() {
            $.ajax({
                url: "/pages/s_updateantal.php",
                type: "POST",
                dataType: "html",
                async: !0,
                cache: !1,
                data: t,
                success: function(a) {
                    $("#result").html(a), $("#updateantal").attr("disabled", !1)
                }
            })
        }
        var t = $("form").serialize();
        $(".bs-example-modal-sm").modal("show"),
            $("#updateantal").attr("disabled", !0), 
            setTimeout(a, 1e3)
    })
});

不幸的是我不是javascript的专家 - 当解析/pages/s_updateantal.php文件时，我可以看到，无论我按哪个按钮，它都是提交的最后一个表单。我试图用具有唯一ID的按钮命名，但它仍然只是“提交”最后一个表单。

是否有一种方法可以让OnClick功能只指向按下内部按钮的表单？

提前致谢。

Answer 1

您只需找到包含使用closest()引发事件的按钮的表单。试试这个：

$(document).on("click", ".myFavoriteClass", function() {
    function a() {
        $.ajax({
            url: "/pages/s_updateantal.php",
            type: "POST",
            dataType: "html",
            async: !0,
            cache: !1,
            data: t,
            success: function(a) {
                $("#result").html(a), $("#updateantal").attr("disabled", !1)
            }
        })
    }
    var t = $(this).c.losest('form').serialize(); // <- closest() here
    $(".bs-example-modal-sm").modal("show"); 
    $("#updateantal").attr("disabled", !0);
    setTimeout(a, 1e3)
})

您使用!0和!1有点奇怪 - 使用true和false关键字是一种更好的做法。

Answer 2

不要将JavaScript用于浏览器可以比你更好地处理的任务！

如果您在每个表单中使用<button type="submit">，它将准确提交其所属的表单。

现在，如果您想使用AJAX发送表单，请不要收听点击事件，而是收听表单submit-event：

$(document).on('submit', 'form', function(event) {
    event.preventDefault();

    var theSubmittedForm = $(event.target);

    /* your AJAX code here */
})

在其他表单中提交特定的动态生成表单

2 个答案: