时间戳

首页 > 解决方案 > 在 jQuery 中指示表单完成的进度条

javascript - 在 jQuery 中指示表单完成的进度条

问题描述

我正在使用progress随着用户以冗长的形式填写字段而增加的元素来制作进度条。我发现这个 SO 线程有助于使用data-*属性获得一些基线功能，但我的表单具有“保存进度”功能，可以将任何输入的字段信息保存到浏览器的本地存储中，以便稍后检索。因此，如果用户返回带有已保存数据的表单，我希望该栏反映该进度级别。

data-prog到目前为止，这是使用表单字段的数据属性的示例标记：

<!-- FORM - SAMPLE FIELD -->
<div id="form">
<div class="field-group required">
   <label for="mgd_org_name">Organization Name:</label>
   <div>
      <input id="mgd_org_name" type="text" name="mgd_org_name" placeholder="Please enter your organization's name" required data-prog="6">
   </div>
</div>
</form>

<!-- Progress bar -->
<div id="form-progress">
    <p>Form Progress</p>
    <progress max="100" value="0" id="progress"></progress>
</div>

到目前为止的jQuery：

$(function() {
    // get all form inputs w/ data-prog values
    var inputs = $('#dossier-form').find('input[data-prog], textarea[data-prog]');
    var progBar = $('#progress');
    var progVal = 0;

    $(inputs).change(function() {
        if ($(this).val().length > 0) {
            progVal += $(this).data('prog');
            progBar.attr('value', progVal);
        }
    });

});

这样，每个字段都有一个data-prog值，该值将被添加到progVal并反映在进度条级别中。我遇到的问题是为可能已经在加载时填充的任何表单字段加载初始值 - 因此，我需要找到所有输入值的字段，添加相关data-prog值，然后最初将该值加载到进度条。如果字段被清除，我还想相应地减少进度值。

对于初始负载，我一直在尝试以下方法（不起作用）：

var inputsSaved = $(inputs).val();
if($(inputsSaved).length > 0) {
    progVal = $(inputs).data('prog');
    console.log('has existing progress');
} else {
    progVal = 0;
    console.log('does not have existing progress');
}

我不太确定如何找到在加载时输入文本的字段并获取相关的 prog 值，也不确定如何在清除字段时相应地减小值。非常感谢这里的任何帮助！

标签： javascriptjqueryformsuser-interfaceprogress-bar

解决方案

首先，您的inputs选择器可以替换为：

var inputs = $('#dossier-form [data-prog]');

那么 ,$(inputs).change(...已经inputs是一个 jQuery 对象了。无需用$().

您的进度更新功能正确。我只是将它放在一个命名函数中，以便能够从代码中的不同位置调用它（并避免重复代码）。

我添加了localStorage保存和检索...

$(function() {

  // get all form inputs w/ data-prog values
  var inputs = $('#dossier-form [data-prog]');
  var progBar = $('#progress');
  var progVal = 0;

  // Establish the "dificulty unit" base.
  var totalDifficulty = 0;
  inputs.each(function(){
    totalDifficulty += $(this).data('prog');
  });

  var difficultyUnit = 100/totalDifficulty;

  // Update progressbar
  function updateProgress(el){
    progVal += parseFloat($(el).data('prog')) * difficultyUnit;
    progBar.val(progVal);
  }

  // LocalStorage on load
  inputs.each(function(){
    var value = localStorage.getItem(this.id);
    if(value !=null && value !=""){
      $(this).val(value);
      updateProgress(this);
    }
  });  // End load from LocalStorage

  // Blur handler to save user inputs
  inputs.on("blur",function(){
    // Reset the progress
    progVal = 0;
    progBar.val(progVal);

    // Loop through all inputs for progress
    inputs.each(function(){
      if ($(this).val().length > 0) {
        updateProgress(this);
      }

      // LocalStorage
      localStorage.setItem(this.id,this.value);
    });
  });  // End on blur

});  // End ready

localStorage在 SO 片段中是不允许的……所以看看这个CodePen。

因此，您现在可以给出一些“难度级别”，而不必担心所有人获得的总和data-prog为 100。只需给出您喜欢的任意数字即可。;)

推荐阅读