[Javascript] "Michael Borchers" <borchers at tridem.de>
Ryan Cannon
ryan at ryancannon.com
Wed May 4 14:01:54 CDT 2005
I think your problem has more to do with attempting to access a form
element whose name duplicates the format of an multidimensional array. I
would recomment changing your element names in order to make them
compatible or accessing that element via its ID or the built-in HTML
elements. Watch your HTML too, the id attribute cannot begin with a digit.
Examples:
var elementViaID=document.getElementById("select0");
var
elementViaDOM=document.getElementsByTagName("form")[0].getElementsByTagName("select")[0];
var elementViaOutdatedHTML=document.forms[0].elements[1]
All three of those will return the object for which you are looking
without having to use the name field. Also, if you want to display a
unicode character with Javascript (the Euro symbol, U+20AC, in this case),
you must escape its unicode reference with a "\u" for example:
alert("I can't believe this costs 10\u20AC!");
The following function and form worked for me in IE 5/mac, Safari and
Firefox, and allows you to locate all of the javascript in a separate
file.
Script:
window.onload=function() {
document.getElementById("list").onchange=function(e) {
// cross browser stuff to sure that e is the event
// and targ is the element that fires the event
if (!e) var e=window.event;
var targ;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
if (targ.nodeName.toLowerCase() != 'select')
targ = targ.parentNode;
// this then takes the value of the element's select option,
// and replaces the value of a text input with than numbe,
// adding a Euro symbol
document.getElementById("product").value=targ.getElementsByTagName("option")[targ.selectedIndex].value+"\u20AC";
}
}
XHTML:
<form action="" method="post" name="orders">
<p><input id="product" name="products_id[0][products_price]" type="text"
/></p>
<p><select id="list" name="products_id[0][products_id]" size="1">
<option value="2">Item1</option>
<option value="6">Item2</option>
</select></p>
</form>
Hope that helps,
--
Ryan Cannon
Instructional Technology
Web Design
http://RyanCannon.com
More information about the Javascript
mailing list