Coding Forum

**pojo** · 08-06-2004, 03:51 PM

Hi, I am not sure if I would need to use javascript or a form of sometype, but I want to make it so when I select an item from my drop-down menu, the price would change according to the item you select. Here is how it looks right now http://www.arcing.net/arcing/d2colle...ast-armor.html. Lastly and most challenging, I am not sure how to change the add-to-cart button to get a different price value for each option selected.

**Rufo** · 08-07-2004, 09:00 AM

Give all your forms unique names, and for each item, create a SPAN that will contain the price.

Assign each listbox option an "onClick" property which calls a javascript function called, say, "showprice", passing 3 arguments:
* name of associated form
* name of SPAN to contain price
* price

The function should change the contents of the SPAN whose name is passed as an argument so it contains the price, prefixed with a dollar sign. It should also change the "amount" value of the specified form to contain the price also (without the dollar sign).

Rufo.

**pojo** · 05:54 PM

heh in my previous post I probably should have said I don't know much code other than some HTML, but I tried this and it didn't work. See if you can tell where I went wrong

.

this went in the cell with the price displayed in it...

Code:

<td width="9%" valign="middle"><strong>$<span id="textcontainer1">45.95</span></strong>

this went in the cell with the drop-down menu...

Code:

<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">

and this went in the code with the add-to-cart button...

Code:

<input type="hidden" name="amount" value="document.getElementById('textcontainer1').innerHTML">

**Rufo** · 08-09-2004, 08:06 AM

<html>
<head>

<script type="text/javascript">
function showprice(n, p) {
document.getElementById('textcontainer'+n).innerHT ML='$'+p;
eval('document.paypal'+n+'.amount').value=p;
}
</script>

</head>
<body>

<form name="paypal1" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">

<span id="textcontainer1">Select an item</span>

<select name="item_name">
<option onclick="showprice(1,'10')" value="Item one">Item one</option>
<option onclick="showprice(1,'20')" value="Item two">Item two</option>
<option onclick="showprice(1,'30')" value="Item three">Item three</option>
</select>

<input type="text" name="amount" value="" />

</form>

</body>
</html>

For additional forms, change the numbers in bold to 2, then 3 etc.

The numbers in inverted commas (in this case '10', '20', '30') are the prices.

Rufo.

**pojo** · 08-11-2004, 05:47 PM

for some reason the <option onclick="showprice(1,'10')" value="Item one">Item one</option> does not work... i get an error saying "the onclick attribute of the OPTION tag is not supported by any web browser" :/.

**Rufo** · 08-13-2004, 11:04 AM

Quote:

Originally Posted by pojo

"the onclick attribute of the OPTION tag is not supported by any web browser"

That's simply wrong. It works in all Mozilla-based browsers, and I'm guessing many others support it, too.

The only real alternative to individual onClicks is a single onChange, with different options mapped to values via an array.

Rufo.