如何顯示隱藏的表單

Question

我要顯示一個隱藏的表單時，點擊按鈕 我的問題是，當我點擊顯示幾秒鐘表單的按鈕後，頁面重載 這是我的代碼：

的Java腳本：

function show(){ 
    document.getElementById("theForm").style.display="block"; 
} 

HTML：

<button id="search" onclick="show()">show</button> 
</form> 
<form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none"> 

Answer 1

默認行爲是submit，因此form提交。您可以使用不具有默認行爲的type="button"，因此它可以與客戶端事件處理程序關聯。

<button type="button" id="search" onclick="show()">show</button> 

---

此外，我建議你擺脫難看的在線點擊處理程序和綁定的事件處理程序的使用addEventListener()

document.querySelector('#search').addEventListener("click", show, false); 

HTML

<button type="button" id="search">show</button> 

Answer 2

如果你使用jQuery作爲您的標籤是這麼說的，你可以做到這一點，如：

$('#seach').on('click', function(){ 
    $('#theForm').show(); 
}) 

希望這會有所幫助。

$('#search').on('click', function(){ 
 
    $('#theForm').show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="search">Show</button> 
 
<br> 
 
<form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none"> 
 
    MY FORM 
 
</form>

的 button

Answer 3

試試這個：

Java Script: 

      function show(){ 
      document.getElementById("theForm").style.display="block"; 
     } 
html : 

<input type="button" onclick="show()" id="search" value="show"> 
      </form> 
      <form class="form-horizontal" action="FormController/save" method = "POST" id="theForm" style="display: none"> 

Answer 4

<script> 
$(document).ready(function(){ 
    $("#what").click(function() { //call event 
     $(".hello").hide();//hide forms 
     $('neededFormOnly').show(); //show only the needed form 
     return false 
    }); 
}); 
</script>