如何在jquery中单击按钮时显示/隐藏表单？

Question

我的页面中有两个表单。 我使用HTML内联样式隐藏了表单2。

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

我在表格1上有输入按钮。

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

我有JQuery代码在表单1的按钮单击上加载表单2.我的JQuery代码如下。

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

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

当我单击表单一中的按钮时，页面再次被重新加载，因此表单2出现并再次消失。 当我单击表单1上的按钮时，如何使表单2出现。

Answer 1

您需要防止表单的默认行为：

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

    e.preventDefault();
});

Answer 2

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

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

Answer 3

问题是单击表单1中的按钮会触发表单提交（默认事件）...因此，页面重新加载。 您应该通过使用submit事件作为触发器来阻止它，使用AJAX处理表单并在显示之前将结果输出到#productionForm ：

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

Answer 4

根据我的要求，我尝试显示要编辑的表单，并使用以下方式隐藏所有剩余的表单；

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

如何在jquery中单击按钮时显示/隐藏表单？

问题描述

4 个解决方案

解决方案1
3 已采纳 2012-12-15 00:24:51

解决方案2
2 2016-12-07 20:25:14

解决方案3
1 2012-12-15 00:29:26

解决方案4
1 2013-12-14 13:46:35

如何在jquery中单击按钮时显示/隐藏表单？

问题描述

4 个解决方案

解决方案1 3 已采纳 2012-12-15 00:24:51

解决方案2 2 2016-12-07 20:25:14

解决方案3 1 2012-12-15 00:29:26

解决方案4 1 2013-12-14 13:46:35

解决方案1
3 已采纳 2012-12-15 00:24:51

解决方案2
2 2016-12-07 20:25:14

解决方案3
1 2012-12-15 00:29:26

解决方案4
1 2013-12-14 13:46:35