Question

我有两种形式。一个是模态弹出窗口，一个位于页面下方。我想使用此代码同时提交它们：

$('.window .submitlink').click(function (e) {
    $('#form2').submit();                            
    $('#form1').submit();
});

但是存在一个问题，那就是：它不会在form2的操作中处理页面，而只是处理form1中的操作。

顺便说一句，我在wordpress中这样做。有什么想法吗？

Answer 1

您需要使用每个表单中的内容动态创建帖子。首先，您需要参数化表单，然后通过$ .post或$ .ajax

发布该数据

例如： var data = {};

$('#form1 input').each(function () {
    data[$(this).attr('name')] = $(this).val();
}

$('#form2 input').each(function () {
    data[$(this).attr('name')] = $(this).val();
}
$.post('mytarget/address/topost/to', data);

这假设您要发布到同一个地方。如果没有，你将不得不使用单独的$ .post语句。

Answer 2

HTML表单的默认行为（使用.submit()触发的内容是在完成初始操作后立即执行表单的操作。要覆盖它，您必须采取措施使其工作为你期待它，一个接一个地提交。

您当前流程面临的挑战是，如果提交失败，您不会允许任何反馈。提交中没有指示允许视图通知用户存在问题，也没有任何指示可以防止第二个在第一个失败时盲目提交。

有两种方法可以尝试实现这一目标：

合并表格。也许这违背了您的代码设计，但是
Nest Ajax提交。这允许您获得视图的动态“反馈”，并根据第一次提交的成功开始/停止第二次提交，没有默认操作覆盖数字2。

一些注意事项：

如果您使用表单内的按钮，它将默认提交表单，除非您执行“覆盖默认”
如果您使用ajax路线，请在表单上使用.serialize()获取值，而无需通过ID指定ID

同时提交模态弹出表单和另一个表单

2 个答案: