How to show and hide a form?

Question

When I load a page, I need to show form for name, but when I click "submit" i need hide that form. How can i do that with javascript?

<div id="small-form">
    <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <input type="submit" value="Submit" onclick="hideForm()">
    </form>
</div>

Answer 1

In the hideForm() function set display:none style for the div small-form .

Like that:

var myFormDiv = document.getElementById("small-form");
myFormDiv.style.display = "none";

Answer 2

You cannot just hide the form if it submits to the server unless you either Ajax the form to the server or target an iframe or new tab

When the form submits, a new page is loaded. If it loads the same page, you can either hide it on the server or set an instruction in localStorage to tell the page to not show the form

I also strongly suggest you do NOT use onclick of a submit button but the submit event

 document.getElementById("myForm").addEventListener("submit",function(e) { e.preventDefault(); // if you want to NOT submit the form document.getElementById("small-form").classList.add("hide"); // here you can ajax or do other stuff without submitting })

 .hide { display: none; }

 <div id="small-form"> <form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <input type="submit" value="Submit"> </form> </div>

Answer 3

If you wish to permanently hide the form you can do something like this. Just set the display property of the form to none . This will hide the form but it will exist there in the HTML code.

 function hideForm() { event.preventDefault(); var myForm = document.getElementById("My-Form"); myForm.style.display = "none"; var name = document.getElementById("Name"); alert(name.value); }

 <div id="small-form"> <form id="My-Form"> <label for="fname">First name:</label><br> <input id="Name" type="text" id="fname" name="fname"><br> <input type="submit" value="Submit" onclick="hideForm(event)"> </form> </div>

Another way to achieve what you are trying to do is simply remove the form. You can do this by calling remove() function on the form. This permanently removes the form.

 function hideForm(event) { event.preventDefault(); var myForm = document.getElementById("My-Form"); var name = document.getElementById("Name"); alert(name.value); myForm.remove(); }

 <div id="small-form"> <form id="My-Form"> <label for="fname">First name:</label><br> <input id="Name" type="text" id="fname" name="fname"><br> <input type="submit" value="Submit" onclick="hideForm(event)"> </form> </div>

Answer 4

You can set the display style to none in the hideForm() function in javascript to hide the form.

But, because you are using a submit button on the form it will try to redirect when the submit button is pressed. A simple solution to this (if you don't want the form to actually be submitted) is to change the type of the input to button rather than submit .

 function hideForm() { document.getElementById('small-form').style.display = 'none'; }

 <div id="small-form"> <form > <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <input type="button" value="Submit" onclick="hideForm();"> </form> </div>