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>
</select>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.
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<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. */
};
// ]]>
</script>
</head>
<body>
<div id="content">
<form id="testform" action="#" onsubmit="return false;">
<div>
<!-- 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>
</div>
</form>
</div>
</body>
</html>Brilliant, thanks.
This will do the trick
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.