表单提交后隐藏/显示 Div？

Question

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.嗨，我在让它工作时遇到了一些麻烦，很简单，我想要做的就是在提交我的 html 表单后显示一个 div。

<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 :)任何帮助将不胜感激谢谢:)

Answer 1

I think you're just missing quotes around "hidden_div" in your document.getElementById("hidden_div") call! 我想你只是在你的document.getElementById("hidden_div")调用中错过了“hidden_div”周围的引号！

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? 但实际上，您的页面可能会回发，重置页面状态，从而使hidden_div看起来总是处于隐藏状态 - 您打算通过AJAX处理表单提交吗？

If you want to see the intended behavior, you should move the showHide() call to the <form> element, and return false after it: 如果要查看预期的行为，则应将showHide()调用移动到<form>元素，并在其后返回false：

<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. 另请注意，您没有自行关闭<input />按钮标记，或者在其中显示任何文本。

Answer 2

you need to put showhide function on form onsubmit instead of input 你需要把showhide功能于形式onsubmit而不是input

<form method="post" name="installer" onsubmit="showHide()">

you are also missing quotes as @Cory mentioned 你也错过了@Cory提到的引号

Answer 3

I Hope this example works for you , I have used two different ways first One for Hiding Form and second One for Showing DIV我希望这个例子对你有用，我使用了两种不同的方法，第一种用于隐藏表单，第二种用于显示 DIV

 document.forms['myFirstForm'].addEventListener('submit', function(event) { // Do something with the form's data here this.style['display'] = 'none'; event.preventDefault(); }); function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <form action="" class="m-md-5 px-md-5" method="post" name="myFirstForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Doe"><br><br> <button type="submit" class="btn btn-primary w-100 mt-5" onclick="myFunction()">Submit</button> </form> <div id="myDIV" class="2" style="display:none"> <h1>ThankYou</h1> <h6>We will get back to you shortly on the same.</h6> </div>

表单提交后隐藏/显示 Div？

问题描述

3 个解决方案

解决方案1
17 已采纳 2011-08-23 04:09:16

解决方案2
2 2011-08-23 04:10:52

解决方案3
0 2021-11-29 14:48:15

表单提交后隐藏/显示 Div？

问题描述

3 个解决方案

解决方案1 17 已采纳 2011-08-23 04:09:16

解决方案2 2 2011-08-23 04:10:52

解决方案3 0 2021-11-29 14:48:15

解决方案1
17 已采纳 2011-08-23 04:09:16

解决方案2
2 2011-08-23 04:10:52

解决方案3
0 2021-11-29 14:48:15