如何在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