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,

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);
}

  Part 1

  

  »



  Part 2

  

  «
  »



  Part 3

  

  «
  Sum