如何顯示隱藏表格

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

button默認行為是submit ，因此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> 

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>