onchange call fails in ie, opera

[leatherback]

Dear All,

In continuation of my previous thread, I now face a problem with an onchange() call.

Casically I am building a form using javascript, and when a user changes the second-last field in the form, another row of formfields is added to the form. The first row is added using an onload event, without trouble. Adding the rows manually (By pressing a button) works fine too. however, when i call the function with the onchange it doesn't work in IE or Opera (FF works).

The js:

var counter = 0;

function init() {
	document.getElementById('moreFields').onclick = moreFields;
	moreFields();
}

function moreFields() {
	counter++;
	var newFields = document.getElementById('ingredientroot').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if(theName)
		  {
		  newField[i].name = theName + counter;
		  newField[i].id   = theName + counter;
		  }
	}
	var insertHere = document.getElementById('writeroot');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;
window.onload = init;

The form elements that are inserted:

<div id=\"ingredientroot\" style=\"display: none\">
	<input type=\"text\" name=\"ingredient\" id=\"ingredient\" onkeyup=\"searchSuggest('".$ingredientSuggest."', this.id);\" autocomplete=\"off\"/>
	<input type=\"text\" name=\"amount\" />
	<input type=\"text\" name=\"volume\" />	
	<input type=\"button\" value=\"Remove\" onclick=\"this.parentNode.parentNode.removeChild(this.parentNode);\" />
</div>

and the two way of calling:
Automatically: <input type="text" name="amount" onChange="javascript:moreFields(); " />
Bu this button: <input type="button" id="moreFields" value="Give me more fields!" />

Anybody has a keen eye and spots the problem?

Thanks so much!

J.

 

[tsuji]

>window.onload = moreFields;
>window.onload = init;
Have to combine them otherwise, only the last one won out and executed. (But here, ff won't behave differently.)
[tt]window.onload=function(){moreFields();init();};[/tt]

 

[tsuji]

But after re-ready your init(), it seems you added moreFields() into it. Hence, you can just delete the line.
[tt][red]//[/red]window.onload = moreFields;
window.onload = init;[/tt]

 

[leatherback]

Hi Tsuji,

Thank you for this reply. I see your point, and will remove the window.onload = moreFields. However, the actual loading of the page does not cause me the headache. It is when a user starts filling the form, and it reaches the field with the onChange in it that the script fails to function in IE and opera. Oddly enough, in Firefox it does add a section to the form.

Any idea what the reason might be?

Cheers,

J.

 

[tsuji]

[0] Apart from you ought to assure the php string eventually producing valid html string client side, you have to refrain from naming id colliding with function name. (As far as I am concerned, you _must_ not make id collide with any one of the function name.) In some cases, you can get away with the abberrations... but not in this case.

[1] Rename the element.
[tt]<input type="button" id="moreFields[blue]_xyz[/blue]" value="Give me more fields!" />[/tt]

[2] Reference to a renamed element.
[tt]function init() {
document.getElementById('moreFields[blue]_xyz[/blue]').onclick = moreFields;
moreFields();
}
[/tt]

 

[leatherback]

Hi Tsuji,

Thanks once again for your reply. I fell like such a beginner (Which admittedly, I am in javascript). No worries about the php => HTML. I am reasonable experienced in PhP, having built a series of db driven sites, including full CMS's. This is just the first time I have decided that js is really needed to make this a user friendly website.

Make sense.. Could/should have realized that ID and function names should not be the same, else it bites. I am at work right now, so I will have to test it tonight. Sure you have found my oversight though..

Cheers!

Jelle.

PS: If you ever make it to wherever I am at that moment,: I owe you a beer!

 

[leatherback]

Worked like a charm! All hitched are out of it now. Up to setting the tab-order properly!

Cheers,

J.