时间戳

首页 > 解决方案 > 填写表格时如何使进度条工作

javascript - 填写表格时如何使进度条工作

问题描述

在填写姓氏、姓名等字段时，进度条应按 33% 的步长填充，填充颜色应改变：空 - 白色，33% - 浅绿色，66% 绿色，100% 深绿色）。

$("#form input").keyup(function() {

  var numValid = 0;
  $("#form input[required]").each(function() {
    if (this.validity.valid) {
      numValid++;
    }
  });

  var progress = $("#progress"),
    progressMessage = $("#progress-message");

  if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("Complete the form.");
  }
  if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
  }
  if (numValid == 2) {
    progress.attr("value", "40");
    progressMessage.text("Nothing can stop you now.");
  }
  if (numValid == 3) {
    progress.attr("value", "60");
    progressMessage.text("You're basically a hero, right?");
  }
  if (numValid == 4) {
    progress.attr("value", "80");
    progressMessage.text("They are going to write songs about you.");
  }
  if (numValid == 5) {
    progress.attr("value", "95");
    progressMessage.text("SO CLOSE.");
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php" id="form">
  <div class="form-group">
    <label for="name">Фамилия</label>
    <input type="text" class="form-control" id="name" required>
  </div>
  <div class="form-group">
    <label for="last-name">Имя</label>
    <input type="text" class="form-control" id="last-name" required>
  </div>
  <div class="form-group">
    <label for="surname">Отчество</label>
    <input type="text" class="form-control" id="surname" required>
  </div>
  <div class="form-group">
    <label for="btns">Меняли фамилию?</label>
    <div class="btns">
      <button type="button" class="btn btn-1">Да</button>
      <button type="button" class="btn btn-1 btn-success">Нет</button>
    </div>
  </div>
  <div class="form-group">
    <label for="btns">Пол</label>
    <div class="btns">
      <button type="button" class="btn btn-2 btn-success">Муж</button>
      <button type="button" class="btn btn-2">Жен</button>
    </div>
  </div>
  <div class="form-group">
    <label for="sel1">Семейное положение:</label>
    <select class="form-control" id="sel1">
      <option disabled selected>Женат/Замужем</option>
      <option>Женат</option>
      <option>Замужем</option>
    </select>
  </div>
  <div class="progress-wrap">
    <div class="progress-message" id="progress-message">Complete the form!</div>
    <progress max="100" value="0" id="progress"></progress>

  </div>
  <div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100">
  </div>
  <button type="button" class="btn btn-primary">Применить</button>
  <div class="progress-wrap">
    <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>
    <progress max="100" value="0" id="progress"></progress>
  </div>
</form>

您可以看到，当您填写表格时，消息必须更改。但它不起作用！开发工具中没有错误。

标签： javascriptjquerycssprogress-bar

解决方案

   $('#form').on('keyup change paste', 'input, select', function(){

var numValid = 0;
$("#form input[required], #form select[required]").each(function() {
    if (this.validity.valid) {
        numValid++;
    }
});

var progress = $(".progress"),
    progressMessage = $(".progress-message");

if (numValid == 0) {
    progress.attr("value", "0");
    progressMessage.text("Complete the form.");
}
if (numValid == 1) {
    progress.attr("value", "20");
    progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
    progress.attr("value", "40");
    progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
    progress.attr("value", "60");
    progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
    progress.attr("value", "80");
    progressMessage.text("They are going to write songs about you.");
}
if (numValid == 5) {
    progress.attr("value", "95");
    progressMessage.text("SO CLOSE.");
}

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php" id="form">
  <div class="form-group">
    <label for="name">Фамилия</label>
    <input type="text" class="form-control" id="name" required>
  </div>
  <div class="form-group">
    <label for="last-name">Имя</label>
    <input type="text" class="form-control" id="last-name" required>
  </div>
  <div class="form-group">
    <label for="surname">Отчество</label>
    <input type="text" class="form-control" id="surname" required>
  </div>
  <div class="form-group">
    <label for="btns">Меняли фамилию?</label>
     <div class="btns">
        <button type="button" class="btn btn-1">Да</button>
        <button type="button" class="btn btn-1 btn-success">Нет</button>
   </div>
  </div>
   <div class="form-group">
    <label for="btns">Пол</label>
     <div class="btns">
        <button type="button" class="btn btn-2 btn-success">Муж</button>
        <button type="button" class="btn btn-2">Жен</button>
   </div>
  </div>
  <div class="form-group">
      <label for="sel1">Семейное положение:</label>
      <select class="form-control" id="sel1" required>
        <option disabled selected>Женат/Замужем</option>
        <option value="Женат">Женат</option>
        <option value="Замужем">Замужем</option>
      </select>
    </div>
    <div class="progress-wrap">
    <div class="progress-message" id="progress-message">Complete the form!</div>
    <progress max="100" value="0" class="progress"></progress>

    </div>
     <div class="form-group">
    <label for="number">Введите число!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Применить</button>
   <div class="progress-wrap">
     <div class="progress-message">Ваша форма заполнена на <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>
</form>

推荐阅读