Hide Form in HTML using Javascript

Question

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?

Either of the answers below will work. Just to clear one thing up though... the visibility property should be either 'visible' or 'hidden' rather than a boolean. — jshanley
– jshanley, Commented Apr 27, 2014 at 5:03

Gaurang Tandon · Accepted Answer · 2014-04-27 04:54:30Z

3

You simply need:

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

DEMO

answered Apr 27, 2014 at 4:54

Gaurang Tandon

6,88911 gold badges52 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LadyWinter Over a year ago

Thank you. I think my php is messing up with the javascript. It doesn't want to hide the form. >.<

LadyWinter Over a year ago

yap. its the php. Thank you for the help

diynevala · Accepted Answer · 2014-04-27 05:30:56Z

1

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.

answered Apr 27, 2014 at 5:30

diynevala

5631 gold badge4 silver badges21 bronze badges

Comments

Vinicius · Accepted Answer · 2014-04-27 05:47:50Z

1

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>

answered Apr 27, 2014 at 5:47

Vinicius

262 bronze badges

Comments

nicael · Accepted Answer · 2014-04-27 04:58:54Z

0

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

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

answered Apr 27, 2014 at 4:58

nicael

19.1k13 gold badges65 silver badges93 bronze badges

1 Comment

LadyWinter Over a year ago

its in the head. i think the problem now is that my php is messing with the javascript

Collectives™ on Stack Overflow

Hide Form in HTML using Javascript

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related