Setting variables equal to what is chosen in a dropdown box

kcates · Sep 8, 2000

Setup: I have a drop downbox that has sizes in it. Hidden input fields that declare prices for the different sizes. I have a script that when the dropdown box is changed it goes through and assigns the prices = to what was chosen in the dropdown box.

Here is the script I use.
function computeprice()
{
var f = document.forms[0]
var newprice

if (f.sizeselector[f.sizeselector.selectedIndex].value == 3)
{newprice = f.tprice1.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}
else if(f.sizeselector[f.sizeselector.selectedIndex].value == 4)
{newprice = f.tprice2.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}

else if(f.sizeselector[f.sizeselector.selectedIndex].value == 5)
{newprice = f.tprice3.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}

else
{newprice = f.tprice.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}
}

The problem is I can't get the script to identify what was chosen in the dropdown box correctly. I either stops on the first If statement or passes all of them up. I believe that it has something to do with how I am telling the script what to look for. I am not sure where to go from here. Does any one have any ideas?

Ken [sig][/sig]

RobSchultz · Sep 8, 2000

If I understand what you are trying to do, you may be over-engineering the task ;-). Try this...

Code:

<html>
<body>
<form id=&quot;frmForm&quot; name=&quot;frmForm&quot;>
 <select id=&quot;selGifts&quot; name=&quot;selGifts&quot; onChange=&quot;fnDisplayPrice(this)&quot;>
  <option value=&quot;n/a&quot;>Pick a gift</option>
  <option value=&quot;$100.00&quot;>Gift 1</option>
  <option value=&quot;$200.00&quot;>Gift 2</option>
  <option value=&quot;$300.00&quot;>Gift 3</option>
  <option value=&quot;$400.00&quot;>Gift 4</option>
  <option value=&quot;$500.00&quot;>Gift 5</option>
 </select>
 <br>
 Price: <input type=&quot;text&quot; id=&quot;txtPrice&quot; name=&quot;txtPrice&quot; width=10>
 Item: <input type=&quot;text&quot; id=&quot;txtItem&quot; name=&quot;txtItem&quot; width=10>
</form>
</body>
<script language=&quot;javascript&quot;>
function fnDisplayPrice(obj){
 var z=document.forms.frmForm;
 var sel=z.selGifts;
 var prc=z.txtPrice;
 var itm=z.txtItem;
 
 prc.value=obj.options[obj.selectedIndex].value;
 itm.value=obj.options.selectedIndex;
}
</script>
</html>

Hope it helps,
Rob [sig][/sig]

kcates · Sep 8, 2000

Thanks that was great but I still can't get it to work with what I am trying to do.

Here is the whole story. I am creating a shopping cart using html as a front end and Lotus Notes as the backend. I have the combo box dynamically generated from the db. I need this script to assing prices dynamically from the db to the sizes as the size is chosen. What I have looks like it should work but it either hits the first if statement and returns that value or it ends at the else statement and returns that(this is the one it usually does).

Here is the test page I am working on. The input fields at the bottom are pulling data from the db(currently the are assigned constants for testing purposes). These are the fields that I am tring to set equal to the sizes. For instance if they choose "large" then the price should be tprice1, "extra large" should be tprice2, "2X" should be tprice3, if it isn't any of these then the price is tprice(normal).

<html>

<head>
<title>New Page 1</title>

<script language="JavaScript">
function computetotalprice()
{
var f = document.forms[0]
f.showtotal.value = f.Quantity.value * f.showprice.value
}

function computeprice()
{
var f = document.forms[0]
var newprice

if (f.sizeselector[f.sizeselector.selectedIndex].value == 3)
{newprice = f.tprice1.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}
else if(f.sizeselector[f.sizeselector.selectedIndex].value == 4)
{newprice = f.tprice2.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}

else if(f.sizeselector[f.sizeselector.selectedIndex].value == 5)
{newprice = f.tprice3.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}

else
{newprice = f.tprice.value;
f.showsizeselection.value = f.sizeselector.selectedIndex;
f.showprice.value = newprice;
}
}

</script>

</head>

<body>
<form>
<select size="1" name="sizeselector" onchange = choosesize(this)>
<option selected></option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
<option>Extra Large</option>
<option>2X</option>
</select><br>
<input name="showsize" value=""><br>
<input name="showsizeselection" value=""><br>
<input name="showprice" value=""><br>
<input name="showtotal" value="TotalPrice"><br>
<input name="tprice" value="12"><br>
<input name="tprice1" value="14"><br>
<input name="tprice2" value="16"><br>
<input name="tprice3" value="18"><br>
</body>
</form>
</html> [sig][/sig]

wood · Sep 8, 2000

Try referencing the option value like so:

document.formName.listboxname.options[document.formName.listboxname.selectedIndex].value

This is compatible with NS and IE. [sig][/sig]

kcates · Sep 8, 2000

Thanks for the replies. I just got the thing working. I went through and assigned the different options with the price values in the script. It is working nicely.

Ken [sig][/sig]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Setting variables equal to what is chosen in a dropdown box

kcates

Programmer

RobSchultz

Programmer

kcates

Programmer

wood

MIS

kcates

Programmer

Similar threads

Part and Inventory Search

Sponsor