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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7156157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:04:55  来源:igfitidea点击:

Hide/Show Div after form submit?

javascripthtmlforms

提问by Jessica

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

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

回答by C???

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 />按钮标签,也没有在其中显示任何文本。

回答by Adeel

you need to put showhidefunction on form onsubmitinstead of input

你需要把showhide函数放在表单上onsubmit而不是input

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

you are also missing quotes as @Cory mentioned

你也缺少@Cory提到的引号