Question

我有一张物品表。

每行的第一列包含一个复选框输入作为表单的一部分。用户可以单击这些复选框，然后单击“提交”以执行批量操作，例如删除项目。

我已经设置了（使用jquery）一种情况，即在单击行列中的“添加数据”链接时，会将一个不同的表单加载到第三列中，用户可以在该列中输入项目数据。

我当时想要做的是使用ajax提交第二个表单。为此，我使用以下代码：

$(document).on('submit',".add_form",function(event)
{

    event.preventDefault();

    var serial=$(this).serialize();

    var domain=$('[name=domain]').val();


       $.ajax({
     url:"portfolio/transactions/"+domain+"/",
     type:"post",
     data: {data:serial},
     success: function(dat){
$('#transactions_div').html(dat);
     }
   });




});

然而，这不起作用，我相信这是因为html不允许表单中的表单。我的假设是jQuery遵循这样的标准，并且当第二个表单被加载到包含在另一组标记中的div时会变得混乱。

鉴于此，我想做的就是不可能吗？

感谢

Answer 1

试试这个：

$(document).on('submit', ".add_form", function (event) {

    event.preventDefault();
    var serial = $(this).serializeArray();
    var domain = $('[name=domain]').val();

    $.ajax({
        url: "portfolio/transactions/" + domain + "/",
        type: "POST",
        data: serial,
        success: function (data) {
            $('#transactions_div').html(data);
        }
    });
});

Answer 2

HTML

<form class="add_form">
    <form class="secondForm">
        <input type="checkbox" />
    </form>
    <input name="domain" type="text" />
    <!-- Replace the submit-Button with a normal button -->        
    <input type="button" value="Send" id="send"/>
</form>

JS

$(document).on('click', "#send", function () {

    var serial = $(".add_form").serialize();
    var domain = $('[name=domain]').val();

    $.ajax({
        url: "portfolio/transactions/" + domain + "/",
        type: "post",
        data: serial, // serial instead of {data : serial}
        success: function (dat) {
            $('#transactions_div').html(dat);
        }
    });
});

jQuery on（“submit”）不绑定到用ajax加载的元素，因为它在另一个表单中

2 个答案: