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

Question

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

有人可以让我知道我的代码有什么问题以及如何实现我想要的结果吗？

Answer 1

return 在函数 validateForm() 结束时为 false

Answer 2

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

您可以从服务器创建隐藏表单 HTML return 或更改您的表单以使用 AJAX.

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

How to display a hidden form after submitting a form?

html

javascript

forms

validation

display