CODEWITHSUNDEEP
javascriptselect
Luis Esteban
Luis Esteban

Reputation: 21

sum selected from html select

Tried several ways, lot of research (maybe I miss something but can't get it done) so, I was wonder if I can sum selected values of a html select

this is my code

<select id="m4r1InfoMrP" name="m4r1InfoMrP">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>

And the other one 

<select id="m4r1InfoMrS" name="m4r1InfoMrS" >
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="4">4</option>
 <option value="8">8</option>
</select>

my JS code 

<script type="text/javascript">
 var m4r1InfoMrP = document.getElementById( "m4r1InfoMrP" ),
    m4r1InfoMrPValue = m4r1InfoMrP.value;

 var m4r1InfoMrS = document.getElementById( "m4r1InfoMrS" ),
  m4r1InfoMrSValue = m4r1InfoMrS.value;

 var sum = 0;
 var a = m4r1InfoMrPValue;
 var b = m4r1InfoMrSValue;

 sum = a + b;
 document.getElementById("m4r1InfoMrPS").value = sum;
</script>

what I'm looking for is to sum the selected values and show it on m4r1InfoMrPS

thanks in advance

Upvotes: 0

Views: 1690

Answers (1)

sumeet kumar
sumeet kumar

Reputation: 2648

You need to use the change event for each <select> element. Also, you need to convert to number for addition as below.

var m4r1InfoMrP = document.getElementById("m4r1InfoMrP"),
  m4r1InfoMrPValue = m4r1InfoMrP.value;
var m4r1InfoMrS = document.getElementById("m4r1InfoMrS"),
  m4r1InfoMrSValue = m4r1InfoMrS.value;

m4r1InfoMrP.onchange = () => calculate();
m4r1InfoMrS.onchange = () => calculate();

function calculate() {
  m4r1InfoMrPValue = m4r1InfoMrP.value;
  m4r1InfoMrSValue = m4r1InfoMrS.value;

  var sum = 0;
  var a = +m4r1InfoMrPValue;
  var b = +m4r1InfoMrSValue;

  sum = a + b;
  document.getElementById("m4r1InfoMrPS").value = sum;
}

calculate()
<select id="m4r1InfoMrP" name="m4r1InfoMrP">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="4">4</option>
  <option value="8">8</option>
</select>

<select id="m4r1InfoMrS" name="m4r1InfoMrS">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="4">4</option>
  <option value="8">8</option>
</select>

<input id="m4r1InfoMrPS" />

Upvotes: 2

Related Questions