multiplying two dropdown menu values

10/05/2009 7:24 am | #1 sz473390560

Hi I am pretty new to Japascript, and have been trying to multiply the values of two dropdown menus

<td><form action="index.php?c=ref">
          <select id="RLA" name="RLA" size="1" onchange="totalA(this.value);" >
            <option value="">...</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
          </select>
          <select id="RLB" name="RLB" size="1" onchange="totalB(this.value);">
            <option value="">Choose One...</option>
            <option value="0.55">x4 @ $0.55 each</option>
            <option value="1.00">x8 @ $1.00</option>
            <option value="1.30">x13 @ $1.30</option>
          </select>
          <input type="button" class="butt2" value="Buy Now" />
        </form></td>
        <td>Total: <input id="show" name="show" type="text" value="$0.00" size="3" /></td>

The Javascript that is supposed to work with it is

var numA = 0;
function totalA(valA) {
if (valA && document.getElementById(valA)) {
		numA = eval(valA);
}
}

var numB = 0;
function totalB(valB) {
if (valB && document.getElementById(valB)) {
		numB = eval(valB);
}
}
var tots = "$" + (numA * numB);
document.write("show").value = "$" + tots;

I have searched the web, exhausted my brain and am ready to have an aneurysm.
Basically I am trying to show the value of the selected two options before purchase.
Can someone help me?

10/05/2009 10:13 am | #2 Justin Nemeth

Try this code. Basically, you have to access the values for a select list a little different than with a basic input field. And to set the value, you would use document.getElementById('show') to get a reference to your text field.

<td><form action="index.php?c=ref">
          <select id="RLA" name="RLA" size="1" onchange="totalA(this);" >
            <option value="">...</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
          </select>
          <select id="RLB" name="RLB" size="1" onchange="totalB(this);">
            <option value="">Choose One...</option>
            <option value="0.55">x4 @ $0.55 each</option>
            <option value="1.00">x8 @ $1.00</option>
            <option value="1.30">x13 @ $1.30</option>
          </select>
          <input type="button" class="butt2" value="Buy Now" />
        </form></td>
<td>Total: <input id="show" name="show" type="text" value="$0.00" size="3" /></td>

var numA = 0;
function totalA(selectA) {
if (selectA && selectA.selectedIndex) {
        numA = selectA.options[selectA.selectedIndex].value;
}
}

var numB = 0;
function totalB(selectB) {
if (selectB && selectB.selectedIndex) {
        numB = selectB.options[selectB.selectedIndex].value;
}
}

var tots = numA * numB;
document.getElementById("show").value = "$" + tots;

-justin

10/06/2009 10:27 am | #3 sz473390560

Thanks

Thanks for the suggestion.
After a good night's sleep and squeezing my brain of every last drop I magically made it work.
Using the following html:

<td><form action="index.php?c=ref">
          <select id="RLA" name="RLA" size="1" onchange="totalA(this.value);" >
            <option value="">...</option>
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
          </select>
          <select id="RLB" name="RLB" size="1" onchange="totalB(this.value);">
            <option value="">Choose One...</option>
            <option value="0.55">x4 @ $0.55 each</option>
            <option value="1.00">x8 @ $1.00</option>
            <option value="1.30">x13 @ $1.30</option>
          </select>
          <input type="button" class="butt2" value="Buy Now" />
        </form></td>
        <td>Total: <input id="showTB" name="showTB" type="text" value="$0.00" size="3" /></td>

with script:

var numA = 0;
function totalA(valA) {
if (valA) {
		numA = Number(valA);
}
var tots =  numB*numA;
document.getElementById("showTB").value = "$" + tots.toFixed(2);
}

var numB = 0;
function totalB(valB) {
if (valB) {
		numB = Number(valB);
}
var tots =  numB*numA;
document.getElementById("showTB").value = "$" + tots.toFixed(2);
}

By adding

var tots = numB*numA;
document.getElementById("showTB").value = "$" + tots.toFixed(2);

to both functions makes it work for changes in both dropdown menus and adds 2 decimal points.
For anyone else who wants to do that.

Simple is best :)

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

multiplying two dropdown menu values

10/05/2009 7:24 am | #1 sz473390560