Comment afficher le formulaire caché

Question

Je veux montrer une forme cachée quand cliquez sur le bouton mon problème est quand je clique sur le bouton du formulaire est affiché pendant quelques secondes, la page reload ceci est mon code:

Java scénario:

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

comportement par défaut de button est submit, d'où le form est soumis. Vous pouvez utiliser type="button" qui n'a pas de comportement par défaut, ainsi il peut être associé aux gestionnaires d'événements côté client.

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

---

De plus, je vous recommande de ne vous débarrasser de des gestionnaires de clic en ligne laides et gestionnaire d'événements se lient à l'aide addEventListener()

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

HTML

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

Answer 2

Si vous utilisez jQuery vos balises dit pour que vous puissiez le faire comme:

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

Espérons que cela aide.

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