用jquery填写进度条表单

Question

我正在尝试创建一个进度条，该进度条会随着表格的填写而增加。例如，如果我有 5 个输入。每个输入都需要填写才能达到 100% 我的目标是在表单达到 100% 时激活一个按钮。

我的想法是做一堆 if blank 使其值为 0，但如果不是，则其值为 10，或某个任意数字。

然后我只需将这些值相加即可完成进度条。

我不确定如何设置这些值以便我可以将它们相加，或者这甚至是正确的方法。我不知道该去哪里。代码如下：

<form>
One<input id="1" type="name" name="name"><br />
Two<input id="2" type="name" name="name"><br />
Three<input id="3" type="name" name="else"><br />
Four<input id="4" type="name" name="name"><br />
Five<input id="5" type="name" name="name"><br />

</form>


<div id="progressbar"></div>

$(function() {
$( "#progressbar" ).progressbar({
  value: 37
});

});

$(function(){
 if ( $('#1').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#2').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#3').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#4').val() == '' ){value == 0};
 } else {
     value == 10;  };
if ( $('#5').val() == '' ){value == 0};
 } else {
     value == 10;  };
});

任何帮助将不胜感激

Answer 1

HTML：

<form>
One<input id="1" type="name" name="name" data-pbVal="60"><br />
Two<input id="2" type="name" name="name" data-pbVal="5"><br />
Three<input id="3" type="name" name="name" data-pbVal="5"><br />
Four<input id="4" type="name" name="name" data-pbVal="0"><br />
Five<input id="5" type="name" name="name" data-pbVal="30"><br />
</form>
<div id="progressbar"></div>

Javascript：

$(function() {
$( "#progressbar" ).progressbar({
  value: 0
});

//Register this function to fire whenever a value changes in one of the input elements
$("form input").change(function() {
    var pbVal = 0;
    //For each input element, count the value on the data-pbVal element and add it to the total
    $("form input").each(function(index) {
        if($(this).val().length > 0) {
            pbVal += $(this).data('pbVal');
        }
    });
    $( "#progressbar" ).progressbar( "option", "value", pbVal );
        return false;
    });
});

Answer 2

HTML：

<form>
One<input id="1" type="name" name="name" class='moo'><br />
Two<input id="2" type="name" name="name" class='moo'><br />
Three<input id="3" type="name" name="else" class='moo'><br />
Four<input id="4" type="name" name="name" class='moo'><br />
Five<input id="5" type="name" name="name" class='moo'><br />
</form>
<div id="progressbar"></div>

Javascript：

$(function() {
$( "#progressbar" ).progressbar({
  value: 0
});

$(".moo").change(function() {
    var pbVal = 0;
    if ($("#1").val().length > 0) pbVal += 20;
    if ($("#2").val().length > 0) pbVal += 20;
    if ($("#3").val().length > 0) pbVal += 20;
    if ($("#4").val().length > 0) pbVal += 20;
    if ($("#5").val().length > 0) pbVal += 20;
    $( "#progressbar" ).progressbar( "option", "value", pbVal );
    return false;
});

});