On this page, I have a form to enter information about students on a given roster. Each student is listed in a table with a drop down box and a comments field. There is an "add another" button for each student, so that if the user wants to enter a second note about a student, they can.
Clicking the button launches this javascript function:
var counter=1;
function multipleDemerits(studentID) {
counter++;
var anotherDemeritRow = "<select name='behavior_"+studentID+"_"+counter+"'><option value=0>Select --></option><option value=0></option><option value=0>1 demerit behaviors</option><option value=1> unprepared</option><option value=2> incomplete hw</option><option value=3> electronics/phone</option><option value=4> uniform</option><option value=5> talking/making noise</option><option value=0></option><option value=0>2 demerit behaviors</option><option value=6> tardy</option><option value=7> wasting time</option><option value=8> food/gum</option></select> Comments: <input name='comments_"+studentID+"_"+counter+"' type='text' size='30' maxlength='100'/><br /> ";
document.getElementById(studentID).innerHTML += anotherDemeritRow;
}
The new drop down and comments field display perfectly in Mac browsers, but not so in Windows Firefox or IE. The height of the current table row does not increase, so the additional fields start to overlap the rest of the rows in the table. NOT what I want at all.
Any ideas from Windows browsers experts out there? Thanks!
Update: Changed to jQuery's append ... no difference. However, if I add an alert statement to the very beginning of the function, NOW it works. Huh?!?!