Question

嗨，我在使用这个工作时遇到了一些麻烦，非常简单，我想要做的就是在我的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>

非常感谢任何帮助，谢谢：）

Answer 1

我认为你的document.getElementById("hidden_div")电话中的“hidden_div”缺少引号！

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

如果您想查看预期的行为，则应将showHide()调用移至<form>元素，并在其后返回false：

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

并将提交按钮保留为：

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

另请注意，您尚未自行关闭<input />按钮标记，或者在其中显示任何文本。

Answer 2

您需要将showhide功能放在表单onsubmit上，而不是input

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

你也错过了@Cory提到的引号

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

2 个答案: