使用 HTML、CSS、JS 中的表单自动更新进度条

Question

首先，我对编码还很陌生。我正在为自己在 WordPress 上创建一个网站，运行遇到了需要一些不可用的东西的问题。因此，我没有付钱给别人，而是决定要学习它！

我正在尝试使用 HTML、JS 和 CSS 创建一个进度条，在用户使用表单提交数字后自动更新。我不知道如何使 'Submit' 按钮起作用，以便在提交表单时将数字添加到进度条的值中。例如：如果进度条在 50/100 并且有人提交了 10（例如，但它将由用户选择），我该如何使进度条更新到 60/100？提交后，我希望在更新的进度条下有一个用户列表，这些用户按名字和他们提交的号码提交。我假设我需要某种函数将 JS 连接到 HTML 并显示代码以显示名称列表和提交的数字。

到目前为止，这是我在 JSFiddle 中尝试过的方法。我被卡住了，因为每当我点击提交时，它都会将 window 的运行代码更改为一个白框：

HTML:

<h3>Quantity</h3>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<br>
<h5>Fill out the form below:</h5>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname"><br>
Email:<br>
<input type="email" name="email"><br>
Quantity:<br>
<input type="number" name="quantity" min="1" max="10000"><br><br>
<form action="action_page.php">
Select images: <input type="file" name="img" multiple>
<br>
<input type="submit" value="Submit">
<input type="reset">
</form>

CSS:

.progress, .alert {
margin: 15px;
border-radius: 25px;}

JS:

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $quantity = $('.quantity');

$progressBar.animate({width: "50"}, 100);

非常感谢您的帮助和提前解释！

Answer 1

因此，要完成您想要的，您应该首先使用 Ajax 请求而不是提交表单。这将使用户保持在同一页面上，同时允许您联系您的服务器并与其交换数据。

基本上我做的是这样的：

在提交按钮上设置 onclick 事件（我将其更改为 type="button" 这样它就不会提交表单并离开..
每次点击按钮，我们得到进度最大宽度和进度条当前宽度（反映当前进度）
将输入的数量添加到进度条宽度值。
标准化进度条值，使其反映 0-100 的当前进度。例如，如果您决定希望进度区域为 200px，添加数量 50 将意味着 25% 而不是 50%，因为它是 50/200 * 100 == 25%
从这一步开始，我们将添加的进度动画化为进度条元素的百分比。

注意：现在我把它放在 ajax 请求之外，因为 Whosebug 片段不允许 ajax 而且我也不允许启动服务器。在您的最终结果中，务必将 animate 行移至 ajax 成功，这样只有在成功时您才会添加进度。

希望这可以帮助您实现您的目标。

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $quantity = $('#quantity');
var $firstName = $('#firstname');
var $lastName = $('#lastname');
var $email = $('#email');



// Set onclick listener
$('#submit').click(function(){
  // Get widths 
  var currentWidth = parseInt($progressBar.css('width'));
  var allowedWidth = parseInt($progress.css('width'));
  
  // Add width from quantity input
  var addedWidth = currentWidth + parseInt($quantity.val());
 
  // Set to 100% if user added more than allowed
  if (addedWidth > allowedWidth) {
    addedWidth = allowedWidth;
  }
 
  // Normalize, to calculate actual percentage: if progress is 200px but user adds 100 it will add 50%
  var progress = (addedWidth / allowedWidth) * 100;

  //  For now we will add the progress from outside of ajax call
  $progressBar.animate({width: progress + '%' }, 100);
  
  // Ajax call
  $.get('/blabla', { 
    firstName: $firstName.val(),
    lastName: $lastName.val(), 
    email: $email.val(), 
    quantity: $quantity.val() })
  .done(function(){
    // Ajax Success
    // You shoud move the progress bar animate here
    // $progressBar.animate({width: progress + '%' }, 100); 
  }).fail(function(){
    // Ajax failed
  })
})

.progress, .alert {
  margin: 5px;
  height: 10px;
  width: 200px;
  border-radius: 25px;
  border: black solid 1px;
}

.progress-bar {
  background-color: red;
  height:10px;
  width: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Quantity</h3>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<br>
<h5>Fill out the form below:</h5>
<form action="action_page.php">
First name:<br>
<input type="text" id="firstname" name="firstname"><br>
Last name:<br>
<input type="text" id="lastname" name="lastname"><br>
Email:<br>
<input type="email" id="email" name="email"><br>
Quantity:<br>
<input type="number" id="quantity" name="quantity" min="1" max="10000"><br><br>
<form action="action_page.php">
Select images: <input type="file" name="img" multiple>
<br>
<input type="button" id="submit" value="Submit">
<input type="reset">
</form>

Answer 2

要使您的代码运行，您必须进行一些更改：在 progress-bar 上设置 width: 0; 和 height，更改您的 jQuery select 或 quantity，因为您没有 select quantity 输入字段。如果数量输入字段中没有 ID 或 class，您可以 select 使用属性名称。

然后将进度条的宽度设置为数量输入字段的值（并添加'%'表示应将其视为百分比值）。

我的 CodePen 上的工作示例：http://codepen.io/kwiat_1990/pen/jyKJmx。

请注意，此示例显示的进度条就像更改其宽度一样。

你的jQuery：

$(function() {

var $progress = $('.progres');
var $progressBar = $('.progress-bar');

    $('form').on('input', function() {
        var $quantity = $('input[name="quantity"]').val();
        $progressBar.animate({
            width: $quantity + '%'
       }, 100);
    });
});

您的更新 CSS：

.progress-bar {
    margin: 15px;
    border-radius: 25px;
    background: black;
    width: 0;
    height: 50px;
}

$(function() {

  var $progress = $('.progres');
  var $progressBar = $('.progress-bar');

  $('form').on('input', function() {
    var $quantity = $("input[name=quantity]").val();
    $progressBar.animate({
      width: $quantity + '%'
    }, 100);
  });
});

.progress-bar {
  margin: 15px;
  border-radius: 25px;
  background: black;
  width: 0;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Quantity</h3>
<div class="progress">
  <div class="progress-bar" role="progressbar"></div>
</div>
<br>
<h5>Fill out the form below:</h5>
<form action="action_page.php">
  First name:
  <br>
  <input type="text" name="firstname">
  <br>Last name:
  <br>
  <input type="text" name="lastname">
  <br>Email:
  <br>
  <input type="email" name="email">
  <br>Quantity:
  <br>
  <input type="number" name="quantity" min="1" max="10000">
  <br>
  <br>
  <form action="action_page.php">
    Select images:
    <input type="file" name="img" multiple>
    <br>
    <input type="submit" value="Submit">
    <input type="reset">
  </form>

使用 HTML、CSS、JS 中的表单自动更新进度条

Auto Updated Progress Bar with a form in HTML, CSS, JS

html

javascript

css

forms

progress-bar