user4756836 user4756836 - 4 months ago 22
HTML Question

Updating progress bar dynamically issues

I am trying to get my page's progress bar to update dynamically. I got that part to work but I am having issues with it. Firstly, the count keeps increasing as I keep pressing the button. So, how can I stop it from happening more than one for that particular field when I have the same update button on both of them? On my website, the forms are in different tabs which is why I am using the same update button. Secondly, if i fill out all the input's... the counter increases by

instead of
. Is there a solution possible without me having to have different update buttons for each?


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


$(document).ready(function() {
var percentage = 10;
$("[name='submit']").click(function(e) {
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


This is a cumulative issue. Instead of adding += somevalue you shoud divide the percentage by items:

When a field is updated you set the field value:field1_value = 33.3; and update the percentage.

percentage = field1_value + field2_value + field3_value

Edit: Added jsfiddle example Be sure all your form values added give 100 in total. :D