提交表单后如何显示隐藏的表单？答案

【问题标题】：How to display a hidden form after submitting a form?提交表单后如何显示隐藏的表单？
【发布时间】：2017-08-30 10:15:11
【问题描述】：

我的 HTML 代码中目前有两个表单。其中一个表单（id="feedback"）被分配了 style="display:none"，这将隐藏表单。另一种形式（id="search"），要求用户输入。如果文本输入为空，提醒用户输入；否则我希望表单提交然后显示反馈表单，该表单从一开始就隐藏。

我遇到的问题是，当提交通过时，反馈表只显示一瞬间，而不是停留在页面上。

这是我在 JsBin 中的代码；当您在实时预览中呈现它时，这显示了我的确切问题：

JsBin

function validateForm()
{
    var x = document.getElementById("input").value;
    if (x == "")
    {
        alert ("Please enter valid ID number");
        return false;
    }
    document.getElementById("feedback").style.display = "block";
}

<form id = "search" onsubmit = "return validateForm();">
    <h3> ID Number: </h3>
    <input type = "text" name = "idno" id = "input">
    <input type = "submit" value = "Submit">
</form>

<form id = "feedback" style = "display:none">
    <h1> Leave a Feedback! </h1>
    <h3> Found? </h3>
    <input type = "radio" name = "found" value = "yes" checked> Yes <br>
    <input type = "radio" name = "found" value = "no"> No <br>
    <input type = "submit" value = "Submit">
</form>

谁能告诉我我的代码有什么问题以及如何实现我想要的结果？

【问题讨论】：

标签： javascript html forms validation display

【解决方案1】：

表单提交指示浏览器发送带有编码在 URL 中的数据的 GET 请求，然后显示生成的 HTML。这就是为什么隐藏的表格只是短暂显示的原因。

您可以使隐藏的表单 HTML 从服务器返回或更改您的表单以使用 AJAX。

【讨论】：

【解决方案2】：

在函数 validateForm() 结束时返回 false

【讨论】：