Javascript 如何在jquery中单击按钮时显示/隐藏表单？
我的页面中有两个表单。我使用HTML内联样式隐藏表单2Javascript 如何在jquery中单击按钮时显示/隐藏表单？,javascript,jquery,html,Javascript,Jquery,Html,我的页面中有两个表单。我使用HTML内联样式隐藏表单2 <form id="productionForm" name="productionForm" method="POST" style="display:none;"> 我在表格1上有输入按钮 <input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" /&g
<form id="productionForm" name="productionForm" method="POST" style="display:none;">
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
<script type="text/javascript">
$(document).ready(function(){
$("#buttonProductionSummary").click(function() {
$("#productionForm").show();
});
});
</script>
$（文档）.ready（函数（）{
$（“#按钮产品摘要”）。单击（函数（）{
$（“#productionForm”）.show（）；
});
});
当我单击表单1中的按钮时，页面再次被重新加载，因此表单2再次出现和消失。如何在单击表单1上的按钮时使表单2显示。您需要防止表单的默认行为：
<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />
$("#buttonProductionSummary").click(function(e) {
$("#productionForm").show();
e.preventDefault();
});
问题是，单击表单1中的按钮会触发表单提交（默认事件）。。。因此，页面将重新加载。您应该通过使用提交事件作为触发器来防止这种情况，使用AJAX处理表单，并在显示以下内容之前将结果输出到
#productionForm$("#form1").submit(function() {
/* AJAX calls and insertion into #productionForm */
$("#productionForm").show();
return false;
});
根据我的要求，我试图显示要编辑的表单，并使用以下方式隐藏所有剩余表单
<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>
$（文档）.ready（函数（）{
$（“#什么”）。单击（函数（）{//调用的事件
$（“.hello”）.hide（）；//隐藏所有窗体
$（'#ayyappa1'）.show（）；//仅显示所需表单
返回false//stop选项
});
});
//为每个表单声明类
//点击事件触发器
<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>`
编辑您的个人资料
`
$（文档）.ready（函数（）{
$（“#editForm”）.hide（）；
$（“#btn”）。单击（功能（e）{
$（“#editForm”）.show（）；
$（“#btn”）.hide（）；
});
});