selection menu and advancement gauge

While working on my code, I have a task where I need to make the progress bar move a specific amount when a name is clicked based on the option's value.

<!DOCTYPE html>
<html>
<head>
    <title>testinggg</title>
    <link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 <script src="~/Scripts/jquery-1.12.4.min.js"></script>


</head>
<body>


<select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
<select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

<progress id='progressBar' max='100' value='0'></progress>

<script>
  //document.getElementById("selectA").selectedIndex;

  var doneA = false;
$('#selectA').on('change', function() {
    if (!doneA) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneA = true;
    }
}); 

var doneB = false;
$('#selectB').on('change', function() {
    if (!doneB) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+25);
        doneB = true;
    }
});
  </script>
</body>
</html>

Currently, the progress moves by 25% whenever a name is clicked (as set). My query is, instead of assigning a fixed value of 25, can I assign it the specific option's value? For instance, Option4 (which is Danny) has a value of 20, so the objective is to do this...

$("#progressBar").attr('value', $("#progressBar").prop('value')+Option4);

instead of:

$("#progressBar").attr('value', $("#progressBar").prop('value')+ 25);
javascriptjqueryhtmlcss

Answer №1

To access the value of the selected option using jQuery, you can implement a function that recalculates the progress bar each time any select changes. This approach allows users to modify their answer and see the progress reflected accurately. Instead of simply adding the selected value to the progress bar, this function calculates the total value based on the selections from both dropdowns.

function updateProgress() {
    var option1 = parseInt($('option:selected', $('#selectOptionA')).val());
    var option2 = parseInt($('option:selected', $('#selectOptionB')).val());

    var sum = isNaN(option1) ? 0 : option1;
    if (!isNaN(option2)) {
        sum += option2;
    }
    $("#progress").prop('value', sum);
}

$('#selectOptionA').on('change', updateProgress);
$('#selectOptionB').on('change', updateProgress);

View the updated functionality in action:

https://jsfiddle.net/mbuqj550t/

In order to address issues related to NaN values, I made adjustments to the code. The use of `parseInt()` was resulting in NaN for non-numeric inputs, which caused issues during the first selection change. Additionally, when setting the placeholder value, it is recommended to use `.prop()` instead of `.attr()`, as explained in this article.

Answer №2

Yes, it can be done by capturing the value of the option after converting it to an integer.

var completedA = false;
$('#selectA').on('change', function() {
  if (!completedA) {
    var progressBarValue = parseInt($("#progressBar").val());
    var additionalValue = parseInt($(this).val());
    $("#progressBar").attr('value', progressBarValue + additionalValue);
    completedA = true;
  }
});

var completedB = false;
$('#selectB').on('change', function() {
  if (!completedB) {
    var progressBarValue = parseInt($("#progressBar").val());
    var additionalValue = parseInt($(this).val());
    $("#progressBar").attr('value', progressBarValue + additionalValue);
    completedB = true;
  }
});
<!DOCTYPE html>
<html>

<head>
  <title>Custom Title</title>
  <link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="~/Scripts/jquery-1.12.4.min.js"></script>



</head>

<body>


  <select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
  <select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

  <progress id='progressBar' max='100' value='0'></progress>

</body>

</html>

Answer №3

To determine the selected value, you can utilize $(this).val().

<!DOCTYPE html>
<html>
<head>
    <title>testinggg</title>
    <link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>

</head>
<body>


<select id="selectA">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>
<select id="selectB">
    <option value=" " disabled selected>Choose One...</option>
    <option id="option1" value="5">Mike</option>
    <option id="option2" value="10">Andrew</option>
    <option id="option3" value="15">Michael</option>
    <option id="option4" value="20">Danny</option>
    <option id="option5" value="25">Cozz</option>
    <option id="option6" value="30">Andrew</option>
    <option id="option7" value="35">Pete</option>
    <option id="option8" value="40">Sean</option>
    <option id="option9" value="45">Dom</option>
    <option id="option10" value="50">Marc</option>
    <option id="option11" value="0">Lou</option>
    <option id="option12" value="0">Rob</option>
</select>

<progress id='progressBar' max='100' value='0'></progress>

<script>
  //document.getElementById("selectA").selectedIndex;

  var doneA = false;
$('#selectA').on('change', function() {
    if (!doneA) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+$(this).val());
        doneA = true;
    }
}); 

var doneB = false;
$('#selectB').on('change', function() {
    if (!doneB) {
        $("#progressBar").attr('value', $("#progressBar").prop('value')+$(this).val());
        doneB = true;
    }
});
  </script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a base64 encoded string into a byte array

I have implemented a form where users can upload images to the page using an <input id = "fileLoader" type = "file" />. With JavaScript, I convert these uploaded images to base64 and send them to the server. On the server side, I need to decode this ...

javascriptjqueryajaxasp.net-mvcbase64

Ways to stop values from being turned into strings in javascript?

let str; let displayedNum; for (let i in imgURLArray){ str = "<li photonum="+i+">" + "<a>"+ (1+i) + "</a>" + "</li>"; $("ul.selection-list").append(str); } While looping through, I encountered an issue wher ...

javascript

Is it possible to independently verify the results of promises within a $.when(...) function without regard to the overall outcome?

Take a look at this example: $.when(a1, a2, a3, a4, .....) .done(function (){alert('done')}) .fail(function (){alert('fail')}); If all promises from a1 to ax were successful, I can manage and handle all the data within t ...

javascriptjqueryajaxdeferred

Tips on leaving comments inside a render <div>

Hey there! I'm facing an unusual issue in my React+Webpack project. Even though I marked a line as a comment using //, it still gets rendered in the HTML output. Strangely, I have never encountered this problem before and can't figure out what tr ...

javascriptreactjswebpack

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

After reviewing this pen, my goal is to create a popup that maintains access to the navigation bar (hence avoiding Bootstrap's Modal). However, I am facing the challenge of keeping the scrollbar visible while preventing scrolling in the background whe ...

javascripthtmlcss

Is JavaScript Promise Chaining Allowed?

I have a question regarding my code, despite it currently functioning correctly. Specifically, I'm wondering if the sequence of promises in my database is valid. Promise 1 must be fulfilled before moving on to Promise 2 because I rely on the data and ...

javascriptnode.jspostgresqlexpress

The functionality of the Bootstrap carousel for moving to the next and previous images is malfunctioning, as it only

The carousel on my website is not functioning properly. It only displays the first image and does not slide to the next pictures as it should. Here is the code snippet for the carousel: <body> </nav> <div id="carousel1" class="carousel slid ...

javascriptjquerycsstwitter-bootstrap

What are some ways I can integrate my Json object into my IONIC app rather than relying on a hardcoded object?

I stumbled upon this IONIC app's services.js file and found an example using a hardcoded object called "employees." Instead of using the hardcoded object, I wanted to use a JSON file. However, my attempt to make this change did not work as expected. I ...

javascriptangularjsjsonionic-frameworkmobile

Error: Trying to access "dishes" property on an undefined object gives a TypeError

Need Assistance Urgently! I have developed a web application using react and integrated it with node js. In the app, I am required to pass the status of a dish to the DishDetail Component indicating whether it is marked as "Favorite" or not. If a dish is ...

javascriptnode.jsreactjs

JavaScript can be used to append multiple array values within double brackets in Spring MVC

I am currently developing an application using Spring MVC with MongoDB. In the collection, I have retrieved multiple image name values: Ex: 1.jpg, 2.jpg, 3.jpg.... My Query: Now I need to place these values inside double brackets [[]] Ex : [["1.jpg"," ...

javascriptarraysmongodbspring-mvcmultidimensional-array

Development of an Angular 4 application utilizing a bespoke HTML theme

I'm in the process of creating an Angular 4 project using Angular CLI and I need to incorporate a custom HTML theme. The theme includes CSS files, JS files, and font files. Where should I place all of these files? Should they go in the asset folder? O ...

javascriptcssangularthemes

When utilizing the Express framework, the object req.body is initially empty when collecting data from a basic

I'm encountering an issue where I receive an empty object in req.body when submitting my HTML form. This problem persists whether testing in Postman or directly submitting the form from localhost in the browser. Upon logging it in the node console, t ...

javascripthtmlnode.jsexpress

`.svg file appearing slightly fuzzy when magnified in Chrome``

After careful consideration, I've chosen to use an SVG for my website logo. However, I am facing an issue with it rendering properly in Google Chrome. When the zoom level is set at 100%, the image appears blurry, but if I zoom out a couple of times, i ...

htmlcssxmlgoogle-chromesvg

What is the best way to find an onmouseover element with Selenium in Python?

I've been attempting to scrape a website and encountered an element that reveals information in a bubble when the mouse hovers over it. I am using Selenium for web scraping, but I am unsure how to locate this specific element. After examining the pag ...

javascriptpythonselenium

Employing pNotify as a seamless substitute for the traditional JavaScript confirmation pop-up

I have successfully implemented inline JavaScript confirmations and also as a function. However, I am struggling to figure out how to integrate PNotify confirmation dialog. My goal is to replace the existing confirm('Sure?') with pconfirm('S ...

jqueryasp.netpnotify

Tips for locating all events linked to a specific text box using JQUERY

I'm currently encountering a major issue with textboxes on a page that I've been tasked to update. Whenever I attempt to input text into the textboxes, the span element next to them disappears. My application is built using ASP.NET and relies on ...

javascriptjquery

Unable to figure out why information is not being transferred to an array through Mongoose

Seeking assistance as I am unable to figure out how to place a set of information into an array named "teamDetails". Here is the relevant /post item from server.js: app.post('/create', (req, res) => { console.log('Post command receiv ...

javascriptmongodbexpressmongoose

Python3 was installed, but the version couldn't be located

After trying to install a module on NPM, I encountered this error despite already having Python 3 installed and my ENV path set correctly. I attempted to install the NPM module, but it did not work as expected. ...

javascriptnode.jsnpmdiscord.js

What is the best approach to retrieve all items from DynamoDB using NodeJS?

I am trying to retrieve all the data from a DynamoDB table using Node.js. Here is my current code: const READ = async (payload) => { const params = { TableName: payload.TableName, }; let scanResults = []; let items; do { items = await ...

javascriptnode.jsexpressamazon-dynamodbes6-promise

Small jQuery Autocomplete Result Box

I've encountered a peculiar issue with the autocomplete UI that I can't seem to find any information about on here. Check out http://jsfiddle.net/TYPfw/ for the jQuery and HTML, while here is the PHP code: $return_arr = array(); $param = mysql_ ...

jqueryjquery-uijquery-autocompletejquery-ui-autocomplete