如何处理所有动态创建的表单的提交

时间:2017-12-31 22:40:25

标签: javascript jquery html forms

<tr>
    <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post">
    <td><input name="yyy" value="FormAValue" type="hidden">TestA</td>
    <td><input name="before_year" class="form-control" placeholder="Before year"/></td>
    <td><button type="submit" class="btn btn-primary btn-mid">Submit</button></td>
    </form>
</tr>
<tr>
    <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post">
    <td><input name="yyy" value="FormbValue" type="hidden">TestB</td>
    <td><input name="before_year" class="form-control" placeholder="Before year"/></td>
    <td><button type="submit" class="btn btn-primary btn-mid">Submit</button></td>
    </form>
</tr>

使用Javascript:

<script type="text/javascript">
var frm = $('.manualImportSubmit');
frm.submit(function (e) {
    e.preventDefault();
    console.log(frm.serialize());
    // $.ajax({
    //     type: frm.attr('method'),
    //     url: frm.attr('action'),
    //     data: frm.serialize(),
    //     success: function (data) {
    //         console.log('Submission was successful.');
    //     },
    //     error: function (data) {
    //         console.log('An error occurred.');
    //     }
    // });
});
</script>

因此,我将在表格中动态创建表单(每行都是它自己的表单)。我遇到的问题是在javascript中创建一个函数来处理所有这些。以上是我的尝试,但是这会将所有提交按钮链接到表格数据中的最终表格。我知道我可以为每一行动态创建一个javascript处理程序,但我真的不想这样做。反正有没有完成我想要做的事情而不动态地创建每行的javascript?

进一步补充一点,提交对所有人来说都是一样的(我发布的确切javascript)

1 个答案:

答案 0 :(得分:0)

您需要每个关键字。试试这个?它为我提供了两个小提琴。

frm.each(function() {

    this.submit(function (e) {
        e.preventDefault();
        console.log(frm.serialize());
    });

});