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>
解决 无用评论 打赏 举报