Blake Connally Blake Connally - 1 month ago 12
HTML Question

JavaScript Fading Slides Out, Fixing Buttons

I've been pounding my head for the past 3-4 hours trying to figure out the best solution to this. I have a form and at the beginning you can select which slides of the form you want to fill out.enter image description here

Once any of these are selected it will show a section for that selection. For example if I selected home
enter image description here

What is the best method to show the slides based on the checkboxes? Also, if you notice I have a next button on the bottom of each slide, how can I change that automatically to be replaced with the next div item?

My current code to check the selected boxes and insert into an array is

var arr = [];
function validate() {
if (document.getElementById('home-form').checked) {
arr.push("home");
}
if (document.getElementById('auto-form').checked) {
arr.push("auto");
}
if (document.getElementById('life-form').checked) {
arr.push("life");
}
if (document.getElementById('flood-form').checked) {
arr.push("flood");
}
if (document.getElementById('umbrella-form').checked) {
arr.push("umbrella");
}
if (document.getElementById('renters-form').checked) {
arr.push("renters");
}
if (document.getElementById('landlord-form').checked) {
arr.push("landlord");
}
}


Thank you for any help or recommendations.

Answer

Just knocked this up together for you: https://jsfiddle.net/r344Lygt/2/

When the start button is clicked, the checked checkboxes are iterated over and added to the selectedSteps array.

JavaScript

var selectedSteps = [];
var currentStep = 0;

$('.start').on('click',function(){
  $('.nav input').each(function(){
    var i=0;
    if($(this).prop('checked')){ 
      selectedSteps.push($(this).attr('id'));
      i++;
    }
  });
  $('.splash').hide();
  goToForm(0);
});

$('[data-next]').on('click',function(){
  if(currentStep < (selectedSteps.length-1)) {
    currentStep++;
    goToForm(currentStep);
  } else {
    $('[data-form]').hide();
    $('[data-form="complete"]').show();
  }
});

function goToForm(step){
  $('[data-form]').hide();
  $('[data-form="'+selectedSteps[step]+'"]').show();
  $('.status span').css('width', 100 / selectedSteps.length * (currentStep+1) +'%');
}