Creating multi step forms

Question

I have been searching around for a way to create a multi step form such as: http://planner.builtbybuffalo.com/step-1/

I couldnt find any resources, just other exampl

Answer 1

Here you have a full working simple three steps example, with no need to jQuery.

You just need to define the submit_form() function. The HTML characters « and » just print respectively « and » which might be interesting for the previous and next button characters.

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

function submit_form() {
	var sum = parseInt(document.getElementById("num1").value) +
            parseInt(document.getElementById("num2").value) +
            parseInt(document.getElementById("num3").value);
  alert("Your result is: " + sum);
}

  

    Part 1

    

    
    »
  
  

    Part 2

    

    
    «
    »
  
  

    Part 3

    
    

    «
    Sum