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，因此提交了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，那么您可以这样做：

<div id="wrapper">
  <div id="referenzen">
    <img src="http://vignette2.wikia.nocookie.net/dccu/images/b/bc/Icon-Wikipedia.png/revision/latest?cb=20160324075444">
    <h1>Unsere Firmengeschichte</h1>
    <br>
    <p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen. Der Betrieb beschäftigt 15- 20 Mitarbeiter.</p>
  </div>

希望这有帮助。

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

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

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>

如何显示隐藏的表格

4 个答案: