Show/hide forms using buttons and JavaScript

Question

I need to show a form using a button, and hide it when the user presses another button, because the other button shows another form. I did a similar thing with a select box, but I can't figure out how to do this.

Answer 1

Would you want the same form with different parts, showing each part accordingly with a button?

Here an example with three steps, that is, three form parts, but it is expandable to any number of form parts. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.

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>

Answer 2

Use the following code fragment to hide the form on button click.

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 the HTML:

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

Answer 3

There's something I bet you already heard about this! It's called jQuery.

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

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

Answer 4

If you have a container and two sub containers, you can do like this

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>

Answer 5

There's the global attribute called hidden. But I'm green to all this and maybe there was a reason it wasn't mentioned yet?

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