如何显示/隐藏表单按钮点击jQuery中？

我的页面有两种形式。我使用HTML内联样式隐藏表单2。如何显示/隐藏表单按钮点击jQuery中？

 <form id="productionForm" name="productionForm" method="POST" style="display:none;">

我有输入按钮形式1.

<input id="buttonProductionSummary" class="buttonProductionSummary" type="submit" value="Submit" />

我有JQuery的代码加载形式2上形式1的按钮点击我的JQuery代码如下。

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#buttonProductionSummary").click(function() { 
      $("#productionForm").show(); 
     }); 
    }); 
</script>

当我单击窗体之一中的按钮时，页面会再次被重新加载，所以窗体2会再次出现并消失。如何可以让我的形式2您需要防止形式的默认行为出现时，我点击表单按钮1.

来源

2012-12-15 Allen

是否必须提交按钮呢？我想如果你想Enter来触发它，那么这是有道理的，但FYI的另一个解决方案是使用''，它不会提交表单。 – ErikE

Form1包含过滤器。我需要将从form1中选择的过滤器值传递给mysql数据库，并检索要在form2中填充的值。如果传递的过滤器没有可用数据，则应删除空表单。要执行此操作，我需要在form1中提交。 – Allen

除非您使用ajax，否则您无法提交表单并保留相同的网页而无需重新加载。 – ErikE

：

$("#buttonProductionSummary").click(function(e) { 
    $("#productionForm").show(); 

    e.preventDefault(); 
});

来源

2012-12-15 00:24:51 0x499602D2

感谢大卫，它的工作原理。 – Allen

的问题是，单击窗体1按钮触发提交表单（默认事件）...因此，页面重新加载。你应该避免通过使用提交事件作为触发，使用AJAX和输出结果处理形式#productionForm显示前：

$("#form1").submit(function() { 
    /* AJAX calls and insertion into #productionForm */ 
    $("#productionForm").show(); 
    return false; 
});

来源

2012-12-15 00:29:26 IROEGBU

检查我的更新答案 – IROEGBU

按我的要求，我想，以显示这是要编辑的形式和使用以下方式隐藏所有剩余的表单;

<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>

来源

2013-12-14 13:46:35

以上都没有答案，所以我自己想清楚了。这段代码就像一个魅力。

<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>

来源

2016-12-07 20:25:14 Debasish

如何显示/隐藏表单按钮点击jQuery中？

回答

相关问题