Javascript 表单提交后用表单隐藏div并显示隐藏的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14638575/
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
hide the div with the form after the form is submitted and show a hidden div
提问by user2031113
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>
回答by Marc Baumbach
You can add an onsubmithandler. Without using a third-party library such as jQuery, here's a basic way to do it with inline JavaScript:
您可以添加onsubmit处理程序。在不使用第三方库（例如 jQuery）的情况下，这是使用内联 JavaScript 执行此操作的基本方法：
<form onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">
The onsubmitis triggered whenever the form is submitted, be it by clicking the Submitbutton, programmatically, or if a user hits Enterin a textfield, for example.
在onsubmit每次提交表单时被触发，无论是通过点击Submit按钮，程序，或者如果用户点击Enter一个文本字段，例如。
I would, however, recommend you use jQuery and a more unobtrusive approach than this inline approach though. If you want to see how to do that with jQuery, here's a jsFiddlethat shows one way of accomplishing this. Basically, you would add an idsuch as myformon the formelement and then add this to your JavaScript:
但是，我建议您使用 jQuery 和一种比这种内联方法更不引人注目的方法。如果您想了解如何使用 jQuery 做到这一点，这里有一个jsFiddle，它展示了一种实现方式。基本上，您可以在元素上添加id诸如此类，然后将其添加到您的 JavaScript 中：myformform
$(document).ready(function() {
$("#myform").submit(function(e) {
$("#first").hide();
$("#second").show();
});
});
回答by Jaykesh Patel
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
然后编写提交按钮的点击事件
jQuery("#submit-btn").click(function(e)) {
e.preventDefault();
jQuery('#first').hide();
jQuery('#show').show();
}
