Display whole form on button click/submit

Question

I have created a form. On submit of the form I want to display the whole form, but it currently isn't doing so. Here is my code:

 function Openform() { document.getElementById('form1').style.display = ''; } 

 <div id = "form1" style = "display:none"> <form id="formirri" method="post" action="" target="_parent"> <br/><br/> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr> <tr> <td><a href="#" class="close-classic"></a></td> </tr> </table> </div> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Answer 1

You made a mistake in style.Change like below:

function Openform()
{
document.getElementById('form1').style.display = '';
}

<div style = "display:none">

display and visibility both are different.

display :none will not be available in the page and does not occupy any space.

visibility :hidden hides an element, but it will still take up the same space as before.

HTML:

<div id = "form1" style = "display:none">
<form  id="formirri" method="post" action="" target="_parent">
       <br/><br/>
    <div id="demo">
    <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr>
<tr>
    <td><a href="#" class="close-classic"></a></td>
</tr>
</table>

</div>
</form>
</div>

Answer 2

One mistake you made here is you forgot to close your <form> tag, First use display:none in your form tag then using onclick() change it's style to display:block .

Try this

 function Openform(){ document.getElementById('form1').style.display = 'block'; } 

  <div style = "Visibility = hidden"> <form id="form1" method="post" action="" target = "_parent" style="display: none" ><br><br> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"> <tr> <td colspan=1>1</td> </tr> <tr> <td><a href="#" class="close-classic">2</a></td> </tr> </table> </div> </form> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Answer 3

This should work:

function Openform()
{
document.getElementById("form1").style.visibility = "visible";
}

<div id = "form1" style = "visibility:hidden">
<form  id="formirri" method="post" action="" target="_parent">
   <br/><br/>
<div id="demo">
<table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr>
<tr>
   <td><a href="#" class="close-classic"></a></td>
</tr>
</table>

Answer 4

try this

 function Openform() { document.getElementById('form1').style.display = 'block'; } 

 <form id="form1" method="post" action="" target="_parent" style="display:none;"> <br><br> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"> <tr> <td colspan=1></td> </tr> <tr> <td> <a href="#" class="close-classic"></a> </td> </tr> </table> </div> </form> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick="Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Answer 5

Seems like your all code is correct except few closing HTML tags.

 function Openform() { alert("Openform clicked!"); document.getElementById('form1').style.display = ''; } 

 <div id = "form1" style = "display:none"> <form id="formirri" method="post" action="" target="_parent"> <br/><br/> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"> <tr><td colspan=1> Welcome User</td></tr> <tr> <td><a href="#" class="close-classic">I am the second line</a></td> </tr> </table> </div> </form> </div> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Happy coding :)

Answer 6

You can use in your function like this:

var elem = document.getElementById('id');
 elem.style.display = 'none'; // hide
 elem.style.display = 'block'; // show - use this for block elements (div, p)
 elem.style.display = 'inline'; // show - use this for inline elements (span, a)

or style.visibility will actually make the div still be there, but be "all empty" or "all white"

 elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
 elem.style.visibility = 'visible';

If you are using jQuery, you can do it even easier as long as you want to set the display property:

$(elem).hide();
$(elem).show();