Обновление динамического динамического уровня

Question

Я пытаюсь обновить динамический индикатор моей страницы. У меня есть эта работа, но у меня проблемы с ней. Во-первых, счет продолжает расти, когда я продолжаю нажимать кнопку. Итак, как я могу остановить его от более чем одного для этого конкретного поля, когда у меня есть одна и та же кнопка обновления на обоих из них? На моем веб-сайте формы находятся на разных вкладках, поэтому я использую одну и ту же кнопку обновления. Во-вторых, если я заполняю все входные данные ... счетчик увеличивается на 35 вместо 15 или 20. Возможно ли решение без необходимости иметь разные кнопки обновления для каждого из них?

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 

Edit: Added jsfiddle example Убедитесь, что все ваши значения формы добавили дают 100 в общей сложности. : D