Блог

Я пытаюсь динамически обновлять индикатор выполнения моей страницы. Я заставил эту часть работать, но у меня возникли проблемы с этим. Во-первых, количество продолжает увеличиваться, поскольку я продолжаю нажимать кнопку. Итак, как я могу предотвратить повторение более одного для этого конкретного поля, когда у меня есть одна и та же кнопка обновления для них обоих? На моем веб-сайте формы находятся на разных вкладках, поэтому я использую одну и ту же кнопку обновления. Во-вторых, если я заполню все входные данные… счетчик увеличивается на 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 amp;amp; $("#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

Это накопительная проблема. Вместо adding = somevalue того, чтобы вы должны разделить процент на элементы:

Когда поле обновляется, вы устанавливаете значение поля: field1_value = 33.3; и обновляете процент.

 percentage = field1_value   field2_value   field3_value
  

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