DOM onChage attribute on select node

k11stan · Joined: 29 Dec 2004 Posts: 1

Here's the prob. :

I'm dynamically creating and expandable form through DOM (document.createElement appendElement and the like) . The form takes in a different amount if inputs depending on the user (this part i got figured out) .. as soon as a user clicks add another more input fileds are appended to the form - now here's the kicker - i want to use an onChange event to automatically fill the next field depending on the vaule chosen (this works when the form has a fixed amount of fields ) - for some reason the event gets tripped after the field gets appended and dosent work afterwards ..

thanx for any help ...

here's the code (right now it's still rough - the onChange should display alert "stuff" when the field is clicked and different value is selected , instead it pops the alert after select is appended and the options filled in ... whats up ?)

<html>
<head>
<title>Untitled web-page</title>
<script language="javascript">

//the main form - stuff will get appended to it .. hopefully
var f=document.createElement('form');
var projnum = 0 ;//keeps track of projection fields
var testar = new Array("peps","tov","beef");
var testar1 = new Array ("peps1","peps2","peps3");

function projectionset(){
var pgbreak = document.createElement('br');//pagebreak
f.appendChild(pgbreak);
fieldid=new Array ("a","b","c","d","e","f");
for (i=0;i<=4;i++){
fieldname = projnum + fieldid[i];
field (fieldname);
sfield=document.getElementById(fieldname);
sfield.onChange=fieldevent(fieldname);
}
//textf = document.createElement('input');
//texff.setAttibute('type'
projnum++;

}

function formstart(){
f.setAttribute('name','projection');
var b=document.createElement('input');
b.setAttribute('type','submit');
b.setAttribute('value','click to test this form');
f.appendChild(b);
document.body.appendChild(f);
}

function field(name) {
selectf=document.createElement('select');
selectf.id=name;
selectf.name="test stuff";
soption = document.createElement('option');
selectf.appendChild(soption);
soption.appendChild(document.createTextNode(name));
f.appendChild(selectf);
fillarray(name,testar);
}

//this fills out selects
function fillarray(fieldid,valarray){
selfield=document.getElementById(fieldid);
//1st select
if (fieldid.indexOf("a") != -1){
for (j=0;j<=valarray.length;j++){
selfield.options[j+1] = new Option (valarray[j]);
}

}

}

function fieldevent(fname){

alert (fname);
}

</script>

</head>
<body onload="formstart()">
<a href="#" onClick="projectionset()">another</a>

</body>
</html>

kanenas · Joined: 14 Dec 2004 Posts: 191

There are 2 problems in function projectionset() when you set the onChange event handler:

'fieldevent(fieldname)' is evaluated immediately. You need to use (e.g.) an anonymous function to delay evaluation. You may have noticed this already; I bet you wil kick or already have kicked yourself over this one.
assignment to onChange doesn't seem to register the event handler under Gecko or in IE (don't know about other browsers). Use addEventListener and attachEvent or a cross browser library which supports addEventListener instead.

Example:
in projectionset, replace