A guide on updating progress bar value based on user input

Question

A guide on updating progress bar value based on user input

I have an input field and a progress bar that needs to be updated based on the input.

The task is to input a number (%) and then display that value in the progress bar upon clicking the "Apply" button (btn-primary).

Below is the HTML code provided:

<div class="form-group">
    <label for="number">Enter a Number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Apply</button>
   <div class="progress-wrap">
     <div class="progress-message">Your form is filled at <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>

An attempt was made to write a script, but it does not function properly.

var val = document.querySelector('.form-controll').value;
var btn = document.querySelector('.btn-primary');
var progress = document.querySelector('.progress');
btn.addEventListener('click, displayData');
function displayData() {
  progress.attr('value', val);
  progress.style.background = 'green';
}

For reference, here is the link to view the codepen: https://codepen.io/ksena19/pen/QVRNep

javascript jquery css forms progress-bar

Answer 1

Answer №1

I made some adjustments to your code

Feel free to view the updated version here: https://codepen.io/anon/pen/rZgLyq

Here is the modified HTML:

    <div class="form-group">
    <label for="number">Please enter a number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
  <button id="btn" type="button" class="btn btn-primary">Apply</button>
  <div class="progress-wrap">
     <div class="progress-message">Your form is filled to <span class="output">___</span> %</div>  
  <progress max="100" value="0" class="progress"></progress>
</div>

And here is the updated JavaScript:

$(document).ready(function(){ 
  $('#btn').click(function(){ 
    var val = $('#number').val();
    evaluate(val);
  });
});

function evaluate(value) {
    var progress = $(".progress"), 
        progressMessage = $(".progress-message");  

  if (value == 0) {
      progress.attr("value", "0");
      progressMessage.text("Please fill out the form.");
  }
  if (value == 1) {
      progress.attr("value", "33");
      progressMessage.text("Nice start!");
      progress.addClass('light-green');
  }
  if (value == 2) {
      progress.attr("value", "66");
      progressMessage.text("You're on a roll!");
      progress.addClass('green');
  }
  if (value == 3) {
      progress.attr("value", "100");
      progressMessage.text("Form completed!");
      progress.addClass('dark-green');
  }
}

Answer 2

I made some adjustments to your code

Feel free to view the updated version here: https://codepen.io/anon/pen/rZgLyq

Here is the modified HTML:

    <div class="form-group">
    <label for="number">Please enter a number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
  <button id="btn" type="button" class="btn btn-primary">Apply</button>
  <div class="progress-wrap">
     <div class="progress-message">Your form is filled to <span class="output">___</span> %</div>  
  <progress max="100" value="0" class="progress"></progress>
</div>

And here is the updated JavaScript:

$(document).ready(function(){ 
  $('#btn').click(function(){ 
    var val = $('#number').val();
    evaluate(val);
  });
});

function evaluate(value) {
    var progress = $(".progress"), 
        progressMessage = $(".progress-message");  

  if (value == 0) {
      progress.attr("value", "0");
      progressMessage.text("Please fill out the form.");
  }
  if (value == 1) {
      progress.attr("value", "33");
      progressMessage.text("Nice start!");
      progress.addClass('light-green');
  }
  if (value == 2) {
      progress.attr("value", "66");
      progressMessage.text("You're on a roll!");
      progress.addClass('green');
  }
  if (value == 3) {
      progress.attr("value", "100");
      progressMessage.text("Form completed!");
      progress.addClass('dark-green');
  }
}

Answer 3

Answer №2

This particular snippet utilizes the HTML tag. The functionality of this tag relies on the attribute value="0". If the value is set to 0, it indicates that there is no progress to display.

Here, I've provided the precise code for your reference. By entering a number in the designated textbox, the progress bar will react accordingly to the numerical input. Feel free to execute the code below:

<script type="text/javascript">
    function count(){
        var getNum = document.getElementById("number");
        document.getElementById("progress").setAttribute("value", getNum);
    }
</script>

<!-- Progress bar -->
<div class="form-group">
    <label for="number">Enter a Number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
</div>
<button type="button" class="btn btn-primary" onClick="count();">Apply</button>
<div class="progress-wrap">
    <div class="progress-message">Your form is filled to <span class="output">___</span> %</div>
    <progress max="100" value="0" class="progress" id="progress"></progress>
</div>

Answer 4

This particular snippet utilizes the HTML tag. The functionality of this tag relies on the attribute value="0". If the value is set to 0, it indicates that there is no progress to display.

Here, I've provided the precise code for your reference. By entering a number in the designated textbox, the progress bar will react accordingly to the numerical input. Feel free to execute the code below:

<script type="text/javascript">
    function count(){
        var getNum = document.getElementById("number");
        document.getElementById("progress").setAttribute("value", getNum);
    }
</script>

<!-- Progress bar -->
<div class="form-group">
    <label for="number">Enter a Number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
</div>
<button type="button" class="btn btn-primary" onClick="count();">Apply</button>
<div class="progress-wrap">
    <div class="progress-message">Your form is filled to <span class="output">___</span> %</div>
    <progress max="100" value="0" class="progress" id="progress"></progress>
</div>

Answer 5

Answer №3

I designed a demonstration page that accepts user input and displays progress upon button click. Below is the HTML code with styling and JavaScript function:

<html>
    <style>
        #myProgress {
            width: 100%;
            background-color: #ddd;
        }
        #myBar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
    <body>
        <div id="myProgress">
            <div id="myBar">0%</div>
        </div>
        <br>
        <input type="text" class="form-control" id="number" min="0" max="100" required>
        <button type="button" onclick="change_progress()">Change Progress</button>
    </body>
</html>
<script>
    function change_progress() {
        var elem = document.getElementById("myBar");
        val = parseInt(document.getElementById("number").value);
        var width = 0;
        var id = setInterval(frame, val);
        function frame() {
            if (width >= val) {
                clearInterval(id);
            } else {
                width++; 
                elem.style.width = width + '%'; 
                elem.innerHTML = width * 1  + '%';
            }
        }  
    }
</script>

Answer 6

I designed a demonstration page that accepts user input and displays progress upon button click. Below is the HTML code with styling and JavaScript function:

<html>
    <style>
        #myProgress {
            width: 100%;
            background-color: #ddd;
        }
        #myBar {
            width: 0%;
            height: 30px;
            background-color: #4CAF50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
    <body>
        <div id="myProgress">
            <div id="myBar">0%</div>
        </div>
        <br>
        <input type="text" class="form-control" id="number" min="0" max="100" required>
        <button type="button" onclick="change_progress()">Change Progress</button>
    </body>
</html>
<script>
    function change_progress() {
        var elem = document.getElementById("myBar");
        val = parseInt(document.getElementById("number").value);
        var width = 0;
        var id = setInterval(frame, val);
        function frame() {
            if (width >= val) {
                clearInterval(id);
            } else {
                width++; 
                elem.style.width = width + '%'; 
                elem.innerHTML = width * 1  + '%';
            }
        }  
    }
</script>

Answer 7

Answer №4

Your JavaScript code has been updated:

var btn = $('.btn-primary');
var progress = $('.progress');
btn.click(function(){
  var value = Number($('.form-control').val());
  progress.attr('value', progress.val() + value);
});

.progress {
    width: 20%;
    height: 20px;
    margin: 0 0 5px 0;
    background: #fff;

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="number">Enter a number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Apply</button>
   <div class="progress-wrap">
     <div class="progress-message">Your form is filled to <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>

Answer 8

Your JavaScript code has been updated:

var btn = $('.btn-primary');
var progress = $('.progress');
btn.click(function(){
  var value = Number($('.form-control').val());
  progress.attr('value', progress.val() + value);
});

.progress {
    width: 20%;
    height: 20px;
    margin: 0 0 5px 0;
    background: #fff;

  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="number">Enter a number!</label>
    <input type="text" class="form-control" id="number" min="0" max="100" required>
  </div>
   <button type="button" class="btn btn-primary">Apply</button>
   <div class="progress-wrap">
     <div class="progress-message">Your form is filled to <span class="output">___</span> %</div>  
    <progress max="100" value="0" class="progress"></progress>
    </div>

A guide on updating progress bar value based on user input

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

New to the world of web design and seeking answers as to why my style is not being applied

Finding the index of a chosen option in Angular

Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Ways to terminate session using ajax when input is empty; Notice of an undefined variable

How can I showcase an image from the search results using the Giphy API?

"Encountering issues with jQuery AJAX and PHP where data values are not being

Uploading files in AngularJS using Rails Paperclip

Using LinQ filter along with jQuery tmpl in a jQuery AJAX call illustration

Leveraging $this in conjunction with a jQuery plugin

Properties of the jQuery XMLHttpRequest object in callback functions of ajax requests

Refresh treeview in master page while loading ASP page without refreshing the entire page

How to create a bottom border in several TD elements using a combination of CSS and jQuery

Achieve a dynamic transition where one slide seamlessly reveals the next using jQuery

Is there a way to minimize superfluous re-renders in React without resorting to the useMemo hook?

Utilize PHP to generate a table from data

Adjustable Panel Width

Create a customizable Tree structure that includes checkboxes for each item and features drag

How to Toggle Div Visibility with AngularJS ng-show and ng-click

Tips for designing a sophisticated "tag addition" feature

Overlap of Bootstrap Columns Occurs When Resizing the Browser