CODEWITHSUNDEEP
javascriptjqueryhtmlfunctiontwitter-bootstrap-3
user4756836
user4756836

Reputation: 1337

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

Upvotes: 1

Views: 1100

Answers (1)

Canilho
Canilho

Reputation: 1209

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

Upvotes: 1

Related Questions