javascript - 表单提交后隐藏/显示 Div?

标签 javascript html forms

您好,我在使用它时遇到了一些问题,我想做的很简单,就是在提交我的 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>

任何帮助将不胜感激谢谢:)

最佳答案

我认为您只是在 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 />按钮标签,或在其中显示任何文本。

关于javascript - 表单提交后隐藏/显示 Div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7156157/

相关文章:

javascript - 获取拖动项目的ID JQuery

jquery - 垂直固定 slider 到下面的内容

html - 如何在 Angular Bootstrap 4 Web 应用程序中设置导航栏、 Logo 和标题的样式?

javascript - PHP 或 JS GET 形式 : How to add a field if checkbox is checked

PHP $_POST & 拒绝伪造表单安全

javascript - 间距 HTML 表单

javascript - WordPress jQuery 将值发送到数据库

javascript - document.getElementById ("").innerHTML= 不起作用(但只是部分起作用)

javascript - 将页面上的文本更改为多个下拉列表中的 SQL 结果

javascript - 对第三方 AJAX 负载执行某些操作