douye9822 2018-05-28 12:22
浏览 473

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

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>
    
    评论

报告相同问题?

悬赏问题

  • ¥20 SQL server表计算问题
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题
  • ¥20 Oracle替换.dbf文件后无法连接,如何解决?(相关搜索:数据库|死循环)
  • ¥15 数据库数据成问号了,前台查询正常,数据库查询是?号
  • ¥15 算法使用了tf-idf,用手肘图确定k值确定不了,第四轮廓系数又太小才有0.006088746097507285,如何解决?(相关搜索:数据处理)
  • ¥15 彩灯控制电路,会的加我QQ1482956179
  • ¥200 相机拍直接转存到电脑上 立拍立穿无线局域网传
  • ¥15 (关键词-电路设计)
  • ¥15 如何解决MIPS计算是否溢出