如何一次提交两个表格

Question

我的页面上有两种形式，一种用于用户名和密码，一种用于特殊的验证码。 在我的第一个表单上，我将操作设置为返回false，否则页面将刷新并阻止我的隐藏div与第二个表单（即一个隐藏的div）一起显示。 我有一个登录按钮，它会在单击时取消隐藏隐藏的div，还有一个提交按钮，用户在输入图钉后会按一下。 我遇到的问题是我希望最终的提交按钮可以同时提交这两种形式。 这可能吗？

这是我的登录页面的外观 ，提交后显示隐藏的div，该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>&nbsp;<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个输入吗？如果可以，我将如何去做？

UPDATE

我现在只有一个表单，但是有两个按钮，一个提交，一个显示隐藏的div，但是这些表单似乎没有提交。

这是我当前拥有的表单-我需要让它的第一个按钮只是显示隐藏的div，它正在执行此操作，但是我想提交用户名，密码和PIN的Submit按钮似乎不起作用，我应该在表格中添加些什么？

<!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>&nbsp;<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 &quot;Logout&quot; 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>

Answer 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.
});

Answer 2

您在这里采用了错误的方法。

要在某处实际提交数据时，仅应使用submit按钮和submit事件。

您只需要一种表单和一个提交按钮。

您的第一个按钮应该只是显示表单其余部分的常规按钮。 然后，没有任何要取消的事件。 然后，您的第二个按钮提交表单。

另外，您不应该使用内联HTML事件属性（ onsubmit等）， 这就是原因 ，您应该远离内联样式并设置CSS样式规则。

Answer 3

您好，您可以做的是提交按钮并发送所有信息。 示例：-表单1和表单2字段具有差异ID，因此您可以将该ID获取到var或data中并将其发送。 这样，您可以提交所需的表单并进行验证，但是只能有1个提交最终的表单。 您将所有数据获取到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.
});

我希望这可以帮助你

Answer 4

好的，所以您想发送例如2个表格，您只需拥有1个PHP即可接收。

<?php
 $form1_id = $_POST['id'];
 $form2_id = $_POST['id2'];
?>

好的，所以您有2个输入，它们的名称分别为id和id2（分隔形式）

现在，您必须使用html并添加这2种形式：

<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

}）;

希望它对您有帮助