бар HTML5 Прогресс с прогрессированием полевого уровня

Question

Я пытаюсь создать на основе прогресс бар HTML5 с тремя шагами. Цель, которую я хочу достичь, - это прогрессия на уровне поля, а также прогрессия на уровне шагов. Таким образом, весь индикатор выполнения можно разделить на две секции, где первая секция равна 50%, а вторая - 50%, а если имеется всего 20 полей, то после ввода каждого поля индикатор выполнения перемещается на 5%. Поскольку хотят реализовать это а также включать изображения на этих этапах. Это как-то не получается.

  <div id="tmm-form-wizard" class="container substrate"> 



       <div class="row stage-container"> 

        <div class="stage tmm-current col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
         <div class="stage-header personaldetails"></div> 
         <div class="stage-content"> 
          <h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Personal Details</h3> 

         </div> 
        </div><!--/ .stage--> 

        <div class="stage col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
         <div class="stage-header planselection"></div> 

         <div class="stage-content"> 
          <h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Plan Selection</h3> 

         </div> 
        </div><!--/ .stage--> 

        <div class="stage col-lg-4 col-md-4 col-sm-4 col-xs-4 norightbar"> 
         <div class="stage-header reviewpay"></div> 
         <div class="stage-content"> 
          <h3 class="stage-title angel_font" style="color:#ffffff !important; font-size:14px !important;">Review and Pay</h3> 

         </div> 
        </div><!--/ .stage--> 




       </div><!--/ .row--> 




      </div><!--/ .container--> 

    </div> <!--LOGO, NEED HELP AND PROGRESS CONTAINER ENDS--> 

    </nav><!--FIXED NAVIGATION ENDS--> 

  <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 

      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign"> 
       <form action="" method="post" id="step1_form" name="step1_form"> 

        <span class="angel_font pan_no">PAN Number</span> 
         <input type="text" class="form-control input_outline" placeholder="Type your PAN Number (eg: BODPM4264E)" id="pan_text" name="pan_text" onblur="checkField(this)" maxlength="10" style="text-transform:uppercase;"/> 
        <p class="angel_font" id="err_msgpan">PAN card must contain a mix of Alphabets (A-Z) and Numbers (0-9)</p> 
      </div> 

      <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 


      </div> <!--PAN NUM ENDS--> 


     <div class="row"> <!--DOB TEXT STARTS--> 

      <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 

      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 lalign"> 


        <span class="angel_font dob">Date of Birth (as per PAN card)</span> 

      </div> 

      <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 


     </div> <!--DOB TEXT ENDS-->  


     <div class="row"> <!--DOB FIELD STARTS--> 

      <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 

      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
      <input type="tel" class="input_outline" placeholder="DD" id="dd_text" name="dd_text" maxlength="2" onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/> 
      <input type="tel" class="input_outline" placeholder="MM" id="mm_text" name="mm_text" maxlength="2" onkeypress="return isNumber(event)" size="4" onblur="isEmpty(this)"/> 
      <input type="tel" class="input_outline" placeholder="YYYY" id="yyyy_text" name="yyyy_text" maxlength="4" onkeypress="return isNumber(event)" size="6" onblur="isEmpty(this)"/> 
      </div> 

      <div class="col-lg-3 col-md-3 col-sm-3 hidden-xs"></div> 


     </div> <!--DOB FIELD ENDS--> 








/* Stage */ 
    #tmm-form-wizard .stage:before, 
    #tmm-form-wizard .stage:after      { background-color: #ffffff; } /* Set color for STAGE LINE */ 
    #tmm-form-wizard .stage-header      { background-color: #d8e3ee;; } /* Set background color for STAGE HEADER */ 
    #tmm-form-wizard .stage-title      { color: #464646; }    /* Set color for STAGE TITLE */ 
    #tmm-form-wizard .stage-info      { color: #a8a8a8;}    /* Set color for STAGE INFO */ 
    /* end Stage */ 

    /* Current stage */ 
    #tmm-form-wizard .stage.tmm-current .stage-header  { background-color: #fabf00; } /* Set background color for CURRENT STAGE */ 
    #tmm-form-wizard .stage.tmm-current .stage-header.head-number { color: #fff; }    /* Set color for CURRENT STAGE TEXT */ 
    #tmm-form-wizard .stage.tmm-current:after, 
    #tmm-form-wizard .stage.tmm-current:before    { background-color: #fabf00; } /* Set background color for CURRENT STAGE LINE */ 
    /* end Current stage */ 

    /* Success stage */ 
    #tmm-form-wizard .stage.tmm-success .stage-header  { background-color: #00a33e; } /* Set background color for SUCCESS STAGE */ 
    #tmm-form-wizard .stage.tmm-success .stage-header.head-number { color: #3c611b; }    /* Set color for SUCCESS STAGE TEXT */ 
    #tmm-form-wizard .stage.tmm-success:after, 
    #tmm-form-wizard .stage.tmm-success:before    { background-color: #fabf00; } /* Set background color for SUCCESS STAGE LINE */ 
    #tmm-form-wizard .stage.tmm-success .stage-header:after { color: #00a33e; }    /* Set color for SUCCESS STAGE ICON */ 
    /* end Success stage */ 


    #tmm-form-wizard.substrate       { background-color: transparent !important; }  /* Set background color for FORM SUBSTRATE */ 

Answer 1

Если я правильно понял ваш вопрос, который вы хотите изменить значение прогресса в соответствии с какой-либо другой формы поля, уважая ли эти поля заполнены или нет. Попробуйте взглянуть на этот образец:

$(function() { 
 
\t $("input[type='text']").change(function() { 
 
    var progress = parseInt($("progress").val()); 
 
\t \t var val = $(this).val(); 
 
    // Change the progress value according to the value in the input field 
 
    $("progress").val(val.length > 0 ? (progress + 10) : (progress - 10)); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<progress value="0" max="100"></progress> 
 
<br/> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" /> 
 
<input type="text" />

Я использовал прогресс HTML5, но вы можете использовать свои собственные, и я обрабатывать изменения события всех полей ввода на странице. Если какое-либо поле изменено и его значение не пусто, я обновляю значение прогресса до 100%.

Answer 2

Вам нужно выполнить этот алгоритм:

elements with content/# of elements 

Всякий раз, когда элемент изменяется.

Чтобы сделать это, вам нужно «собрать» каждый вход так, что при изменении его значения, индикатор обновляется:

// When the document is ready 
$(function() { 

    // Find all the input elements are group them 
    // If you are using other input types besides textboxes, update the selector 
    var $inputs = $("input[type='text']"); 

    // Find out how many there are: 
    var amount = $inputs.length; 

    // Wire up each input to a callback function for 
    // when their value gets changed 
    $inputs.change(function() { 
     var progress = parseInt($("progress").val()); 

     // Loop through all the inputs to see how many have values 
     var count = 0; 
     $.each(inputs,function(index, value){ 
      if(value !== ""){ 
       count++; 
      } 
     }); 

    // Calculate the progress % 
    var prog = parseInt((count/amount) * 100); 
    $("progress").val(prog); 
    }); 
});