Question

我有两个html表单，其中第二个表单已设置为'display：none;'因此，当我加载页面时（仅加载第一个表单）

时不显示

这个想法是在填写第一个表单并点击其按钮后，显示第二个表单，显示后将填写并提交到'thankyou页'

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

<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>

，这是第一个成功填写第一个表单并单击提交按钮后显示的表单（我已经使用'required'属性验证了第一个表单）..

<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验证表单，一旦填写了ALL字段，显示'form2'（使用onClick函数传递给'btn'），同时在表单中仍然有'form1'的内容，因为我填写并提交'form2 ” ..

任何帮助将不胜感激。

Answer 1

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

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

或使用javaScript并将显示设置为阻止

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

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

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

Answer 2

您需要做的是调用验证函数，如下所示：

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

然后在你的函数中有一些你在验证失败时设置的bool：

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 个答案: