Geek Answers Handbook

Show / hide forms using buttons and JavaScript

I need to show the form using a button, and hide it when the user clicks another button, because the other button shows a different form. I did the same with the selection box, but cannot figure out how to do this.

+6
source share
5 answers

Use the following code snippet to hide the form when the button is clicked.

document.getElementById("your form id").style.display="none";

And the following code to display it:

 document.getElementById("your form id").style.display="block";

Or you can use the same function for both purposes:

 function asd(a) { if(a==1) document.getElementById("asd").style.display="none"; else document.getElementById("asd").style.display="block"; }

And HTML:

 <form id="asd">form </form> <button onclick="asd(1)">Hide</button> <button onclick="asd(2)">Show</button>
+20
source

I bet you already heard about it! This is called jQuery .

 $("#button1").click(function() { $("#form1").show(); };

It's really easy, and you can use CSS-like selectors and add animations. It is really easy to learn.

+3
source

If you have a container and two subcontainers, you can do this as follows:

JQuery

  $("#previousbutton").click(function() { $("#form_sub_container1").show(); $("#form_sub_container2").hide(); }) $("#nextbutton").click(function() { $("#form_container").find(":hidden").show().next(); $("#form_sub_container1").hide(); })

HTML

  <div id="form_container"> <div id="form_sub_container1" style="display: block;"> </div> <div id="form_sub_container2" style="display: none;"> </div> </div>
+2
source

Do you want the same shape with different parts, displaying each part with a button?

Here is an example with three steps, that is, three parts of the form, but it can be extended to any number of parts of the form. HTML Symbols &laquo; and &raquo; just type “and” respectively, which may be interesting for the previous and next button symbols.

 shows_form_part(1) /* this function shows form part [n] and hides the remaining form parts */ function shows_form_part(n){ var i = 1, p = document.getElementById("form_part"+1); while (p !== null){ if (i === n){ p.style.display = ""; } else{ p.style.display = "none"; } i++; p = document.getElementById("form_part"+i); } } /* this is called at the last step using info filled during the previous steps*/ function calc_sum() { var sum = parseInt(document.getElementById("num1").value) + parseInt(document.getElementById("num2").value) + parseInt(document.getElementById("num3").value); alert("The sum is: " + sum); } 
 <div id="form_part1"> Part 1<br> <input type="number" value="1" id="num1"><br> <button type="button" onclick="shows_form_part(2)">&raquo;</button> </div> <div id="form_part2"> Part 2<br> <input type="number" value="2" id="num2"><br> <button type="button" onclick="shows_form_part(1)">&laquo;</button> <button type="button" onclick="shows_form_part(3)">&raquo;</button> </div> <div id="form_part3"> Part 3<br> <input type="number" value="3" id="num3"><br> <button type="button" onclick="shows_form_part(2)">&laquo;</button> <button type="button" onclick="calc_sum()">Sum</button> </div>
0
source

There, the global attribute is called hidden . But am I green for all of this, and perhaps there was a reason that was not mentioned before?

 var someCondition = true; if (someCondition == true){ document.getElementById('hidden div').hidden = false; } 
 <div id="hidden div" hidden> stuff hidden by default </div>

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/hidden

-1
source

More articles:


All Articles