進行状況バーを動的に更新する

Question

ページの進行状況バーを動的に更新しようとしています。私はその部分を働かせましたが、私はそれに問題があります。まず、ボタンを押し続けると、カウントが増加し続けます。だから、私は両方の上に同じ更新ボタンを持っているときに、その特定のフィールドのために複数のものが起こるのを止めることができますか？私のウェブサイトでは、フォームが別のタブにあるため、同じ更新ボタンを使用しています。第二に、すべての入力を記入すると、15または20ではなく、カウンタが35だけ増加します。私はそれぞれ別々の更新ボタンを持たなければならない解決策がありますか？

HTML：

<div class="progress"> 
    <div class="progress-bar" data-values="40">0</div> 
</div> 
<form method="post" action="#" class="basicInfo"> 
    <label>Title:</label> 
    <input type="text" id="title" class="form-control required" /> 
    <br/> 
    <label>Price:</label> 
    <input type="number" id="price" class="form-control required" /> 
    <br/> 
    <input type="submit" name="submit" value="Update" class="btn" /> 
</form> 
<br /> 
<form method="post" action="#" class="descriptionInfo"> 
    <label>Description:</label> 
    <input type="text" id="description" class="form-control required" /> 
    <br/> 
    <input type="submit" name="submit" value="Update" class="btn" /> 
</form> 

JS：

$(document).ready(function() { 
    var percentage = 10; 
    $("[name='submit']").click(function(e) { 
    e.preventDefault(); 
    if ($("#title").val().length > 0 && $("#price").val() > 0) { 
     percentage += 20; 
     $(".progress-bar").css("width", percentage + "%"); 
     $(".progress-bar").text(percentage + "%"); 
    } 
    if ($("#description").val().length > 0) { 
     percentage += 15; 
     $(".progress-bar").css("width", percentage + "%"); 
     $(".progress-bar").text(percentage + "%"); 
    } 

    }); 
}); 

JSFiddle Demo

Answer 1

これは累積的な問題です。 adding += somevalueの代わりに、次のようにパーセントで項目を分割します。

フィールドが更新されると、フィールド値がfield1_value = 33.3;に設定され、パーセンテージが更新されます。

percentage = field1_value + field2_value + field3_value 

編集：Added jsfiddle example は、すべてのフォームの値を追加、合計で100を与えることを確認してください。 ：D