Forum Moderators: open
I have a drop down menu generated from an xml file using xsl. The option values are product names and are passed onto a form results. However, when a user selects a product, I would like its price to appear in a text box next to the drop down menu. My solution was make the <option name="price" value="product">. using that solution/idea, this.form.prone.value = this.form.done.name. Make sense so far? The problem is the fact it is a drop down menu.
Here's simplified HTML -
<form name="orderform" id="orderform">
<select name="done">
<option name="9.99" value="Product 1">Product 1</option>
<option name="5.50" value="Product 2">Product 2</option>
<option name="12.00" value="Product 3">Product 3</option>
</select>
<input name="prone" value="" size="6" />
</form>
Bottom line - onchange I would like the price in option name to appear in <input name="prone" value="" size="6" /> without any arrays.
Any help would be greatly appreciated.
Marshall
this.form.done.name
try
this.form.done.options[this.form.done.selectedIndex].name
Marshall
Marshall
Marshall
Consider if price can be encoded within the value attribute.
Bottom line - onchange I would like the price in option name to appear in <input name="prone" value="" size="6" /> without any arrays.
<option value="Product 1$9.99">Product 1</option>
<option value="Product 2$5.50">Product 2</option>
<option value="Product 3$12.00">Product 3</option>
So on change you'd need to fine the $ and get only the string to the right of that and put that into the prone field. In the server-side code that processes the form, you'd need to strip off everything from the $.
done = 5.99
Instead, it's better to have something like
done = prod2:5.99
(Another permutation of Fotiman's suggestion.)
So your server side programming will be able to determine it's product 2. You'd have to split the submitted data on on the colons, just like in the Javascript below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
window.onload=function() {
document.getElementById('done').onchange = function() {
var ind = document.getElementById('done').selectedIndex;
var val = document.getElementById('done').options[ind].value;
params=val.split(':');
if (ind > 0) { val = '$' + params[1]; }
document.getElementById('prone').value=val;
}
}
</script>
</head>
<body>
<form name="orderform" id="orderform">
<select name="done" id="done">
<option value="">Select</option>
<option value="prod1:9.99">Product 1</option>
<option value="prod2:5.50">Product 2</option>
<option value="prod3:12.00">Product 3</option>
</select>
<input name="prone" id="prone" style="border: none;" onFocus=blur(); value="" size="6">
</form>
</body>
</html>
I really appreciate everyone's' help.
Marshall
There is no name on options because it already has a name, the name of the select. Select is an element type select-one, which is why all the options are the select's values.
The select options are generated from an xml file using xsl -
<select name="dfive" class="button" onchange="this.form.prfive.value=(this.form.dfive.options[this.form.dfive.selectedIndex].id), startCalc();">
<option id="0.00" value="Nothing Selected">Select Item</option>
<option id="0.00" value="Item Deleted" style="color:#FFF;background-color:#580000;font-weight:bold;">Delete Item</option>
<xsl:for-each select="/new/item">
<xsl:sort select="category"/>
<option><xsl:attribute name="id"><xsl:value-of select="price"/></xsl:attribute><xsl:attribute name="value"><xsl:value-of select="category"/> : <xsl:value-of select="image/title"/> - <xsl:value-of select="partno"/></xsl:attribute><xsl:value-of select="category"/> : <xsl:value-of select="image/title"/></option>
</xsl:for-each>
<option id="0.00" value="Item Deleted" style="color:#FFF;background-color:#580000;font-weight:bold;">Delete Item</option>
</select>
In the HTML, there is a row of five cells -
Qty ¦ Description ¦ Unit $ ¦ Unit Total $ ¦ Delete Item
(qfive) ¦ (dfive) ¦ (prfive) ¦ (subfive)
A ¦ B ¦ C ¦ C ¦ D
A = text box enter quantity
B = XML generated drop down menu select product
C = readonly text boxes displaying amount and total
D = a button to delete the item entirely
You will also note outside the for-each there are extra options to delete the item.
This trick also worked well for the sales tax multiplier. As I said, with all the options having id's may not be compliant since some will repeat values, but I can live with that on one page now and then.
Marshall
