填写第一个表单并单击提交按钮后显示“隐藏”表单答案

【问题标题】：Displaying a 'hidden' form once the first form is filled and submit button clicked填写第一个表单并单击提交按钮后显示“隐藏”表单
【发布时间】：2014-04-28 12:41:12
【问题描述】：

我有两个 html 表单，其中第二个表单设置为 'display: none;'因此在我加载页面时不显示（仅加载第一个表单）

这个想法是一旦第一个表单被填写并点击它的按钮，显示第二个表单，显示后将被填写并提交到“感谢页面”

这是页面加载后显示的第一个表单：

<form id = "form1" >
    <table class = "tbl">
    <tr>
    <td> Title * </td></tr> 
    <tr><td> <input type = "text" name = "title" class = "title" required> </td></tr>
    <tr>
    <td> First name * </td></tr> 
    <tr><td> <input type = "text" name = "fname" class = "fname" required> </td></tr>
    <tr><td>
    <button id = "btn" onClick="document.getElementById('form2').style.display='';"><img src = "images/Next.png" /></button></td></tr>  

    </table>
</form>

这是第二个表单，一旦第一个表单被成功填写并单击提交按钮（我已经使用“必需”属性验证了第一个表单），应该显示的第二个表单..

<form id = "form2" method = "post" action = "thankyou_page.php">
    <table class = "tbl2">
    <tr>
    <td> Email * </td></tr> 
    <tr><td> <input type = "text" name = "email" class = "email" required> </td></tr>
    <tr>
    <td> Telephone * </td></tr> 
    <tr><td> <input type = "text" name = "phone" class = "phone" required> </td></tr>
    <tr><td>   <button id = "btn1"><img src = "images/Get_decorating_quotes.png" /></button></td></tr>

然后我为我的样式使用了一个外部 css 文件。这就是我为“form2”所做的工作

#form2
{
    display: none;
}

加载我的页面后到目前为止我得到的是，一旦我点击第一个表单（'form1'）上的按钮，就会显示“form2”然后显示验证消息“请填写此字段”..我的愿望是首先让form1验证表单，一旦填写了所有字段，显示“form2”（使用传递给“btn”的onClick函数），同时在我填写并提交“form2”时表单中仍然有“form1”的内容'..

任何帮助将不胜感激。

【问题讨论】：

发布您的验证码。
我只是在我的文本字段中使用了“必需”
写一个函数来验证表单是否填写正确。然后在form1的提交上调用这个函数，如果正确验证显示form2
您希望两个表单一起提交还是第一个然后第二个？？
两者一起提交

标签： javascript html forms

【解决方案1】：

你需要做的是像这样调用一个验证函数：

<button id = "btn" onClick="return validate();">

如果验证失败，那么在你的函数中有一些你设置的布尔值：

function validate() {
    var isValid = true;
    var form1 = document.getElementById('form1');

    if (form1.title.value == '') {
        isValid = false;
    }

    if (form1.fname.value == '') {
        isValid = false;
    }

    if (isValid) {
        document.getElementById('form2').style.display='block';
        return false;
    }
}

Excample

【讨论】：

【解决方案2】：

使用 jQuery 试试这个。使用 onsubmit 事件并更改 form2 的可见性。

$("#form1").on("submit", function(){
    $("#form2").show();
});

或者使用 javaScript 并将 display 设置为 block

var form1 = document.getElementById("form1");

form1.onsubmit = function(){
    document.getElementById("form2").style.display = "block";
};

*注意：您必须维护部分表单提交才能使第二个表单可见，只有第一个表单应该发送到服务器，而不是整个页面。

【讨论】：