I have been trying to hide a form after the submit button is clicked. I have googled and followed some but they seem to be not working for me.
This is my code:
HTML:
<div id="wrapper">
<form name="regForm" id="regForm" action="indexSave.php" method="post">
<table width="100%" border="0">
<tr>
<td colspan="2"> <center> Registration Form </center> </td>
</tr>
<tr>
<td width="23%"> Name</td>
<td width="33%"> <input type="text" name="name" /> </td>
</tr>
<tr>
<td> Email Address</td>
<td> <input type="text" name="email" /></td>
</tr>
<tr>
<td> Contact Number</td>
<td> <input type="text" name="number" /></td>
</tr>
<tr>
<td> Message</td>
<td width="100"> <textarea name="msg"> </textarea> </td>
</tr>
<tr>
<td> <input onclick="myClick()" name="submit" id="submit" type="submit" value="Submit" /> </td>
<td> </td>
</tr>
</table>
</form>
</div>
And my Javascript:
<script type="text/javascript">
function myClick()
{
var me = document.getElementById("wrapper").visibility="false";
}
</script>
I also tried this (from this link )
var me = document.getElementById("regForm").style.display="none";
Please help me figure out what's wrong?
I have been trying to hide a form after the submit button is clicked. I have googled and followed some but they seem to be not working for me.
This is my code:
HTML:
<div id="wrapper">
<form name="regForm" id="regForm" action="indexSave.php" method="post">
<table width="100%" border="0">
<tr>
<td colspan="2"> <center> Registration Form </center> </td>
</tr>
<tr>
<td width="23%"> Name</td>
<td width="33%"> <input type="text" name="name" /> </td>
</tr>
<tr>
<td> Email Address</td>
<td> <input type="text" name="email" /></td>
</tr>
<tr>
<td> Contact Number</td>
<td> <input type="text" name="number" /></td>
</tr>
<tr>
<td> Message</td>
<td width="100"> <textarea name="msg"> </textarea> </td>
</tr>
<tr>
<td> <input onclick="myClick()" name="submit" id="submit" type="submit" value="Submit" /> </td>
<td> </td>
</tr>
</table>
</form>
</div>
And my Javascript:
<script type="text/javascript">
function myClick()
{
var me = document.getElementById("wrapper").visibility="false";
}
</script>
I also tried this (from this link )
var me = document.getElementById("regForm").style.display="none";
Please help me figure out what's wrong?
Share Improve this question edited May 23, 2017 at 11:49 CommunityBot 11 silver badge asked Apr 27, 2014 at 4:50 LadyWinterLadyWinter 3076 silver badges13 bronze badges 1-
1
Either of the answers below will work. Just to clear one thing up though... the
visibilityproperty should be either'visible'or'hidden'rather than a boolean. – jshanley Commented Apr 27, 2014 at 5:03
4 Answers
Reset to default 3You simply need:
function myClick(){
var form = document.getElementById("regForm");
form.style.display = "none";
}
DEMO
If hiding is all you want, you can have it with this really tiny piece of code:
<form onsubmit="this.style.display='none'" name="regForm" id="regForm" action="indexSave.php" method="post">
It will also hide the form when [enter] is pressed.
This code hides the form, reorganizing the other elements:
<script type="text/javascript">
var form = document.getElementById("regForm");
function myClick(){
form.style.display = "none";
}
</script>
This code only makes it invisible, so if the code above is messing the layout, use it:
<script type="text/javascript">
var form = document.getElementById("regForm");
function myClick(){
form.style.visibility = "hidden";
}
</script>
document.getElementById("regForm").style.display="none";
is enough to hide regForm. Try to place your <script> in <head>.