I'm implementing a step-by-step form ( Wizard ) and I'm using the project's CSS acornejo I basically use Bootstrap's Model so that the user can not sign in to their account without first completing certain steps.

CSS tuning:

<div class="modal-body">
    <div class="wizardcontent" id="step_1" style="display: none;">
        <div class="form-group">
            <label class="control-label" for="xxx">XXX*</label>
            <input id='xxx' class="form-control" type='text' name='xxx' />
        </div>
    </div>
    ...
</div>

To test I've created very simple HTML:

$(document).ready(function(){

    // all content starts hidden
    $('.wizardcontent').hide();
    $('#wizardcontent').hide();
    // initialize the wizard state
    load_state(1);

    var $inputFields= $("#xxx");

    // loads new state based on button clicked
    $(':button').click(function(){

    var current_state = $('#wizard').attr('class');
    //we only want the number, converted to an int
    current_state = parseInt(current_state.replace(/(step_)/, ""));

    switch (current_state) {
        case 1:
            $inputFields = $("#xxx");
            break;      
        case 2:
            $inputFields = $("#yyy");
            break;  
        case 3:
            $inputFields = $("#zzz");
            break;
        default:
            break;
    }

    var isValid = false;
    $inputFields.each(function () {
      isValid = $(this).valid();
    });

    if ($(this).attr('id') == 'next')
    {
        if (!isValid)
            return false;
        else
        {
            //reset the wizardcontent to hidden
            $('#wizardcontent').hide();     
            //figure out if 'next' or 'previous' was clicked and load appropriate state
            load_state(++current_state);
        }
    }
    else if ($(this).attr('id') == 'previous'){ load_state(--current_state); }
  });
});

function load_state(current_state){
    //disable all buttons while loading the state
    $('#previous').attr("disabled","disabled");
    $('#next')    .attr("disabled","disabled");
    $('#save')    .attr("disabled","disabled");

  //show and hide div's
  switch (current_state) {
    case 1:
        $('#step_1').fadeIn("slow");
        $('#step_2').hide();
        $('#step_3').hide();
        break;          
    case 2:
        $('#step_2').fadeIn("slow");
        $('#step_1').hide();
        $('#step_3').hide();
        break;          
    case 3:
        $('#step_3').fadeIn("slow");
        $('#step_1').hide();
        $('#step_2').hide();
        break;    
    default:
        break;
    }

  //set the wizard class to current state for next iteration
  $('#wizard').attr('class','step_'+ current_state);
  var iterator = 1;
  // the state heading h3. removing is no biggie
  $('#wizard h3').text("Step " + current_state);
  // loop through the list items and set classes for css coloring
  $('#mainNav li').each(function(){
    var step = $(this);
    if (iterator == current_state){ step.attr('class','current active'); }
    else if (current_state - iterator == 1){ step.attr('class','lastDone'); }
    else if (current_state - iterator > 1){ step.attr('class','done'); }
    else{ step.attr('class',''); }
        // special case for step 3 because it doesn't have bacground image
        if (iterator == 3){ step.addClass('mainNavNoBg'); }
    iterator++;
  });
    //depending on the state, enable the correct buttons
    switch(current_state){
        case 1:
            $('#next').removeAttr("disabled");
            break;
        case 2:
            if($('#step_3').length>0)
            {
                $('#previous').removeAttr("disabled");
                $('#next').removeAttr("disabled");
            }
            else
            {
                $('#previous').removeAttr("disabled");
                $('#save').removeAttr("disabled");
            }
        case 3:
            $('#previous').removeAttr("disabled");
            $('#save').removeAttr("disabled");
            break;

        default:
            $('#previous').removeAttr("disabled");
            $('#next').removeAttr("disabled");
    }
}

JavaScript:

<div class="modal-body">
    <div class="wizardcontent" id="step_1" style="display: none;">
        <div class="form-group">
            <label class="control-label" for="xxx">XXX*</label>
            <input id='xxx' class="form-control" type='text' name='xxx' />
        </div>
    </div>
    ...
</div>

How can I pass (formally or otherwise) the fields of the PHP form whenever I change the TAB of the Wizard ?

Sample image:

Note:IaddedtheBootstraptagbecauseI'mworkingwithBootstrapandifsomeoneknowsabetterwaytodothis.