进度条以步骤答案的形式

Question

当我点击调查中的下一个按钮时，我尝试使我的进度条步骤。 但我想我在实际代码中遗漏了一些东西。 我的调查由滑块组成，可在单击按钮后在输出中验证答案。 如果有帮助可能会很棒，谢谢！

  

这是我的HTML：

<form  class="form" name="frm" method="post" action="quest_A_rec.asp" onKeydown="testClavier();" >
          <input name="ID" value="<%=Data_Questions("ID_Resultat")%>" type="hidden">
          <div class="col-sm-12">
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent" id="question">
                <div class="left">
                  <p class="requestBig"><%=Data_Questions("LibQuestion")%></p>
                </div>
                <output><%=initOutput%></output>
              </div>
            </div>
          </div>
          <div class="mySlider">
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent">
                <div class="col-sm-3" id="jamais">
                  <p><%=session("LibLow")%><br />
                    |</p>
                </div>
              </div>
            </div>
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent">
                <input type="range" value="<%=valBornes("valMin")-1%>" step="1" min="<%=valBornes("valMin")%>" max="<%=valBornes("valMax")%>">
                <br />
              </div>
            </div>
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent">
                <div class="col-sm-3" id="toujours">
                  <p>|<br />
                    <%=libBornes("libHigh")%></p>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="row">
          <div class="col-sm-4 col-sm-offset-2">
            <p class="avancement"><%=GetTexteFBA("avancement")%></p>
          </div>
          <div class="col-sm-5">
       <div class="progress">


<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 boutons">
                <div class="col-sm-6 col-sm-push-6">
                <button type="button" class="btn myBtnRight" href="<%=urlNext%>" onClick="document.frm.submit();" id="btnNext"><%=GetTexteFBA("btn_valider")%><span class="iconInsideButtonRight icon-chevron-right"></span></button>
                <button type="button" class="action submit btn myBtnRight">Submit</button>
                </div>
                <div class="col-sm-6 col-sm-pull-6">
                <button type="button" class="btn myBtnnobs" href="#"  role="button" onClick="document.frm_nobs.submit();"><%=GetTexteFBA("btn_nobs")%></button>

  

这是我的JS

    $(document).ready(function(){
    var current = 1;

    widget      = $(".step");
    btnnext     = $(".myBtnRight");
    //btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length){
            // Check validation
            if($(".form").valid()){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })
    /*
    // Back button click action
    btnback.click(function(){
        if(current > 1){
            current = current - 2;
            if(current < widget.length){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })
    */
    // Submit button click
    btnsubmit.click(function(){
        alert("Submit button clicked");
    });

    $('.form').validate({ // initialize plugin
        ignore:":not(:visible)",            
        rules: {
            name : "required"
        },
    });

});

// Change progress bar action
setProgress = function(currstep){
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar").css("width",percent+"%").html(percent+"%");      
}

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();
    if(current > 1) btnback.show();
    if (current == limit) { 
        btnnext.hide(); 
        btnsubmit.show();
    }
}