用jquery填寫進度條表格

Question

我正在嘗試創建一個進度條，這個進度條是隨着表單的填寫而增加的。例如，如果我有5個輸入。每個輸入需要填寫以達到100％我的目標是在表單達到100％時激活按鈕。

我的思考過程是做一堆如果空白使它的值爲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" 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; 
}); 

}）;

Answer 2

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; 
    }); 
});