Wie versteckte Form zeigen

Question

Ich möchte eine versteckte Form zeigen, wenn Klick auf den Button mein Problem ist, wenn ich auf die Schaltfläche klicken Sie das Formular für Sekunden, dann die Seite neu geladen wird angezeigt dies ist mein Code:

Java Drehbuch:

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

Standardverhalten von button ist submit, daher der form vorgelegt. Sie können type="button" verwenden, das kein Standardverhalten hat, daher kann es mit clientseitigen Ereignishandlern verknüpft werden.

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

---

Zusätzlich würde ich empfehlen Sie von der hässlichen Inline-Klick-Handler zu tun bekommen los und binden Ereignishandler mit addEventListener()

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

HTML

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

Answer 2

Wenn Sie jQuery als Tags verwenden sagt, so dass Sie es gerne tun könnte:

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

Hoffe, das hilft.

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

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>