JavaScript/HTML - Add up the values from dropdown list and textbox

Question

just want to ask that how to extract the values from dropdown list and from textbox, then total up them together and display the total? I googled around and tried different ways but it did not worked. Still learning in HTML and JavaScript.

What is your height? (centimetres)
<select>
  <option name="height1" value="100">100cm</option>
  <option name="height1" value="101">101cm</option>
  <option name="height1" value="102">102cm</option>
  <option name="height1" value="103">103cm</option>
  <option name="height1" value="104">104cm</option>
  <option name="height1" value="105">105cm</option>
</select>
<br><br> What is your weight? (kg)
<input type="number" id="weight1" step="0.01" name="weight" pattern="\d{4}" autocomplete="off"><br><br> BMI: <input type="text" id="txtresult" name="bmi" readonly>
<input type="button" name="calculate" value="Calculate" onclick="calculate_bmi()">

function calculate_bmi()
{
	/*var h = parseFloat(document.getElementById("height1").value);
	var w = parseFloat(document.getElementById("weight1").value);
	if ((h != parseFloat(h, 10)) || (w != parseFloat(w, 10)))
		alert("Must insert number")
	if ( ( h <= 0 ) || ( w <= 0 ) )
		alert("Please insert positive numbers")
	if ( ( h >= 2.7 ) || ( w >= 500 ) )
		alert("Out of range");
	else
	{
		var result = w / h / h;
		result = Math.round(result * 100) / 100;
		document.getElementById("txtresult").value = result;
	}*/
	var h = document.getElementsByName("height1");
	//h = h / 100;
	var w = parseFloat(document.getElementById("weight1").value);
	var result = 0;
	for (var i = 0; i < h.length; i++)
	{
		if(h[i].tagName == 'SELECT')
		{
			//result = w / Number(h[i].options[h[i].selectedIndex].value);
			result = h + w;
		}
		if (h[i].checked)
		{
			//result = parseFloat(h[i].value);
			result = h + w;
		}
	}
	document.getElementById("txtresult").value = result.toFixed(2);
}

And I follows some solutions that available in Internet but it cannot works. The textbox values worked (commented code) but I want to use dropdown list and textbox to sum up together but I failed. Note: Just want to sum up things together. Because I want to know how to get and add the values inside the dropdown list and textbox. Then I will do the rest of them (calculating BMI).

Thanks in advance.

Nick Parsons · Accepted Answer · 2018-12-04 10:23:21Z

3

To get the value from the dropdown/select element, you can use:

document.querySelector('select').value;

This will give you a string (words), however, since you want to do calculations with this input you need it to be a number (integer, float etc...) so we can use a + in front of this statement to convert it to a number:

+document.querySelector('select').value;

However, I recommend that you add an id to your select element so you can target it like so (adding an id will improve your code's runtime):

+document.getElementById('height').value;

To get the value from your textbox, you can do:

+document.getElementById('weight1').value;

Here we are also converting it to a number by using the + operator.

Lastly, to set the bmi's textbox to the calculated value you can use:

document.getElementById("txtresult").value = bmi;

See working example below:

function calculate_bmi() {
  let height = +document.getElementById("height").value;
  let weight = +document.getElementById("weight1").value;
  let bmi = height + weight; // perform bmi calculation here
  document.getElementById("txtresult").value = bmi;
}

What is your height? (centimetres)
<select id="height">
  <option name="height1" value="100">100cm</option>
  <option name="height1" value="101">101cm</option>
  <option name="height1" value="102">102cm</option>
  <option name="height1" value="103">103cm</option>
  <option name="height1" value="104">104cm</option>
  <option name="height1" value="105">105cm</option>
</select>
<br><br> What is your weight? (kg)
<input type="number" id="weight1" step="0.01" name="weight" pattern="\d{4}" autocomplete="off"><br><br> BMI: <input type="text" id="txtresult" name="bmi" readonly>
<input type="button" name="calculate" value="Calculate" onclick="calculate_bmi()">

edited Dec 4, 2018 at 10:23

answered Dec 4, 2018 at 9:34

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Desmond97 Over a year ago

Thanks for your explaination. It really helps me a lot in order to understand the codes. Really appreciate it ^^

Nick Parsons Over a year ago

@Desmond97 No worries, glad to help:)

Angelos Chalaris · Accepted Answer · 2018-12-04 09:30:19Z

You can use document.getElementsByName("height1")[0] to get the desired element, then use h.options[h.selectedIndex].value to find the selected value. Then, you can use parseFloat as usual:

function calculate_bmi() {
  var h = document.getElementsByName("height1")[0];
  h = parseFloat(h.options[h.selectedIndex].value);
  // h = h / 100;
  var w = parseFloat(document.getElementById("weight1").value);
  console.log(h, w);
  var result = h + w;
  document.getElementById("txtresult").value = result.toFixed(2);
}

What is your height? (centimetres)
<select name="height1">
  <option value="100">100cm</option>
  <option value="101">101cm</option>
  <option value="102">102cm</option>
  <option value="103">103cm</option>
  <option value="104">104cm</option>
  <option value="105">105cm</option>
</select>
<br><br> What is your weight? (kg)
<input type="number" id="weight1" step="0.01" name="weight" pattern="\d{4}" autocomplete="off"><br><br> BMI: <input type="text" id="txtresult" name="bmi" readonly>
<input type="button" name="calculate" value="Calculate" onclick="calculate_bmi()">

As a side note, name should be added to the control (i.e. the <select> element) and not the values inside it (i.e. the <option> elements).

user8490159 · Accepted Answer · 2018-12-04 09:24:41Z

0

If you are trying to get the value from the dropdown list. Get the Select element by name which stores it as an array, then run a for loop through the list and extract the value. See below,

function calculate_bmi() {
    var value = 0;
    var h = document.getElementsByName("height1");
    for(var i = 0; i<h.length; i++){
        if(h[i].selected){
            value = h[i].value
            // Do something with the value
        }
    }
}

answered Dec 4, 2018 at 9:24

user8490159

Comments

Sameer · Accepted Answer · 2018-12-04 09:31:41Z

This code worked for me. I modified your html a bit and added an id to the select box.

  function calculate_bmi() {
          /*var h = parseFloat(document.getElementById("height1").value);
    	var w = parseFloat(document.getElementById("weight1").value);
    	if ((h != parseFloat(h, 10)) || (w != parseFloat(w, 10)))
    		alert("Must insert number")
    	if ( ( h <= 0 ) || ( w <= 0 ) )
    		alert("Please insert positive numbers")
    	if ( ( h >= 2.7 ) || ( w >= 500 ) )
    		alert("Out of range");
    	else
    	{
    		var result = w / h / h;
    		result = Math.round(result * 100) / 100;
    		document.getElementById("txtresult").value = result;
    	}*/
          var selectBox = document.getElementById("selectBox");
          var h = parseFloat(selectBox.value);
          //h = h / 100;
          var w = parseFloat(document.getElementById("weight1").value);
          var result = h+w;
          document.getElementById("txtresult").value = result.toFixed(2);
        }

 <html>
      <body>
        What is your height? (centimetres)
        <select id="selectBox">
          <option name="height1" value="100">100cm</option>
          <option name="height1" value="101">101cm</option>
          <option name="height1" value="102">102cm</option>
          <option name="height1" value="103">103cm</option>
          <option name="height1" value="104">104cm</option>
          <option name="height1" value="105">105cm</option>
        </select>
        <br /><br />
        What is your weight? (kg)
        <input
          type="number"
          id="weight1"
          step="0.01"
          name="weight"
          pattern="\d{4}"
          autocomplete="off"
        /><br /><br />
        BMI: <input type="text" id="txtresult" name="bmi" readonly />
        <input
          type="button"
          name="calculate"
          value="Calculate"
          onclick="calculate_bmi()"
        />
      </body>
      <script>
      
      </script>
    </html>

Collectives™ on Stack Overflow

JavaScript/HTML - Add up the values from dropdown list and textbox

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related