javascript - Jquery - multi-step form progress bar using unordered list items to show completed steps -

javascript - Jquery - multi-step form progress bar using unordered list items to show completed steps -

i trying build multi-step form jquery , having problems progress bar.

my progress bar unordered list list items supposed highlighted reddish when user presses next. but, when press previous list item should lose highlighted red. close solution. have first 2 options working, when go lastly step not seeing highlighting.

here fiddle: http://jsfiddle.net/ktlcfzhe/

jquery: $(document).ready(function () {

var current_fs = $('.current'); //current fieldset $('.next').click(function () { $('.current').removeclass('current').hide().next().show().addclass('current'); if ($(this).parent('.field1')) { $('#progressbar li').next('.second').addclass('active'); } else if ($(this).parent('.field2')) { $('#progressbar li').next('.last').addclass('active'); } else if ($(this).parent('.field3')) { $('#progressbar li').addclass('active'); } }); $('.previous').click(function () { $('.current').removeclass('current').hide().prev().show().addclass('current'); if ($(this).parent('.field3')) { $('#progressbar li').prev('.last').removeclass('active'); } else if ($(this).parent('.field2')) { $('#progressbar li').prev('.second').removeclass('active'); } }); });

html:

<form id="helpdeskform" action="process.php" method="post"> <!-- progress bar --> <ul id="progressbar"> <li class="active first">identify yourself</li> <li class="second">describe request</li> <li class="last">confirm , submit</li> </ul> <fieldset class="field1 current"> <h2>identify yourself</h2> <p> <label for="fname"> <input type="text" value="" name="" id="" placeholder="first name" /> </label> </p> <p> <label for="lname"> <input type="text" value="" name="" id="" placeholder="last name" /> </label> </p> <p> <label for="next"> <input type="button" name="next" class="next action-button" value="next" /> </label> </p> </fieldset> <fieldset class="field2"> <h2>describe request</h2> <p> <label for=""> <input type="text" value="" name="" id="" placeholder="subject" /> </label> </p> <p> <label for=""> <textarea style="font-family: arial, veranda, sans serif" name="" id="" cols="30" rows="10"></textarea> </label> </p> <p style="float:left;"> <label for="previous"> <input type="button" name="previous" class="previous action-button" value="previous" /> </label> </p> <p style="float:left; padding-left: 10px;"> <label for="next"> <input type="button" name="next" class="next action-button" value="next" /> </label> </p> </fieldset> <fieldset class="field3"> <h2>confirm , submit</h2> <p> <label for="fname"> <input type="text" value="" name="" id="" placeholder="" /> </label> </p> <p> <label for=""> <input type="text" value="" name="" id="" placeholder="" /> </label> </p> <p> <label for=""> <input type="text" value="" name="" id="" placeholder="" /> </label> </p> <p> <label for=""> <input type="text" value="" name="" id="" placeholder="" /> </label> </p> <p style="float:left;"> <label for="previous"> <input type="button" name="previous" class="previous action-button" value="previous" /> </label> </p> <p style="float:left; padding-left: 10px;"> <label for="submit"> <input type="button" value="submit" name="submit" id="submit" /> </label> </p> </fieldset> </form>

css:

/*form styles*/ #helpdeskform { text-align: center; position: relative; } /*hide except first fieldset*/ #helpdeskform .field2, .field3 { display: none; } /*inputs*/ #helpdeskform input, #helpdeskform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; box-sizing: border-box; color: #2c3e50; font-size: 13px; } /*buttons*/ #helpdeskform .action-button { width: 100px; font-weight: bold; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #helpdeskform .action-button:hover, #msform .action-button:focus { box-shadow: 0 0 0 2px white, 0 0 0 3px #900; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; counter-reset: step; /*css counters number steps*/ } #progressbar li { list-style-type: none; text-transform: uppercase; font-size: 10px; width: 30%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: white; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ #progressbar li:after { content:''; width: 100%; height: 2px; background: white; position: absolute; left: -50%; top: 9px; z-index: -1; /*put behind numbers*/ } #progressbar li:first-child:after { content: none; /*connector not needed before first step*/ } /*marking active/completed steps nhlbi red*/ /*the number of step , connector before = red*/ #progressbar li.active:before, #progressbar li.active:after { background: #900; color: white; }

all comments appreciated. used http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar guide form. there jquery complex me.

here working illustration http://jsfiddle.net/ktlcfzhe/1/

jquery

$('.next').click(function () { $('.current').removeclass('current').hide().next().show().addclass('current'); $('#progressbar li.active').next().addclass('active'); }); $('.previous').click(function () { $('.current').removeclass('current').hide().prev().show().addclass('current'); $('#progressbar li.active').removeclass('active').prev().addclass('active'); });

javascript jquery html css forms