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

如何使用PHP Ajax在使用HTML表单提交多个数据时使用百分比添加进度条。</ p>
</ div>

展开原文

原文

How can I add a progress bar with the percentage when submitting multiple data with HTML form by using PHP Ajax.

douya7282
douya7282 你能举个例子吗?
大约 2 年之前 回复
douxianliu6756
douxianliu6756 1/创建进度条:一个容器+一个div表示进度,2/提交数据calcul后用户发送的数据百分比并更改进度条的宽度。例如。10个问题,用户发送5个问题的数据->进度条是50%。
大约 2 年之前 回复

1个回答

Here is an example :

$(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>

For your case :

  • replace each checkbox by one of your form
  • replace the jQuery trigger by "on submit" and then send the data using Ajax
  • in your php (where your send the Ajax data) calcul the % of question user has send
  • in your Ajax success part : change the progress bar width according to the % of data

Is it clear enought? Hope it help, but can't help you more since you provide no code !

</div>
dougu2240
dougu2240 谢谢让我试试
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐