[Solved] Cloned Node not working in IE

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

[Solved] Cloned Node not working in IE

Post by a.heresey »

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:

Code: Select all

 
<fieldset>
<legend>Guest List</legend>
 
<div id="guestList">
<!--<input type="button" name="regEdit" id="regEdit" value="edit" onclick="javascript&#058;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>
The Javascript that's not working:

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';
 
 
}
 
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... :(
Last edited by a.heresey on Tue Jun 02, 2009 8:24 am, edited 1 time in total.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Cloned Node not working in IE

Post by pickle »

It'd help to find the spot in the code that's generating the error. If you put alert()s in some spots, that will halt execution of your Javascript. You can then narrow down what line is actually causing the problem.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Re: Cloned Node not working in IE

Post by a.heresey »

Hmm, put SEVEN alerts in the code, including one that would execute as soon as the function in question started executing. None appeared.

They all pop up as expected in firefox, but just the error pops up in ie. I'm calling the function as an event handler on a button in a form:

Code: Select all

 
<input type="button" name="addGuest" value="Add a Guest" onClick="addOne()"/>
 
Help? :?
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Re: Cloned Node not working in IE

Post by a.heresey »

Found the problem, it's setting the for attribute of the new label node. For's reserved in Javascript, so I assume that's why IE is having a hissy.

The for has to change for the labels to match the new form fields. So I have two options, take off the labels completely or find another way to add the for attribute.

Anyone know another way to set the "for" attribute on a cloned node?

Problem child is below:

Code: Select all

newGuest.getElementsByTagName('label')[0].for = first;
User avatar
a.heresey
Forum Commoner
Posts: 59
Joined: Wed Dec 13, 2006 7:31 pm
Location: Chesapeake, VA, US

Re: Cloned Node not working in IE

Post by a.heresey »

This is what ended up working to set the for attribute on the cloned label node in both Firefox and IE:

Code: Select all

 
    newGuest.getElementsByTagName('label')[2].removeAttribute('for');
    var forEmail = document.createAttribute('for');
    forEmail.value = email;
    newGuest.getElementsByTagName('label')[2].setAttributeNode(forEmail);   
Post Reply