Question about drop downs updating other values

[mildish]

okay, i'm somewhat of a beginner when it comes to this stuff. what i am trying to do is update other values based on what is selected in a drop down. this info will then get passed to paypal. so what i am looking for is when a user changes the size of the item (drop down of three sizes), it changes the value of the 'amount' field (the price).

here is the portion of code that I have referenced.

<SCRIPT type="text/javascript">
function setThePrice() {
if (document.getElementById('Sze').value=="Small") { document.getElementById('Amount').value="10.00"; }
if (document.getElementById('Sze').value=="Medium") { document.getElementById('Amount').value="15.00"; }
if (document.getElementById('Sze').value=="Large") { document.getElementById('Amount').value="20.00"; }
</SCRIPT>


<form target="" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<table>
<tr>
<td>
<input type="hidden" name="on0" value="Size">
<span class="contact">Size</span>
</td>
<td>
<select name="os0" id="Sze" class="contact" onchange="setThePrice()">
<option value="Small">Small - 12 oz
<option value="Medium">Medium - 1.5 lb
<option value="Large">Large - 3 lb
</select>
</td>
</table>
<br>
<input type="image" src="http://images.paypal.com/images/x-click-but22.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value=<?php echo $Bus; ?>>
<input type="hidden" name="item_name" value='<?php echo $Name; ?>'>
<input type="hidden" id="Amount" name="amount" value="10.00">

<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-ShopCartBF">
</form>

What am I missing? or an I way off base? Any help would be appreciated. Thanks!

[mildish]

ok, i'm an idiot. the closing bracket for the function would help. if any thing else is wrong though, i'd love to hear how I could make this better or anything i'm overlooking.

[Fotiman]

Your function could be made slightly more efficient by creating variables to reduce duplicate calls to getElementById, and instead of multiple if statements you could use a switch.

function setThePrice() {
var Sze = document.getElementById('Sze'),
  Amount = document.getElementById('Amount');
switch (Sze.value) {
case "Small":
  Amount.value="10.00";
  break;
case "Medium":
  Amount.value="15.00";
  break;
case "Large":
  Amount.value="20.00";
  break;
}
}

However, what happens if the user has JavaScript disabled? Or what happens if the user runs their own script client side to change the amount value to "0.01"? You should have some server side processing that validates the data before you send it to PayPal.

[mildish]

all very good points. i am still having trouble with this current approach anyway. it may be time to try to do this a different way. this way seems to work fine for the first instance, but i have the form as a part of a while loop and for some reason the javascript will only work in association to the first instance.

how would i go about doing the same basic thing (changing the price based on the value of the drop down) without javascript? any suggestions?

[Fotiman]

You would need to handle it server side, via PHP or some other server side language. Have the form submit to one of your server side pages before passing the info on to paypal.