pedz pedz - 2 months ago 12
jQuery Question

How to setup a jQuery step-by-step form with disabled fields

I am attempting to setup a step by step form which disables all next fields until the current one is completed. Then it will mark all completed fields by applying a class. I have it half setup in that I can activate the fields one by one in the correct order and apply the class on completion.

My issue comes when I have to back track through the form. For example if the previous field is changed back to an empty value again the next fields should all disable. This only seems to be occurring at the moment if I deactivate the first field but not the following fields.

I am also having another issue where if I disable the first field, then apply a value again, the form should mark be marked as complete and all existing completed fields should also be marked as completing leading me to the next incompleted field but it's actually waiting on me to change the next field again in order to proceed.

I have attached an example. If you could provide any help that would be appreciated.



jQuery(function($) {


var currentStep = $('.tq-form-step');
currentStep.addClass('tq-form-step--disabled');
currentStep.first().removeClass('tq-form-step--disabled');

$(currentStep).change(function() {
if ($('.tq-step-form--input').val() != '' ) {
$(this).addClass('tq-form-step--completed');
$(this).next().removeClass('tq-form-step--disabled');

} else {
$('.tq-form-step').removeClass('tq-form-step--completed');
$('.tq-form-step').next().addClass('tq-form-step--disabled');
}

});

var fieldSet = $('.tq-form-fieldset__wrapper');

$(fieldSet).ready(function() {
if($('.tq-step-form--hidden')) {
$('.tq-step-form--hidden').parent('.tq-form-fieldset__wrapper').hide();
} else if ($('.tq-step-form--hidden').prev('.tq-step-form--input').val() != '') {
console.log('text');
$('.tq-step-form--hidden').parent('.tq-form-fieldset__wrapper').show();
}
});

});

.tq-icon-list__image {
display: inline-block;
background: rgba(238,238,238,1);
-webkit-transition: background 0.5s, color 0.2s;
-moz-transition: background 0.5s, color 0.2s;
transition: background 0.5s, color 0.2s;
border-radius: 50%;
width: 77px;
height: 77px;
line-height: 77px;
margin-bottom: 10px;
}



.tq-form-step select {
width: 100%;
box-shadow: none;
position: relative;
z-index: 1;
border: 2px solid #6b1f99;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

.tq-form-step--disabled {
opacity: 0.5;
pointer-events: none;
}

.tq-form-step__number-container {
position: relative;
}

.tq-form-step__connecting-line {
margin-right: 30px;
padding-top: 28px;
position: relative;
z-index: 1;
}



.tq-form-step__form-fields {
padding-bottom: 15px;
}

.tq-form-step:nth-last-child(2) .tq-form-step__connecting-line:after {
border-right: 0;
}

.tq-form-step__number {
width: 60px;
height: 60px;
color: #6b1f99;
font-size: 1.5em;
text-align: center;
z-index: 2;
border: 4px solid #6b1f99;
border-radius: 50%;
background-color: #f7f7f7;
-webkit-transition : border 500ms ease-out;
-moz-transition : border 500ms ease-out;
-o-transition : border 500ms ease-in;
transition : border 500ms ease-out;
display: table;
z-index: 2;
position: relative;
}

.tq-step-form--hidden {
display: block;
}

.tq-form-fieldset .tq-form-fieldset__wrapper {
margin: 30px 0 0 30px;
}

.tq-form-fieldset .tq-form-fieldset__wrapper:first-child:before {
display: none;
}

.tq-form-fieldset .tq-form-fieldset__wrapper:before {
border-bottom: 2px dotted #b18ac7;
border-left: 2px dotted #b18ac7;
border-radius: 5px;
z-index: 0;
content: "";
position: absolute;
font-size: 2em;
height: 64px;
width: 35px;
left: 25px;
margin-top: -32px;
}

.tq-form-fieldset .tq-form-fieldset__wrapper:first-child {
margin: 0;
}

.tq-form-step__number span {
display: table-cell;
height: 100%;
vertical-align: middle;
}

.tq-form-step--completed select, .tq-form-step--disabled select {
border: 1px solid #bdbdbd;
box-shadow: none;
}


.tq-form-step--completed .tq-form-step__number {
border: 0;
background-color: #b18ac7;
border: 4px solid #b18ac7;
color: #fff;
}

.tq-form-step.tq-form-step--completed label, .tq-form-step.tq-form-step--disabled label {
font-size: 0.875em;
font-weight: 200;
}

.tq-form-step--completed .tq-form-step__connecting-line:after {
border-right: 3px solid #b18ac7;
}

.tq-form-step--disabled .tq-form-step__number {
border: 4px solid #cccccc;
color: #ccc;
background-color: #f7f7f7;
}

.tq-form-step__submit {
text-align: right;
}

.tq-form-step label {
font-weight: 400;
font-size: 1.125em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="tq-apply-now">

<div class="row tq-form-step" id="step1">
<div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line">
<div class="tq-form-step__number"><span>1</span></div>
</div>
<div class="col-md-8 tq-equal-height-container tq-form-step__form-fields">
<label for="how-to-study">Choose</label><br>
<select class="tq-step-form--input">
<option value="" selected>Choose</option>
<option value="Test">Test</option>
</select>
</div>
</div>

<div class="row tq-form-step" id="step2">
<div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line">
<div class="tq-form-step__number"><span>2</span></div>
</div>
<div class="col-md-8 tq-equal-height-container tq-form-step__form-fields">
<label for="where-to-study">Choose</label><br>
<div class="tq-form-fieldset">
<div class="tq-form-fieldset__wrapper">
<select class="tq-step-form--input">
<option value="" selected>Choose</option>
<option value="Here">Here</option>
</select>
</div>
<div class="tq-form-fieldset__wrapper">
<select class="tq-step-form--hidden">
<option value="" selected>Select</option>
<option value="Hills">Hills</option>
</select>
</div>
</div>
</div>
</div>

<div class="row tq-form-step" id="step3">
<div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line">
<div class="tq-form-step__number"><span>3</span></div>
</div>
<div class="col-md-8 tq-equal-height-container tq-form-step__form-fields">
<label for="workload">Choose</label><br>
<select class="tq-step-form--input">
<option value="" selected>Choose</option>
<option value="Test">Test</option>
</select>
</div>
</div>

<div class="row tq-form-step" id="step4">
<div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line">
<div class="tq-form-step__number"><span>4</span></div>
</div>
<div class="col-md-8 tq-equal-height-container tq-form-step__form-fields">
<label for="start-date">Choose</label><br>
<select class="tq-step-form--input">
<option value="" selected>Choose</option>
<option value="27 January 2018">27 January 2018</option>
</select>
</div>
</div>

<div class="row tq-form-step" id="step5">
<div class="col-md-1 tq-equal-height-container">
</div>
<div class="col-md-8 tq-equal-height-container tq-form-step__form-fields">
<div class="tq-form-step__submit">
<input type="submit" value="Proceed with application" disabled class="tq-apply-now-step tq-button tq-button--red tq-step-form--input" id="tq-apply-now-step5">
</div>
</div>
</div>

</form>

</div>




Answer Source

I had create a jsfiddle, have a look if this is the one that you try to achieve

updated version https://jsfiddle.net/0mchrm9m/1/

 function Sample(){
     $('div[id^="step"]').each(function(i, v){
        var $this = $(this);
        var $icon = $this.first('div');
        if ($icon.hasClass('tq-form-step--disabled')){
            //do whatever for disabled class
        }else{
          $icon.nextAll('div').removeClass('tq-form-step--disabled'); //remove all the disabled class 1st
          if ($icon.find('select').prop('selectedIndex') === 0){ //check if the 1st selection index is 0
            $icon.removeClass('tq-form-step--completed'); //remove current class 
            $icon.nextAll('div').addClass('tq-form-step--disabled'); //add disabled to all class that can be found next
          }else{
            $icon.addClass('tq-form-step--completed'); //else make it as completed
          }
        }
      });
    }

above code quite self explain, if you not understand, do let me know

you can call the function in

 $(currentStep).change(function() {  
    /*if ($('.tq-step-form--input').val() != '' ) {
        $(this).addClass('tq-form-step--completed');
        $(this).next().removeClass('tq-form-step--disabled');

    } else {
      $('.tq-form-step').removeClass('tq-form-step--completed');
      $('.tq-form-step').next().addClass('tq-form-step--disabled');
    }   */ //remove the code to fix the step 1 issue
    Sample(); //call it here
  });

this code is not optimize yet, you can optimize it