Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Dynamic table works in Firefox, fails in IE

    This script is supposed to take new submissions for contact information from a representative of the company. The idea is, they click the "+" button, and I create a new row of fields for them to fill in. They'll click themselves as many rows as they need right now, and I'll process however many they give me in PHP.

    The script looks like this:
    Code:
    <script type="text/javascript">
    
    var fieldCount = 1;
    
    function addfields() {
    	
    	
    	var newrow = document.createElement('tr');
    	
    	var firsttd = document.createElement('td');
    	firsttd.appendChild(document.createTextNode('&nbsp;'));
    	newrow.appendChild(firsttd);
    	
    	var secondtd = document.createElement('td');
    	var compfield = document.createElement('input');
    	compfield.type = 'text';
    	compfield.name = "Company_Name" + fieldCount;
    	compfield.id = "Company_Name" + fieldCount;
    	secondtd.appendChild(compfield);
    	newrow.appendChild(secondtd);
    	
    	var thirdtd = document.createElement('td');
    	var cfirst = document.createElement('input');
    	cfirst.type = 'text';
    	cfirst.name = 'Contact_Firstname' + fieldCount;
    	cfirst.id = 'Contact_Firstname' + fieldCount;
    	thirdtd.appendChild(cfirst);
    	newrow.appendChild(thirdtd);
    	
    	var fourthtd = document.createElement('td');
    	var clast = document.createElement('input');
    	clast.type = 'text';
    	clast.name = 'Contact_Lastname' + fieldCount;
    	clast.id = 'Contact_Lastname' + fieldCount;
    	fourthtd.appendChild(clast);
    	newrow.appendChild(fourthtd);
    	
    	var fifthtd = document.createElement('td');
    	var email = document.createElement('input');
    	email.type = 'text';
    	email.name = 'Email' + fieldCount;
    	email.id = 'Email' + fieldCount;
    	fifthtd.appendChild(email);
    	newrow.appendChild(fifthtd);
    	
    	var sixthtd = document.createElement('td');
    	var fax = document.createElement('input');
    	fax.type = 'text';
    	fax.name = 'Fax' + fieldCount;
    	fax.id = 'Fax' + fieldCount;
    	sixthtd.appendChild(fax);
    	newrow.appendChild(sixthtd);
    	
    	var seventhtd = document.createElement('td');
    	var phone = document.createElement('input');
    	phone.type = 'text';
    	phone.name = 'Phone' + fieldCount;
    	phone.id = 'Phone' + fieldCount;
    	seventhtd.appendChild(phone);
    	newrow.appendChild(seventhtd);
    	
    	var newvend = document.getElementById('newvend');
    	newvend.appendChild(newrow);
    	
    	fieldCount++;
    	
    }
    </script>
    ... and the section in question of the form looks like:
    Code:
    <table id="newvend">
    <tr id="newvendheader"><td><button onclick="addfields(); return false;">+</button></td><td>Company Name</td><td>Contact First</td><td>Contact Last</td><td>Email</td><td>Fax</td><td>Phone</td></tr>
    <tr id="newvendrow"><td>&nbsp</td><td><input type="text" name="Company_Name"></td><td><input type="text" name="Contact_Firstname"></td><td><input type="text" name="Contact_Lastname"></td><td><input type="text" name="Email"></td><td><input type="text" name="Fax"></td><td><input type="text" name="Phone"></td></tr>
    </table>
    I tried this with a <tbody> wrapped inside the <table>, no help.

    None of this gives an error in IE, it just doesn't do the appending. Works great in Firefox and Safari.

    Any suggestions?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    It is a matter of HTML rather, as the TABLE must have a TBODY (from the interpretor's point of view) . In fact TBODY is HTML mandatory, but Javascript compulsory. Even if the TBODY is not HTML written, Javascript "sees" it, so that the rows' parent should be TBODY, not TABLE.

    var newvend = document.getElementById('newvend').getElementsByTagName('tbody')[0];

    Note that getElementsByTagName('tbody') returns a collection (as a table can have more than one tbody element). This is the reason for you must use the index [0] to specify that it is the first tbody of the table.
    Last edited by Kor; 02-01-2006 at 12:26 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •