Multi part forms

I wanted a multi part form to work in a bootstrap modal and I couldn't find anything that worked that well so I wrote my own functions to create the affect I wanted. The following code shows how I have set up the form.

Step 1

Step 2

Step 3











		        

The three well's will be where my actual form parts go and the button groups will be where my next and previous buttons go. I created the following JavaScript file called multipartform.js to control the change between each well.

var div = 1;

//Increase div by one
function increase(){
    div++;
}

//Decrease div by one
function decrease(){
    div--;
}

//Changes the buttons depending on where the from is
function changeBut(x, l, r){
    
        if(div === 1)
        {
            $(r).html("Next");
            $(l).html("");
        }
        else if(div === x)
        {
            $(l).html("Previous");
            $(r).html("");
        }
        else
        {
            $(l).html("Previous");
            $(r).html("Next");
        }
    
}

//Changes the divs to the next div
function changeDivUp(x, l, r){
    increase();
    var divis = ".div_";
    
    for(k = 1; k <= x; k++)
    {
        divis = divis + k;
        
        if(k === div)
        {
            $(divis).show();
        }
        else
        {
            $(divis).hide();
        }
        
        divis = ".div_";
    }
    
    changeBut(x, l, r);
}

//Goes back to the previous div
function changeDivDown(x, l, r){
    decrease();
    var divis = ".div_";
    
    for(k = 1; k <= x; k++)
    {
        divis = divis + k;
        
        if(k === div)
        {
            $(divis).show();
        }
        else
        {
            $(divis).hide();
        }
        
        divis = ".div_";
    }
    
    changeBut(x, l, r);
}

//sets the divs into the correct starting position
function startDiv(x, l, r){
    
    var divis = ".div_";
    
   
    
    for(k = 1; k <= x;)
    {
        divis = divis + k;
        
        if(k === 1)
        {
            $(divis).show(); 
        }
        else
        {
            $(divis).hide(); 
        }
         k++;
         
         divis = ".div_";
    }
    
    $(l).html("");
    
    $(r).html("Next");
}


//resets div to one to start again
function resetVar(x, l, r){
    div = 1;  
    
    startDiv(x, l, r);
}
		        

Then to bring it all together in my

$(document).ready

code I put the following lines.

$(".cl").on("click", function(){
        resetVar(3, "#l", "#r");
    });
    
    $(".sub").on("click", function(){
        resetVar(3, "#l", "#r");
    });
    
    startDiv(3, "#l", "#r");
    
    $(document).on("click", "#n", function(){
        changeDivUp(3, "#l", "#r");
    });
    
    $(document).on("click", "#p", function(){
        changeDivDown(3, "#l", "#r");
    });
		        

A importent note here is that to make sure the onClick event happens on the dynamically created next and previous buttons use the format

$(document).on("click", "#p", function()

that way it will always work even when the buttons are changed.

So thats it press the demo button below for a working demonstartion and have fun.