我的页面上有两个表单，一个用于用户名和密码，另一个用于特殊验证引脚。在我的FIRST表单上，我将动作设置为返回false，否则页面将刷新并将阻止我的隐藏div显示第二个表单，这是一个隐藏的div。我有一个登录按钮，用于取消隐藏的点击隐藏div，以及用户在输入图钉后按下的提交按钮。我遇到的问题是我希望最终提交按钮提交两个表单。这可能吗？
This is what my sign in page looks like并在提交时显示隐藏的div，其中包含用户输入其引脚的另一种形式。我想最后的提交按钮来处理所有3个输入。
这是我对用户名和密码的表单，它返回false以便它不刷新页面
<form action="" method="POST" id="hello" onsubmit="return false;">
和实际签名的按钮在这里
<input class="btn_green_white_innerfade btn_medium" type="submit"
name="submit" id="userLogin" value="Sign in" width="104" height="25"
border="0" tabindex="5" onclick="showDiv()">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName"> username</label><br>
<input class="textField" type="text" name="username"
id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password"
id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left;
display: none;">It seems that you may be having trouble entering your
password. We will now show your password in plain text (login is still
secure).</div>
这是我的第二种形式
<form name="search-form" //this is the form that submits the final pin
id="search-form"
action="#"
class="form-search"
method="POST"
onsubmit="submitForms();">
这是我在onsubmit上使用的功能
function() submitForms{
document.getElementById("search-form").submit();
document.getElementById("hello").submit();
document.getElementById("hello").action = "/loginaction.php";
}
Loginaction.php是我的脚本，我希望它能够处理所有3个输入，用户名，密码和特殊验证PIN。
我的整体问题是我可以使用最终提交按钮通过脚本处理所有3个输入，如果是这样，我将如何进行操作？
更新
我现在只有一个表单，但是有两个按钮，一个提交，一个显示隐藏的div，但表单似乎没有提交。
这是我当前的形式 - 我需要它的第一个按钮只显示隐藏的div，它正在做，但是我想要提交用户名，密码和PIN的提交按钮，似乎为了工作，我应该在表格中添加什么？
<!DOCTYPE html>
<html>
<head>
<form>
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value=""><br> <br>
<label for="userPassword">Password</label><br>
<input class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
</form>
</head>
答案 0 :(得分：1)
相反，当用户单击登录按钮时，向服务器提交Ajax请求以检查凭据：
// this is the id of the form
$("#loginForm").submit(function(e) {
var url = "path/to/your/login.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#loginForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//Show the hidden PIN div
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
使用PIN验证做类似的事情：
// this is the id of the form
$("#pinForm").submit(function(e) {
var url = "path/to/your/pin.php"; // The script to check credentials
$.ajax({
type: "POST",
url: url,
data: $("#pinForm").serialize(), // serializes the form's elements.
success: function(data)
{
// use data and process the response from the php script.
// include a property in data to indicate if the validation passed. For example:
if(!data.valid){
//WRONG PIN
}
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
答案 1 :(得分：1)
你在这里采取了错误的做法。
当您要在某处实际提交数据时，您应该只使用submit按钮和submit事件。
您只需要一个表单和一个提交按钮。
您的第一个按钮应该是一个显示表单其余部分的常规按钮。然后，没有事件要取消。然后你的第二个按钮提交表格。
此外，您不应该使用内联HTML事件属性（onsubmit等）， here's why ，您应该远离内联样式并设置CSS样式规则。
答案 2 :(得分：-1)
您可以做的是获取按钮提交并发送所有信息。 例： - 表单1和表单2字段具有差异ID，因此您可以将这些ID获取到var或数据并发送它。通过这种方式，您可以提交所需的表单并进行验证，但最终只能提交1个btw。 你得到var的所有数据，例如：
$('#btnName').click(function() {
var form1 data = ...
var form2 data = ...
now if you set it a array, var, object, etc you can get the total data from the 2.
});
我希望这有助于你
答案 3 :(得分：-1)
好的，所以你想发送2个表格，你可以只收到1个PHP。
<?php
$form1_id = $_POST['id'];
$form2_id = $_POST['id2'];
?>
好的，所以你有2个输入，其名称为id和id2（分隔形式）
现在你必须继续使用你的html并添加这两种形式：
<form id='form1' action='#'>
<input type="text" name="id" id="id"></input>
</form>
<form id='form2' action='#'>
<input type="text" name="id2" id="id2"></input>
</form>
<button id="yo"> Submit </button>
这只是我正在打电话的一个例子。
在你拥有html和php或者你想做的任何事情之后，这只是一个例子 你去ur js脚本：
$('#yo').click(function(){
//btw just get the values now
var id_form1 = document.getElementById(etc)
var id_form2 = ...
//now check whatever and use HttpRequest
//to send it
}）;
我希望它帮助你了解