Hide/Show Div after form submit?

2019-06-17 04:32发布

站内问答 / JavaScript
993 2 4

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 :)

2条回答
看我几分像从前
2楼-- · 2019-06-17 05:20

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

查看更多
0人赞 添加讨论(0) 举报
混吃等死
3楼-- · 2019-06-17 05:34

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)