진행률 막대를 동적으로 업데이트 중

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