如何在提交多个数据时显示百分比进度条答案

【问题标题】：How to show percentage progress bar while submit multiple data如何在提交多个数据时显示百分比进度条
【发布时间】：2018-05-28 12:22:27
【问题描述】：

使用 PHP Ajax 以 HTML 表单提交多个数据时，如何添加带有百分比的进度条。

【问题讨论】：

1/ 创建进度条：一个容器 + 一个表示进度的 div，2/ 提交数据后，计算用户发送的数据百分比并更改进度条的宽度.例如。 10 个问题，用户发送 5 个问题的数据 -> 进度条为 50%。
你能举个例子吗？

标签： php ajax progress-bar form-submit

【解决方案1】：

这是一个例子：

$(document).ready(function() {
  $("input").on("change", function() {
    var size = $("input:checked").length;
    var progress = size * 10 + "%";
    
    $(".progress").css("width", progress);
  });
});

.container {
  width: 200px;
  height: 30px;
  border: 1px solid black;
}
.progress {
  height: 100%;
  width: 0;
  background-color: red;
  transition: 0.4s ease;
}
.block {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="progress"></div>
</div>

<form>
<div class="block">
  <input id="one"   name="one"   type="checkbox"><label for="one">One</label></div>
<div class="block">
  <input id="two"   name="two"   type="checkbox"><label for="two">Two</label>
</div>
<div class="block">
  <input id="three" name="three" type="checkbox"><label for="three">Three</label>
</div>
<div class="block">
  <input id="four"  name="four"  type="checkbox"><label for="four">Four</label>
</div>
<div class="block">
  <input id="five"  name="five"  type="checkbox"><label for="five">Five</label>
</div>
<div class="block">
  <input id="six"   name="six"   type="checkbox"><label for="six">Six</label>
</div>
<div class="block">
  <input id="seven" name="seven" type="checkbox"><label for="seven">Seven</label>
</div>
<div class="block">
  <input id="eight" name="eight" type="checkbox"><label for="eight">Eight</label>
</div>
<div class="block">
  <input id="nine"  name="nine"  type="checkbox"><label for="nine">Nine</label>
</div>
<div class="block">
  <input id="ten"   name="ten"   type="checkbox"><label for="ten">Ten</label>
</div>
</form>

对于您的情况：

将每个复选框替换为您的表单之一
将 jQuery 触发器替换为“on submit”，然后使用 Ajax 发送数据
在您的 php（发送 Ajax 数据的位置）中计算用户已发送问题的百分比
在您的 Ajax 成功部分：根据数据百分比更改进度条宽度

够清楚吗？希望对您有所帮助，但由于您没有提供代码，因此无法为您提供更多帮助！

【讨论】：