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>

当我单击表单1中的按钮时，页面再次重新加载，因此表单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 个答案: