输入表单时的进度条动画

Question

我想在有人填写我的表单时，进度条宽度增加20。

   <form  action="class/action.php" method="post">
     <div class="col-sm-3">
        <div class="form-group label-floating">
            <label class="control-label">Name </label>
            <input id="1" type="text" class="form-control pgbar" name="name" required>
        </div>
    </div>
   </form>

   <!-- Progress bar -->
      <div class="container">
        <div class="row">
            <div class="col-md-offset-6">
                 <div class="progress progress-line-primary ">
                     <div class="progress-bar" id="progressbar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 1%;"> </div>
                  </div>
             </div>
          </div>
      </div>

  //javascript      
$( "#progressbar" ).progressbar({
      value: 0
    });

$(".pgbar").change(function() {
    var pbVal = 0;
    if ($("#1").val().length > 0) pbVal += 20;
    if ($("#2").val().length > 0) pbVal += 20;
    if ($("#3").val().length > 0) pbVal += 20;
    if ($("#4").val().length > 0) pbVal += 20;
    if ($("#5").val().length > 0) pbVal += 20;
    $( "#progressbar" ).progressbar( "option", "value", pbVal );
    return false;
});

我不确定我的 html 或 javascript 是否有问题。感谢您的帮助，不胜感激。

Answer 1

希望您已经包含了主题 CSS 文件，以便您可以在第一时间看到您的进度条（代码如下）。

而且，说到风格，你的style 默认设置为1%。即使它有效，你也永远不会看到它。 width 不一定是100%，但它必须足够大才能看到。

接下来，保留非空元素的计数会更容易，不一定是最终的进度条值，因为如果您稍后添加响应或删除响应，您的数学就会出错。

然后您只需将非空字段的数量除以字段的数量并将其设置为value。您将value 设置为option，但根据docs，这不是这样做的：

( ".selector" ).progressbar( "value", 50 );

此外，循环每个字段并检查其val() 是否为非空比单独测试每个字段更简单（并且更具可扩展性）。

---

这是一个去掉不相关内容的例子：

$(function() {
  $("#progressbar").progressbar({ value: 0  });
  
  // Apply the styling that is defined in the linked CSS stylesheet
  $("#progressbar").progressbar( "option", "classes.ui-progressbar", "highlight" );
});

// Us the ".on()" method instead of "change" as recommended by jQuery
$("input").on("change", function() {
  var count = 0;  // We won't be storing a final value, just a count of non-empty fields
  
  // Loop through the fields (better than testing one-by-one)
  $("input").each(function(idx, input){
    // Test the value for non-empty and increase the count if empty
    if($(input).val() !== "") { count++ };
  }); 
  
  // Now you can calculate the whole number representation of the % of completed fields
  var pbVal = (count / $("input").length) * 100;
  
  // Set the progress bar to the value
  $("#progressbar").progressbar("value", pbVal);
  
  // EXTRA CREDIT: When the progress = 100%, enable the submit button
  $("button").prop("disabled", pbVal !== 100);
});

input { display: block; }
#progressbar { display:inline-block; width:75%; border-radius:25px; }
div { margin:1em 0;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- Make sure you have the CSS linked to for visibility and styling -->
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
<!-- **************************************************************************** -->

<form  action="class/action.php" method="post">
  <input id="1">
  <input id="2">
  <input id="3">
  <input id="4">
  <input id="5">            
</form>

<!-- Progress bar -->
<div>0%<span id="progressbar"></span>100%</div>
<button disabled>Submit</button>

Answer 2

我不确定这个问题，因为我看不到一个有效的例子。这是一个可行的解决方案。

$("#progressbar").progressbar({
  value: 0
});
var $inputs = $(".form-group").children("input");
var totalInputs = $inputs.length;

  $inputs.on('keyup', function() {
    var pbVal = 0;
    $inputs.each(function(){
      if($(this).val().length > 0) pbVal ++;
    });

    $("#progressbar").progressbar("option", "value", (pbVal/totalInputs)*100)
  });

.container{
  width: 100%
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<form action="class/action.php" method="post">
  <div class="col-sm-3">
    <div class="form-group label-floating">
      <label class="control-label">1</label>
      <input id="input-1" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">2</label>
      <input id="input-2" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">3</label>
      <input id="input-3" type="text" class="form-control pgbar" name="name" required>
      <label class="control-label">4</label>
      <input id="input-4" type="text" class="form-control pgbar" name="name" required>
    </div>
  </div>
</form>

<!-- Progress bar -->
<div class="container">
  <div class="row">
    <div class="col-md-offset-6">
      <div class="progress progress-line-primary ">
        <div class="progress-bar" id="progressbar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> </div>
      </div>
    </div>
  </div>
</div>