[英]hide the div with the form after the form is submitted and show a hidden div
so I have this 所以我有这个
<div id="first" class="1" style="display:">
<form>
<input type=submit>
</form>
</div>
<div id="second" class="2" style="display:none">
test
</div>
I want to switch the display option after the form is submitted (the button is pushed). 我想在提交表单(按下按钮)后切换显示选项。 I want the script to become like this after clicking on the submit button
我希望在单击提交按钮后脚本变为这样
<div id="first" class="1" style="display:none">
<form>
<input type=submit>
</form>
</div>
<div id="second" class="2" style="display:">
test
</div>
You can add an onsubmit
handler. 您可以添加
onsubmit
处理程序。 Without using a third-party library such as jQuery, here's a basic way to do it with inline JavaScript: 如果不使用第三方库(如jQuery),这是使用内联JavaScript执行此操作的基本方法:
<form onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">
The onsubmit
is triggered whenever the form is submitted, be it by clicking the Submit
button, programmatically, or if a user hits Enter in a textfield, for example. 无论何时提交表单,都会触发
onsubmit
,例如,通过以编程方式单击“ Submit
按钮,或者如果用户在文本字段中按Enter键 。
I would, however, recommend you use jQuery and a more unobtrusive approach than this inline approach though. 但是,我会建议你使用jQuery和比这种内联方法更不引人注目的方法。 If you want to see how to do that with jQuery, here's a jsFiddle that shows one way of accomplishing this.
如果你想看看如何用jQuery做到这一点,这里有一个jsFiddle ,显示了实现这一目标的一种方法。 Basically, you would add an
id
such as myform
on the form
element and then add this to your JavaScript: 基本上,您可以在
form
元素上添加一个id
例如myform
,然后将其添加到JavaScript中:
$(document).ready(function() {
$("#myform").submit(function(e) {
$("#first").hide();
$("#second").show();
});
});
First give id to submit button. 首先给id提交按钮。
<div id="first" class="1" style="display:">
<form>
<input type=submit **id="submit-btn"**>
</form>
</div>
<div id="second" class="2" style="display:none">
test
</div>
Then write Click Event of submit Button 然后编写提交按钮的Click事件
jQuery("#submit-btn").click(function(e)) {
e.preventDefault();
jQuery('#first').hide();
jQuery('#show').show();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.