I have a drop down box in a form like this...

<select name="product[]" id="unitcost">
<option value="92">92mm</option>
<option value="130">130mm</option>

The value selected is passed to a shopping cart. However, I also need to pass a unit price which is different depending on the value selected.
Can anyone give me any pointers as I have been staring at this for hours?
p.s. I know only very basic Javascript.

8 Years
Discussion Span
Last Post by HelenLF

Here's a simple demo, to get you started.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<script type="text/javascript">
// <![CDATA[
// Declaring variable
var prod, index;

prod = function( sel ) {
sel = ( document.getElementById ) ? document.getElementById( sel ) : document.all.sel; // Defined as select element in the form below.

index = sel.selectedIndex; // Return's a pointer of selected option ( wil output 0 if the first option is selected, 1 goes for the second option and so...on... )

// Now let's output the value of the selected state in the text field provided below.

   (( document.getElementById ) ? document.getElementById("price").value = sel.options[index].value : document.all.price = sel.options[index].value );

/* It say's, that if (Opera, Firefox, Konqueror or any other modern browse's) is available-- 
then invoke the ( document.getElementById  method, and show the value of the selected option in textfiead below ), otherwise IE6- will take the last part of the statement. */

// ]]>
<div id="content">
<form id="testform" action="#" onsubmit="return false;">
<!-- Let's attach the function that we've created above, with an onchange event handler -->
<select id="unitcost" name="unitcost" size="1" onchange="prod(/* specifying the id of this select element, in replace **sel** argument, in the prod function */ this.id );">
<option value="92" selected="selected">92mm</option>
<option value="130">130mm</option>
</select><br /><br />
<label for="price"><strong><em>Unit Cost:</em></strong> <input type="text" id="price" name="price" size="20" value="" /></label>
Votes + Comments
Another useful example
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.