[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