如何顯示/隱藏表單按鈕點擊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中？

回答

相關問題