<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> <p>Step 1</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>Step 2</p> </div> <div class="stepwizard-step"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> <p>Step 3</p> </div> </div> </div> <form role="form"> <div class="row setup-content" id="step-1"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 1</h3> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Cégnév:</span> <input type="text" required="required" autocomplete="off" onblur="UgyfelComplete(this)" onChange="UgyfelComplete(this)" data-provide="typeahead" id="cegnevdata" name="cegnevdata" class="form-control" placeholder="cégnév" aria-describedby="basic-addon1" /> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Cégjegyzékszám:</span> <input type="text" required="required" class="form-control" id="cegjegyzekdata" name="cegjegyzek" placeholder="cégjegyzékszám" aria-describedby="basic-addon1" /> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Cím:</span> <input type="text" required="required" class="form-control" placeholder="cím" id="cimdata" name="cim" aria-describedby="basic-addon1" /> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Képviselő neve:</span> <input type="text" required="required" class="form-control" id="kepviselondata" name="kepviselon" placeholder="képviselő neve" aria-describedby="basic-addon1" /> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Képviselő beosztása:</span> <input type="text" required="required" class="form-control" id="kepviselobdata" name="kepviselob" placeholder="képviselő beosztása" aria-describedby="basic-addon1" /> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">E-mail cím:</span> <input type="text" required="required" class="form-control" id="emaildata" name="email" placeholder="e-mail" aria-describedby="basic-addon1" /> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Telefon 1:</span> <input type="text" class="form-control" required="required" id="tel1data" name="tel1" placeholder="telefon 1" aria-describedby="basic-addon1" /> <span class="input-group-addon" id="basic-addon1">Telefon 2:</span> <input type="text" class="form-control" id="tel2data" name="tel2" placeholder="telefon 2" aria-describedby="basic-addon1" /> </div> <br> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Tovább</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 2</h3> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Megnevezés:</span> <input type="text" autocomplete="off" onblur="EszkozComplete(this)" onChange="EszkozComplete(this)" class="form-control" data-provide="typeahead" id="megnevezesdata" name="megnevezesdata" placeholder="megnevezés" aria-describedby="basic-addon1"> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">p/n:</span> <input type="text" class="form-control" id="pndata" name="pn" placeholder="p/n" aria-describedby="basic-addon1"> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">s/n:</span> <input type="text" class="form-control" id="sndata" name="sn" placeholder="s/n" aria-describedby="basic-addon1"> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Gyártási év:</span> <input type="text" class="form-control" id="gyartasdata" name="gyartas" placeholder="gyártási év" aria-describedby="basic-addon1"> </div> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">Érték:</span> <input type="text" class="form-control" id="ertekdata" name="ertek" placeholder="érték" aria-describedby="basic-addon1" > </div> <br> <button class="btn btn-info btn-lg pull-right" onclick="add()" type="button" >Hozzáad</button> </div> <div class="col-md-6"> <div class="device-data"> <table class="table table-hover" id="device-table"> <tbody> </tbody> </table> </div> </div> <input type="hidden" required="required" /> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 3</h3> <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button> </div> </div> </div> </form> </div>

body{ margin-top:40px; } .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; }

$(document).ready(function () { var navListItems = $('div.setup-panel div a'), allWells = $('.setup-content'), allNextBtn = $('.nextBtn'); allWells.hide(); navListItems.click(function (e) { e.preventDefault(); var $target = $($(this).attr('href')), $item = $(this); if (!$item.hasClass('disabled')) { navListItems.removeClass('btn-primary').addClass('btn-default'); $item.addClass('btn-primary'); allWells.hide(); $target.show(); $target.find('input:eq(0)').focus(); } }); allNextBtn.click(function(){ var curStep = $(this).closest(".setup-content"), curStepBtn = curStep.attr("id"), nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), curInputs = curStep.find("input[type='text'],input[type='url']"), isValid = true; $(".input-group").removeClass("has-error"); for(var i=0; i<curInputs.length; i++){ if (!curInputs[i].validity.valid){ isValid = false; $(curInputs[i]).closest(".input-group").addClass("has-error"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); });