user4756836 user4756836 - 1 month ago 11
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

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

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

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

Comments