Form Multiple Wizard Steps

Question

I’m implementing a step-by-step form (Wizard) and I’m using the CSS of the gathering.
Basically I use the Model Bootstrap so that the user cannot log into your account without first completing certain steps.

CSS:

.nav-wizard > li {
  float: left;
}
.nav-wizard > li > a {
  position: relative;
  background-color: #eeeeee;
}
.nav-wizard > li > a .badge {
  margin-left: 3px;
  color: #eeeeee;
  background-color: #428bca;
}
.nav-wizard > li:not(:first-child) > a {
  padding-left: 34px;
}
.nav-wizard > li:not(:first-child) > a:before {
  width: 0px;
  height: 0px;
  border-top: 20px inset transparent;
  border-bottom: 20px inset transparent;
  border-left: 20px solid #ffffff;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
}
.nav-wizard > li:not(:last-child) > a {
  margin-right: 6px;
}
.nav-wizard > li:not(:last-child) > a:after {
  width: 0px;
  height: 0px;
  border-top: 20px inset transparent;
  border-bottom: 20px inset transparent;
  border-left: 20px solid #eeeeee;
  position: absolute;
  content: "";
  top: 0;
  right: -20px;
  z-index: 2;
}
.nav-wizard > li:first-child > a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.nav-wizard > li:last-child > a {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.nav-wizard > li:hover > a {
  background-color: #d5d5d5;
}
.nav-wizard > li:hover > a:before {
  border-right-color: #d5d5d5;
}
.nav-wizard > li:hover > a:after {
  border-left-color: #d5d5d5;
}
.nav-wizard > li.active > a,
.nav-wizard > li.active > a:hover,
.nav-wizard > li.active > a:focus {
  color: #ffffff;
  background-color: #428bca;
}
.nav-wizard > li.active > a:after {
  border-left-color: #428bca;
}
.nav-wizard > li.active > a .badge {
  color: #428bca;
  background-color: #ffffff;
}
.nav-wizard > li.disabled > a {
  color: #999999;
}
.nav-wizard > li.disabled > a:hover,
.nav-wizard > li.disabled > a:focus {
  color: #999999;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
.nav-wizard.nav-justified > li {
  float: none;
}
.nav-wizard.nav-justified > li > a {
  padding: 10px 15px;
}
@media (max-width: 768px) {
  .nav-wizard.nav-justified > li > a {
    border-radius: 4px;
    margin-right: 0;
  }
  .nav-wizard.nav-justified > li > a:before,
  .nav-wizard.nav-justified > li > a:after {
    border: none !important;
  }
}

To test I created a very simple HTML:

div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
          <ul class="nav nav-wizard">
              <li class="active"><a href="#" onclick="altera_form(1);" >Idioma</a></li>
              <li><a href="#" onclick="altera_form(2);" >Profile</a></li>
              <li><a href="#" onclick="altera_form(3);" >NIF</a></li>
          </ul>
      </div>

      <div id="modal-body" class="modal-body">
          <!-- AQUI FICAM OS CAMPOS DO FORMULÁRIO -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div> 
  </div>
</div>

O Javascript:

<script type="text/javascript">
          //cria o model
          $('#myModal').modal({
              backdrop: 'static',
              keyboard: false
          });

          //Ativa a TAB selecionada
          $('.nav-wizard').on('click','li', function(){
              $(this).addClass('active').siblings().removeClass('active');
          });

          //função para alterar o conteúdo do modal-body
          function altera_form(num) {
              var elems = document.getElementsByTagName('li');

              for (i in elems) {
                    if(elems[i].className=='active')

                        document.getElementById('modal-body').innerHTML = "ola"+num;

               }
          }
</script>

How can I pass (via Javascript or otherwise) the PHP form fields whenever I change TAB’s Wizard?

Sample image:

Note: I added the Bootstrap tag because I’m working with Bootstrap and if anyone knows a better way to do that.

Answer 1

What I did was create 3 div's hidden content. And depending on the step show only the div and enable and disable the buttons that interest me.

HTML:

<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>

Jquery:

$(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");
    }
}