2014-01-17 213 views
7

在我的html中,我有多种形式(文本输入,单选按钮,复选框和选择)和一个​​按钮。我想填写所有这些表单并将值发送到我的php文件。现在我正在尝试从文本输入中提交值并选择,但我坚持在这一点上。javascript用一个按钮提交多个表单

我有一个js提交文件:

submitForms = function(){ 
    document.getElementById("form1").submit(); 
    document.getElementById("form2").submit(); 
} 

我的形式是这样的: 选择:

<form id ="form1" name="dists" action="solve.php" method="post"> 
     <select id="demo" name="sadzba" onchange="selectElement1(this.value)> 
       <option value="">-- vyberte oblasť --</option> 
     </select> 
    </form> 

文字输入表单+按钮:

<form id="form2" action="solve.php" method="post"> 
    <input type="text" name="spotVT" ><label>kWh za rok VT</label> 
    <div id="nt" style='display:none'><input type="text" name="spotNT" ><label>kWh za rok NT</label></div> 

    </form> 
<input id="sub" type="button" value="Ok" style="margin-left:15px;" onclick="submitForms()"/> 

但这不管用。你能帮我吗?谢谢

+0

你会如何提交两件事情两个不同的网页?它需要两次点击到服务器,但它是一个页面。不会以简单的形式提交。 – epascarello

+0

可能重复的[用一个按钮提交两个表单](http://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button) – Liam

回答

2

这个问题已经被问几个已经,请参阅以下两个环节:

Submit two forms with one button

Submit multiple forms with one submit button

基本上,它看起来像你将需要以异步方式做到这一点。

+0

正如你所看到的,我已经尝试了第一个解决方案,但是它不工作。我很新的jQuery,JavaScript和PHP,所以它现在对我来说很难。 – user2886091

+0

对不起,我应该更清楚。在两者中,您都会看到许多评论/回答,讨论第一次提交可能会如何下降。从一个答案“表单提交导致页面导航到表单的动作,因此,你不能以传统的方式提交这两个表单如果你试图通过在每个表单上调用form.submit()来实现这一点,除了最后一次提交之外,每个请求都会被中止,所以你需要通过JavaScript异步地提交第一个表单“。第一篇文章(靠近底部)的另一个建议是发送一次。 – t1nr2y

1

只提交一个表单会比较容易。您可以通过指定form =“your-form-id”来为选择和输入标签赋予相同的表单名称。

1

下面是一个本地Javascript实现的简单示例。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Multiform - JAVASCRIPT</title> 
</head> 
<body> 

<fieldset> 
    <legend>Form 1</legend> 
    <form name="f1" id="f1" onsubmit="return validate(this)"> 
     <input type="text" name="username" placeholder="Username" /> 
    </form> 
</fieldset> 

<fieldset> 
    <legend>Form 2</legend> 
    <form name="f2" id="f2" onsubmit="return validate(this)"> 
     <input type="text" name="email" placeholder="Email" /> 
    </form> 
</fieldset> 

<fieldset> 
    <legend>Form 3</legend> 
    <form name="f3" id="f3" onsubmit="return validate(this)"> 
     <input type="text" name="password" placeholder="Password" /> 
    </form> 
</fieldset> 

<button onclick="submitAll();">SUBMIT ALL</button> 

<script> 
'use strict'; 

function validate(form){ 
    //forms processsing goes here... 
    console.log(form, form.name) 
    return false; 
} 

function submitAll(){ 
    for(var i=0, n=document.forms.length; i<n; i++){ 
     document.forms[i].onsubmit(); 
    } 

} 

</script> 

</body> 
</html> 
+0

使用'.submit();'not'.onsubmit();' –

0

你可以试试这个。如果提交各种形式为您的网页是好的

$('form').submit(); 

功能这在实际使用中:

function trySubmitAllForms() { 
    if ($('.saveSpinner').is(':visible')) { 
     return; 
    } 
    if ($('form').valid()) { 
     $('.saveSpinner').show(); 
     $('form').submit(); 
    } else { 
     showValidationErrorMessages(); 
    } 
} 
相关问题