javascript - 2 个表单 1 个提交按钮

Question

我尝试使用一个提交按钮提交 2 个表单，但它不起作用，我只得到第二个表单，请帮助我这是 jQuery 代码:

$('#BTN1').click(function() {
   $('#form1').submit();
   $('#form2').submit();
});

Answer 1

正如其他答案中所述，一旦浏览器成功提交表单，加载新页面时页面上发生的任何其他事情都会丢失。因此，一旦 form1 提交，脚本中此后发生的所有内容都会丢失。

有几种不同的方法可以解决这个问题。由于您的标签表明您正在使用 jQuery，因此您可以轻松地使用 ajax 来发布表单，等到它们都完成后，然后切换到您想要的任何新网址。

$('#BTN1').click(function() {
   var form1done = false;
   var form2done = false;
   $.post( $('#form1').attr('action'), $('#form1').serialize())
       .done(function(r) { 
           form1done = true;
           if(form2done)
              location.assign('/target/location');
       }).fail(function() {
           // handle error
       });
   $.post(  $('#form2').attr('action'),  $('#form2').serialize())
       .done(function(r) {
            form2done = true;
            if(form1done)
                location.assign('/target/location');
       }).fail(function() {
            // handle error
       });
});

查看 $.post 的文档和 .serialize了解更多信息。

也就是说，这仍然是一种笨拙的页面运行方式。您最好要么重构为单个表单，要么使用完整的 ajax 并仅在同一页面中处理表单提交的结果。

最后一个选项是更改表单的 target 属性，以便它们在新窗口中打开。这将使他们俩都完成提交。