在其他表单中提交一个特定的动态生成表单 - Submit a specific dynamically generated form amongst other forms

Submit a specific dynamically generated form amongst other forms

我有一个页面，在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函数可以指向的形式，只有其中的按钮已按下?

您只需要找到包含使用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关键字是更好的实践。

不要使用JavaScript处理那些浏览器比你处理得更好的任务!

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

现在，如果您想使用AJAX发送表单，不要监听点击事件，而要监听表单提交事件:

$(document).on('submit', 'form', function(event) {
    event.preventDefault();
    var theSubmittedForm = $(event.target);
    /* your AJAX code here */
})