Question

52

Hide/Show Div after form submit?

rated 0 times [ 54] [ 2] / answers: 1 / hits: 55286 / 13 Years ago, tue, august 23, 2011, 12:00:00

Hi I'm having some trouble getting this to work, pretty simple all I am wanting to do is show a div once my html form is submitted.

<head>



<script type=text/javascript>

 function showHide() {

   var div = document.getElementById(hidden_div);

   if (div.style.display == 'none') {

     div.style.display = '';

   }

   else {

     div.style.display = 'none';

   }

 }

</script>



</head>





<body>



<form method=post name=installer>



<label>Home Keyword</label>

<br />

<input type=text name=hello value=>

<br />

<input type=submit value= name=submit onsubmit=showHide()>



</form>



<div id=hidden_div style=display:none>

<p>Show me when form is submitted :) </p>

</div>



</body>

Any help would be much appreciated thank you :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ravenl

Add To Favorites

Follow

Total Points: 338

Total Questions: 107

Total Answers: 112

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

ravenl questions

1 TypeError: e.preventDefault is not a function on React Hook Form using EmailJs

Wed, Sep 1, 21, 00:00, 3 Years ago

1 Vue @change event not working in < b-form-datepicker/>

Thu, Feb 18, 21, 00:00, 3 Years ago

1 Image type in typescript

Tue, Jan 12, 21, 00:00, 3 Years ago

1 How can I append HTML code using JavaScript?

Tue, Mar 17, 20, 00:00, 4 Years ago

1 make the first tab the active tab when open a bootstrap modal

Sun, Feb 16, 20, 00:00, 4 Years ago

View All

answered 13 Years ago adrienkeithr · Accepted Answer

I think you're just missing quotes around hidden_div in your document.getElementById(hidden_div) call!

But actually, your page is probably posting back, resetting the state of the page and thus leaving hidden_div seemingly always in a hidden state -- are you intending on handling the form submission via AJAX?

If you want to see the intended behavior, you should move the showHide() call to the <form> element, and return false after it:

<form method=post name=installer onsubmit=showHide(); return false;>

and leave the submit button as:

<input type=submit value= name=submit />

Also note that you haven't self-closed the <input /> button tag, or given any text to show inside it.