[Solved] Cloned Node not working in IE
Posted: Mon Jun 01, 2009 2:04 pm
This code works fine in Firefox and generates no errors, but it generates an "Error: Object expected" with a wonky line number in IE.
Part of the page the code works on:
The Javascript that's not working:
Any specific steps to take to get IE doing something other than sit there would be appreciated. I'm considering writing another, static, page for IE users... 
Part of the page the code works on:
Code: Select all
<fieldset>
<legend>Guest List</legend>
<div id="guestList">
<!--<input type="button" name="regEdit" id="regEdit" value="edit" onclick="javascript:history.go(-1)"/>
-->
<div id="guestForm1" class="guestForm">
<h4>Guest 1</h4>
<table>
<tr><td>
<label for="Guests[guest1][First]">First Name*:</label> </td><td>
<input type="text" name="Guests[guest1][First]" id="Guests[guest1][First]" size="20"/><br /></td><td>
<label for="Guests[guest1][Last]">Last Name*:</label> </td><td>
<input type="text" name="Guests[guest1][Last]" id="Guests[guest1][Last]" class="nochange" size="20" /><br /></td></tr>
<tr><td>
<label for="Guests[guest1][Email]">E-mail*:</label></td><td>
<input type="text" name="Guests[guest1][Email]" id="Guests[guest1][Email]" class="nochange" size="20" /><br /></td><td>
<label for="Guests[guest1][m]">YLS Member:</label> </td><td>
<input type="checkbox" name="Guests[guest1][m]" id="Guests[guest1][m]" value="true" checked="checked"/></td></tr>
</table>
</div>
</div>
<input type="button" name="addGuest" value="Add a Guest" onClick="addOne()"/> <input type="button" name="minGuest" value="Remove Last Guest" onClick ="takeOne()" id="take"/>
</fieldset>Code: Select all
function addOne(){
//up the guest count
gnum += 1;
//make the new names/ids/fors
var form = 'guestForm'+gnum;
var first = "Guests[guest"+gnum+"][First]";
var last = "Guests[guest"+gnum+"][Last]";
var email = "Guests[guest"+gnum+"][Email]";
var member = "Guests[guest"+gnum+"][m]";
/*add a set of fields for a guest*/
//clone a guest form div
var newGuest = document.getElementById('guestForm1').cloneNode(true);
newGuest.setAttribute('id', form);
//set the new title
newGuest.getElementsByTagName('h4')[0].firstChild.nodeValue='Guest '+gnum;
//set the new labels and Id's
newGuest.getElementsByTagName('label')[0].for = first;
newGuest.getElementsByTagName('input')[0].id = first;
newGuest.getElementsByTagName('input')[0].name = first;
newGuest.getElementsByTagName('input')[0].value = "";
newGuest.getElementsByTagName('input')[0].readonly = "";
newGuest.getElementsByTagName('input')[0].class = "changeme";
newGuest.getElementsByTagName('label')[1].for = last;
newGuest.getElementsByTagName('input')[1].id = last;
newGuest.getElementsByTagName('input')[1].name = last;
newGuest.getElementsByTagName('input')[1].value = "";
newGuest.getElementsByTagName('input')[1].readonly = "";
newGuest.getElementsByTagName('input')[1].class = "changeme";
newGuest.getElementsByTagName('label')[2].for = email;
newGuest.getElementsByTagName('input')[2].id = email;
newGuest.getElementsByTagName('input')[2].name = email;
newGuest.getElementsByTagName('input')[2].value = "";
newGuest.getElementsByTagName('input')[2].readonly = "";
newGuest.getElementsByTagName('input')[2].class = "changeme";
newGuest.getElementsByTagName('label')[3].for = member;
newGuest.getElementsByTagName('input')[3].id = member;
newGuest.getElementsByTagName('input')[3].name = member;
newGuest.getElementsByTagName('input')[3].checked = "";
newGuest.getElementsByTagName('input')[3].readonly = "";
newGuest.getElementsByTagName('input')[3].class = "changeme";
//append the guest form div
document.getElementById('guestList').appendChild(newGuest);
//update the fee
//document.getElementById('total').value = calDue();
//show take one button
document.getElementById('take').style.display = 'inline';
}