calculation based on option value

**whitecreative** · 05-20-2010 03:35 PM

hi there this is a total noob question, so hope someone can help!

i basically want to return a cost based on a formula.

i will paste the code below and you can tell me where I am going wrong. bear in mind, this is my first stab at javascript!!

formula idea is to get the option value from a drop-down list and based on its value return a number. for example if the value is "a" return '2'. for the sake of the formula call this var vechicleTypeCost.

i have worked out how to get the distance and the rate.

formula:

cost = (distance * rate) + vehicleTypeCost;

hope someone can help!

**aj_nsc** · 05-20-2010 03:44 PM

The purpose of the value attribute of the option tag is to provide an internal value that the webpage will use and that the user won't see. All the user will see is what's between <option>...</option>. So, why would you use value="a" when you really want value="2"?

In any case, it's something like this:

Code:

var vehicleTypeCost;
var optionElem = document.getElementById('optionElementId');
 switch(optionElem.options[optionElem.selectedIndex].value) {
   case "a":
     vehicleTypeCost = 2;
     break;
   case "b":
     vehicleTypeCost = 3;
     break;    
   default:
     vehicleTypeCost = 4;   
 }

cost = (distance*rate)+vehicleTypeCost;

For more info on switch:
http://www.w3schools.com/js/js_switch.asp

**tirna** · 05-21-2010 01:11 AM

I would do something like this where you send the selected value in the <select> directly to the function that calculates the cost.

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

<title></title>

<script type="text/javascript">

<!--



function calCost(vehicleTypeCost) {

    if(vehicleTypeCost != 0) {

        //variables distance and rate need to be defined locally or globally before this line

        var cost = (distance*rate)+vehicleTypeCost;

    }

}



//-->

</script>

</head>

<body>

 

<select id="selCost" onchange="calCost(this.options[this.selectedIndex].value)";>

    <option value="0"> Select a Vehicle Type Cost</option>

    <option value="2"> Vehicle Type Cost 2</option>

    <option value="3"> Vehicle Type Cost 3</option>

    <option value="4"> Vehicle Type Cost 4</option>

</select>

 

</body>

</html>

**Kor** · 05-21-2010 03:00 AM

Originally Posted by tirna

I would do something like this where you send the selected value in the <select> directly to the function that calculates the cost.

PHP Code:


<select id="selCost" onchange="calCost(this.options[this.selectedIndex].value)";>

If the SELECT element is not a "multiple" one, the SELECT element takes automatically the value of the selected option as his own value. Thus, it is enough to:

Code:

<select id="selCost" onchange="calCost(this.value)">

**tirna** · 05-21-2010 03:34 AM

yep, thanks for pointing that out

I had a few different ideas of how to do it bouncing around in my head at the time and ended up mixing them a bit

in the way I got the selected value.

**Kor** · 05-21-2010 03:38 AM

Originally Posted by tirna

yep, thanks for pointing that out

I had a few different ideas of how to do it bouncing around in my head at the time and ended up mixing them a bit

in the way I got the selected value.

No problem. It was not a mistake; you have used a correct syntax, after all. I was only to shorten the code, that was all

**whitecreative** · 05-21-2010 05:39 PM

hey guys thanks for both your replies, very helpful!

so simple, why didn't i think of that!

Thread: calculation based on option value

Thread Tools

Display

calculation based on option value

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions