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

cssformshtmljavascriptprogress-bar

First off, I'm very new to coding. I'm making a website on WordPress for myself and have run into the problem of needing something that's not available. So instead of paying someone for it, I've decided that I want to learn it!

I'm trying to make a progress bar with HTML, JS, and CSS that automatically updates after a user submits a number using a form. I don't know how to make the 'Submit' button work so that when the form is submitted, the number gets added to the progress bar's value.
For example: if the progress bar is at 50/100 and someone submits a 10 (for example, but it will be chosen by the user), how do I make it so the progress bar updates to 60/100? After this is submitted, I would want there to be a list of users under the updated progress bar who have submitted by first name and what number they submitted. I'm assuming I need some sort of function to connect JS to HTML and display code to display the list of names with numbers submitted.

This is what I have tried in JSFiddle so far. I'm stuck because whenever I hit submit it changes the window where it ran the code to just a white box:

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);

Thank you so much for your help and explanations in advanced!

Best Answer

So to accomplish what you want you should first of all use an Ajax request instead of submitting a form. This will keep the user on the same page, while allowing you to contact your server and exchanging data with it.

Basically what I did is as follows:

  1. Set onclick event on the submit button (which I changed to type="button" so it won't submit the form and navigate away..
  2. Each time the button is clicked, we get the progress maximum width and the progress bar current width (which reflects the current progress)
  3. Add the quantity to the from the input to the progress bar width value.
  4. Normalize the progress bar value so it reflects the current progress from 0-100. For example if you decide you want the progress area to be 200px, adding a quantity of 50 will mean 25% and not 50% since it's 50/200 * 100 == 25%
  5. From this step we animate the added progress as percentage to the progress bar element.

Note: For now I put it outside of the ajax request, because stackoverflow snippets don't allow ajax and also I don't have a server up. In your final result be sure to move the animate line to the ajax success, so that only if it succeeds you will add the progress.

Hope this helps you achieve what you are looking for.

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>

Related Topic