Javascript 如何在 jquery 中单击按钮时显示/隐藏表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13888093/
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
How to show/hide a form on button click in jquery?
提问by Allen
I have two forms in my page. I hide the form 2 using HTML inline style.
我的页面中有两个表单。我使用 HTML 内联样式隐藏了表单 2。
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
I have input button on form 1.
我在表格 1 上有输入按钮。
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
I have JQuery code to load the form 2 on button click of form 1. My JQuery code is as follows.
我有 JQuery 代码在表单 1 的按钮单击时加载表单 2。我的 JQuery 代码如下。
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
When i click the button in the form one, the page get reloaded again, so the form 2 appears and disappers again. How to can i make the form 2 to appear when i click button on form 1.
当我单击表单 1 中的按钮时，页面会再次重新加载，因此表单 2 再次出现并消失。当我单击表单 1 上的按钮时，如何使表单 2 出现。
回答by 0x499602D2
You need to prevent the default behavior of the form:
您需要防止表单的默认行为：
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});
回答by Debasish Ghosh
None of the answers above works, so I figured it out myself. This code works like a charm.
上面的答案都不起作用，所以我自己弄明白了。这段代码就像一个魅力。
<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm" action="" method="post" name="editForm">
<input type="text" name="txtname" placeholder="enter your name">
</form>`
<script type="text/javascript">
$(document).ready(function(){
$("#editForm").hide();
$("#btn").click(function(e) {
$("#editForm").show();
$("#btn").hide();
});
});
</script>
回答by IROEGBU
The problem is that clicking the button in form 1 is triggering a submission of the form (default event)... Hence, the page reloading. You should prevent that by using the submit event as your trigger, handle the form using AJAX and output the result to #productionFormbefore displaying:
问题是单击表单 1 中的按钮会触发表单的提交（默认事件）...因此，页面重新加载。您应该通过使用提交事件作为触发器来防止这种情况，使用 AJAX 处理表单并将结果输出到#productionForm显示之前：
$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});
回答by ayu for u
as per my requirement i tried to display the form which is to be edit and hide all remaining forms using the following way;
根据我的要求，我尝试使用以下方式显示要编辑的表单并隐藏所有剩余的表单；
<html>
<head>
<script>
$(document).ready(function(){
$("#what").click(function() { //event called
$(".hello").hide(); // to hide all forms
$('#ayyappa1').show(); //to dispaly needed form only
return false //option to stop
});
});
</script>
</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what"> // trigger of click event
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>
