How to display a hidden form after submitting a form?

Question

I currently have two forms in my HTML code. One of the forms(id="feedback") is assigned style="display:none", which will hide the form. The other form(id="search"), asks the user for a input. If text input is empty, alert user to enter an input; else I want the form to submit then display the feedback form, which is hidden from the start.

The problem I'm running into is that when the submission goes through, the feedback form only displays for a split second, instead of staying on the page.

Here is my code in JsBin; which shows my exact problem when you render it in live preview:

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>

Can someone let me know what's wrong with my code and how to achieve the results that I want?

Answer 1

在函数validateForm（）的末尾返回false

Answer 2

The form submit instructs the browser to sends a GET request with the data encoded in the URL and then to display the resulting HTML. That's why the hidden form only shows briefly.

You can make the hidden form HTML return from the server or change your form to use AJAX.