表单提交后隐藏/显示Div? [英] Hide/Show Div after form submit?
问题描述
<$ p $
p> < 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 =postname =installer>
< label>首页关键字< / label>
< br />
< input type =textname =hellovalue =>
< br />
< input type =submitvalue =name =submitonsubmit =showHide()>
< / form>
< div id =hidden_divstyle =display:none>
< p>在提交表单时显示我:)< / p>
< / div>
< / body>
非常感谢您的任何帮助:)
我想你只是在你的 document.getElementById(hidden_div)
中调用hidden_div !实际上,您的页面可能会回传,重置页面状态,从而使hidden_div总是处于隐藏状态 - 您是否打算处理通过AJAX提交表单提交?
如果您想查看预期的行为,您应该移动 showHide()
到< form>
元素,并在它之后返回false:
< form method =postname =installeronsubmit =showHide(); return false;>
并将提交按钮保留为:
< input type =submitvalue =name =submit/>
另请注意,您尚未自行关闭< input / >
按钮标记,或给出任何文字显示在里面。
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 :)
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.
这篇关于表单提交后隐藏/显示Div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!