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

Question

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

这是迄今为止正在运行的内容 - 使用表单字段的数据属性 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 并反射(reflect)在进度条级别中。我遇到的问题是为加载时可能已填写的任何表单字段加载初始值 - 因此，我需要找到所有已输入值的字段，添加关联的 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');
}

我不太确定如何找到在加载时输入文本的字段并获取关联的编程值，也不知道如何在清除字段时相应地减少该值。非常感谢这里的任何帮助!

Answer 1

首先，您的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

SO 片段中不允许使用

localStorage...所以看看这个 CodePen .

<小时/>

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