Как показать скрытые формы

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, как теги говорит, чтобы вы могли сделать это нравится:

$('#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

Try This :

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>