简体   繁体   中英

Hide Form in HTML using Javascript

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%">&nbsp; Name</td>
    <td width="33%">&nbsp; <input type="text" name="name"  /> </td>
   </tr>
   <tr>
    <td>&nbsp; Email Address</td>
    <td>&nbsp;  <input type="text" name="email"  /></td>
   </tr>
   <tr>
    <td>&nbsp; Contact Number</td>
    <td>&nbsp;  <input type="text" name="number"  /></td>
   </tr>
   <tr>
    <td>&nbsp; Message</td>
    <td width="100">&nbsp; <textarea name="msg"> </textarea> </td>
   </tr>
   <tr>
    <td>&nbsp;  <input onclick="myClick()" name="submit" id="submit" type="submit" value="Submit"  /> </td>
    <td>&nbsp;</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?

You simply need:

function myClick(){
     var form = document.getElementById("regForm");
     form.style.display = "none";
}

DEMO

document.getElementById("regForm").style.display="none";

is enough to hide regForm . Try to place your <script> in <head> .

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM