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

Question

我正在使用progress 元素制作一个进度条，该元素会随着用户填写冗长表单中的字段而增加。我发现this SO thread 有助于使用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 并反映在进度条级别中。我遇到的问题是为任何可能已经在加载时填写的表单字段加载 initial 值 - 因此，我需要找到所有输入值的字段，添加关联的 @ 987654329@ 值，并最初将该值加载到进度条中。如果字段被清除，我还想相应地减少进度值。

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

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 值，也不确定如何在清除字段时相应地减小值。非常感谢这里的任何帮助！

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

localStorage 在 SO sn-ps 中是不允许的...所以看看这个CodePen。

---

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

Answer 2

如果你总是从头开始累加进度，你可以在这两种情况下做同样的事情。

$(function() {

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

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

    inputs.change( update );

    // Fill in fields from localStorage, then:
    update();

});