www.webdeveloper.com
Results 1 to 7 of 7

Thread: calculation based on option value

  1. #1
    Join Date
    Aug 2009
    Posts
    9

    calculation based on option value

    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!

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    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> 

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    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)">
    Last edited by Kor; 05-25-2010 at 01:48 AM.

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    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.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by tirna View Post
    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

  7. #7
    Join Date
    Aug 2009
    Posts
    9
    hey guys thanks for both your replies, very helpful!

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles