Menu
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 :)
498
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.
154
you need to put showhide function on form onsubmit instead of input
<form method="post" name="installer" onsubmit="showHide()">
you are also missing quotes as @Cory mentioned
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
