How can I add a progress bar with the percentage when submitting multiple data with HTML form by using PHP Ajax.
1条回答
- doutuichan2681 2018-05-28 12:53关注
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>
解决 无用评论 打赏 举报
悬赏问题
- ¥100 求数学坐标画圆以及直线的算法
- ¥100 c语言,请帮蒟蒻写一个题的范例作参考
- ¥15 名为“Product”的列已属于此 DataTable
- ¥15 安卓adb backup备份应用数据失败
- ¥15 eclipse运行项目时遇到的问题
- ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
- ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
- ¥15 自己瞎改改,结果现在又运行不了了
- ¥15 链式存储应该如何解决
- ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站