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 值-因此，我需要查找所有输入了值的字段，并添加关联的{ {1}}个值，并首先将该值加载到进度栏中。我还想相应地在清除字段的情况下减小进度值。

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

data-prog

我不太确定如何查找带有在加载时输入的文本的字段并获取相关的prog值，也不知道如何清除字段后相应地减小该值。非常感谢您的协助！

Answer 1

如果您总是从头开始累计进度，则在两种情况下都可以做相同的事情。

$(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();

});

Answer 2

首先，您的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。只需给出您喜欢的任意数字即可。 ;）

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

2 个答案: