HTML Select/Option passing values to javascript function

Question

I have this WORKING code here:

function updatetotal (section, pricetoadd)         
{
    TotalPrice[section] = pricetoadd;
    total = 0;

    for(key in TotalPrice)
    {
        total = total + TotalPrice[key];
    }

    $("#monthlycost").html("$" + total);
    $("#firstpayment").html("$" + total);
}

<input {if $hw_s.disk[$_var].content == $__val.content}checked{/if} type=radio name="order[disk][{$_var}][content]" value="{$__val.content}" price="{$__val.price}" setup="{$__val.setup}" onclick="updatetotal('disk{$_var}', {$__val.price})">

Note that the value is very important. It has to be $__val.content for all of the backend code to function properly.

What I am trying to do is convert above to a dropdown and have the functionality still work properly. The JS function keeps a running total of every selected item and adds them together. With an input type radio it's very simple since the JS function can take a price variable. Unfortunately, with a dropdown (as far as I know), the onChange function has to go be associated with the select, not the option. Unfortunately, since the options are dynamically generated, the select doesn't know anything about the options.

Code so far (not working):

function updatetotaldd(section, elementid)
{
    var selectBox = document.getElementById(elementid);
    var selectedValue = selectBox.options[selectBox.selectedIndex].value; // does not get what I need since value is a string. I need to somehow access the price of the selected option.


    TotalPrice[section] = selectedValue;

    for(key in TotalPrice)
    {
        total = total + TotalPrice[key];
    }

    $("#monthlycost").html("$" + total);
    $("#firstpayment").html("$" + total);
}

<select class="tech" name="order[disk][{$_var}][content]" id="svtech{$_var+1}" data-enablecheckbox="false" onChange="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
    {foreach key=__var item=__val from=$_val}
        <option {if $hw_s.disk.content == $__val.content}selected{/if} value="{$__val.content}"  price="{$__val.price}" setup="${$__val.setup}" onSelect="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
        {$__val.content}
        {if $__val.price > 0 && $__val.setup > 0}
            <strong> - add ${$__val.price}/Mo + ${$__val.setup} One time fee</strong>
        {elseif $__val.price > 0}
            <strong> - add ${$__val.price}/Mo</strong>
        {elseif $__val.setup > 0}
            <strong>- add ${$__val.setup} One time fee</strong>
        {/if}
        </option>
    {/foreach}
</select>

How can I either pass in the price to javascript (whether it be onChange on the select, some other action on the option itself), or somehow have the option have a variable attribute (NOT VALUE)?

Can you add the second option without server side code, preferably in jsFiddle. Thanks. — WhyMe
– WhyMe, Commented Jun 5, 2013 at 0:53

WhyMe · Accepted Answer · 2013-06-05 01:26:21Z

2

fletch is right, i corrected the errors. See here.

var selectedOption = selectBox.options[selectBox.selectedIndex]; //need to somehow access the price of the selected option.

price= parseInt(selectedOption.getAttribute('price'));

answered Jun 5, 2013 at 1:26

WhyMe

5352 silver badges13 bronze badges

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

4 Comments

fletch Over a year ago

I was playing around, and I can't figure out why trying to access .price is returning undefined. I was always under the impression that .getAttribute can be flaky at times.

WhyMe Over a year ago

I wrote that your answer is correct. And .getAttribute always works see quirksmode.

fletch Over a year ago

Nvm, figured it out...that element.attributeName only works for W3C defined attributes. I should have done element.attributes.attributeName.value instead. Amazing where a little documentation can take you (if I'd bother to read it)...;)

fletch Over a year ago

well, he should mark your answer as the accepted answer...you've provided a very clean solution in jsfiddle.

fletch · Accepted Answer · 2013-06-05 02:00:07Z

0

Just throwing this out there in case you hadn't tried...

You've defined the price attribute on the option element, so you should be able to retrieve it like any other property. Not sure you need to call onSelect on each of the option elements as the onChange on the select element should do the trick.

function updatetotaldd(section, elementid)
{
    var selectBox = document.getElementById(elementid);
    //var selectedValue = selectBox.options[selectBox.selectedIndex].value; // does not get what I need since value is a string. I need to somehow access the price of the selected option.
    var selectedPrice = selectBox.options[selectBox.selectedIndex].attributes.price.value;


    TotalPrice[section] = selectedPrice;

    for(key in TotalPrice)
    {
        total = total + TotalPrice[key];
    }

    $("#monthlycost").html("$" + total);
    $("#firstpayment").html("$" + total);
}

<select class="tech" name="order[disk][{$_var}][content]" id="svtech{$_var+1}" data-enablecheckbox="false" onChange="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
    {foreach key=__var item=__val from=$_val}
        <option {if $hw_s.disk.content == $__val.content}selected{/if} value="{$__val.content}"  price="{$__val.price}" setup="${$__val.setup}" onSelect="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
        {$__val.content}
        {if $__val.price > 0 && $__val.setup > 0}
            <strong> - add ${$__val.price}/Mo + ${$__val.setup} One time fee</strong>
        {elseif $__val.price > 0}
            <strong> - add ${$__val.price}/Mo</strong>
        {elseif $__val.setup > 0}
            <strong>- add ${$__val.setup} One time fee</strong>
        {/if}
        </option>
    {/foreach}
</select>

edited Jun 5, 2013 at 2:00

answered Jun 5, 2013 at 1:15

fletch

1,6511 gold badge12 silver badges12 bronze badges

2 Comments

user2171332 Over a year ago

Unfortunately, that doesn't work. That is the reason I put the price attribute onto the option but var selectedPrice = selectBox.options[selectBox.selectedIndex].price doesn't return anything.

fletch Over a year ago

Yes, I fixed the error in retrieving the price attribute from the selected option.

Collectives™ on Stack Overflow

HTML Select/Option passing values to javascript function

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related