提交表格后如何显示隐藏的表格?

时间:2017-04-05 01:31:13

标签: javascript html forms validation display

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

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

2 个答案:

答案 0 :(得分:0)

在函数validateForm()

的末尾返回false

答案 1 :(得分:0)

表单submit指示浏览器发送带有URL中编码的数据的GET请求,然后显示生成的HTML。这就是隐藏形式只是简单显示的原因。

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