Changing variable value based on <option> selection

JavaScript
1

Hey Ya’ll,
Newbie here with a simple question that I can’t get. I need to change the value of a variable on a <select> question.


<script language="javascript">

	function addNumbers()
                {
                        var val1 = parseInt(document.getElementById("select1").value);
                        var val2 = parseInt(document.getElementById("select2").value);
			var val3 = parseInt(document.getElementById("select3").value);
                        var ansD = document.getElementById("total");
			ansD.value = val1 + val2 + val3;
}

        </script>
	

</script>
</head>
<body>
Value1<select name="select1" id="select1" value="">
	<option name="value1" id="value1" value="1"></option>
	<option name="value2" id="value2" value="2">$5000</option>
</select><br><br>

Value2<select name="select2" id="select2" value="">
	<option name="value1" id="value3" value="1"></option>
	<option name="value2" id="value4" value="2">$5000</option>
</select><br><br>

Value3<select name="select3" id="select3" value="">
	<option name="value1" id="value5" value="1"></option>
	<option name="value2" id="value6" value="2">$5000</option>
</select><br><br>

     <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>


Total<input type="text" name="total" id="total" value="">

Currently the variable choses either 1or 2 so when I execute the function it will sum the value ie…3,6 ect. I would like it to add the value in the text part of the option ie… 5000,10000,15000. I realize if I could I could change the value to be the same as the text value but the backend of this software needs the values to stay 1 or 2. I was trying to do an “if else” statement but I am not sure how to format the syntax to work:


if (val1==2) {
     val1=5000;
}else {
val1=0;
}
2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/
function addNumbers(){
 var s1 = document.getElementById("select1");
 var s2 = document.getElementById("select2");
 var s3 = document.getElementById("select3");
 s1=s1.options[s1.selectedIndex].text.replace(/\\D/,'');
 s2=s2.options[s2.selectedIndex].text.replace(/\\D/,'');
 s3=s3.options[s3.selectedIndex].text.replace(/\\D/,'');
document.getElementById("total").value = (s1?s1*1:0) + (s2?s2*1:0) + (s3?s3*1:0);
}

/*]]>*/
</script>
</head>

<body>
Value1<select name="select1" id="select1" value="">
	<option name="value1" id="value1" value="1">$1000</option>
	<option name="value2" id="value2" value="2">$5000</option>
</select><br><br>

Value2<select name="select2" id="select2" value="">
	<option name="value1" id="value3" value="1">$1000</option>
	<option name="value2" id="value4" value="2">$5000</option>
</select><br><br>

Value3<select name="select3" id="select3" value="">
	<option name="value1" id="value5" value="1">$1000</option>
	<option name="value2" id="value6" value="2">$5000</option>
</select><br><br>

     <input type="button" name="Sumbit" value="Click here" onclick="addNumbers()"/>


Total<input type="text" name="total" id="total" value="">
</body>

</html>
3

Thanks for the help. I hope one day to be good enough at this to give back to someone else. I can’t tell you how many times this forum has amazed me with the knowledge that people are wiling to share. Thanks again. Ya’ll are the best!!

4

Vic, thank you this works great!!