用一个按钮提交两个表格

Ale*_*ani 47 html javascript forms

我有HTML两种形式,一种是在进入使用PHP数据库提交的数据,其他的将用户定向到贝宝付款页面,我的问题是,用户必须提交两种形式这当然我不想让它们来得做.反正有两个表单使用一个提交按钮吗?

(欢迎使用Javascript)

Jam*_*son 38

您应该可以使用JavaScript执行此操作:

<input type="button" value="Click Me!" onclick="submitForms()" />
Run Code Online (Sandbox Code Playgroud)

如果您的表单有ID:

submitForms = function(){
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}
Run Code Online (Sandbox Code Playgroud)

如果您的表单没有ID但有名称:

submitForms = function(){
    document.forms["form1"].submit();
    document.forms["form2"].submit();
}
Run Code Online (Sandbox Code Playgroud)

  • 这是完全错误的(至少Chrome和IE9)!请参阅下面的答案. (14认同)

gil*_*ly3 34

表单提交会导致页面导航到表单的页面action.因此,您无法以传统方式提交两种表单.如果您尝试通过form.submit()连续调用每个表单来使用JavaScript,那么除了上次提交之外,每个请求都将被中止.因此,您需要通过JavaScript异步提交第一个表单:

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(f.elements[i].name + "=" + f.elements[i].value);
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "mypage.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(postData.join("&"));

document.forms.payPal.submit();
Run Code Online (Sandbox Code Playgroud)


Rob*_*obG 10

您可以使用AJAX提交第一个表单,否则提交一个表单将阻止另一个表单的提交.


Jon*_*röm 9

在Chrome和IE9中(我也猜测所有其他浏览器)只有后者才会生成套接字连接,第一个将被丢弃.(浏览器检测到这一点,因为两个请求都在上面的代码中的一个JavaScript"时间片"内发送,并丢弃除最后一个请求之外的所有请求.)

如果你有一些事件回调做第二次提交(但在收到回复之前),第一个请求的套接字将被取消.这绝对不值得推荐,因为在这种情况下服务器可能已经处理了您的第一个请求,但您永远不会确切知道.

我建议你使用/生成一个可以在服务器端进行交易的请求.


Kam*_*her 6

目前选择的最佳答案太模糊,不可靠.

这对我来说是一种相当安全的方式:

(Javascript:用jQuery写它更简单)

$('#form1').submit(doubleSubmit);

function doubleSubmit(e1) {
    e1.preventDefault();
    e1.stopPropagation();
    var post_form1 = $.post($(this).action, $(this).serialize());

    post_form1.done(function(result) {
            // would be nice to show some feedback about the first result here
            $('#form2').submit();
        });
};
Run Code Online (Sandbox Code Playgroud)

发布第一个表单而不更改页面,等待该过程完成.然后发布第二个表格.第二篇文章将更改页面,但您可能希望为第二个表单创建一些类似的代码,获取第二个延迟对象(post_form2?).

不过,我没有测试代码.