rendered paste body<html><head><title>Tell a friend Script</title><!-- The styles below are for positioning and table-less-ness of the form --><style type="text/css"> *, html, body { font-family: Arial, sans-serif; font-size: 12px; } label,input, textarea { display: block; width: 200px; float: left; margin-bottom: 10px; padding-right: 20px; } label { text-align: right; width: 200px; } br { clear: left; } ol { list-style: none; padding: 0; margin: 0; text-indent: 0; } li{ clear: left; list-style-type: none; padding: 0; margin: 0; text-indent: 0; }</style><script language="JavaScript" type="text/javascript">function add_friend() { var friend_ol = document.getElementById( 'friend-list' ); // Create the new LI var new_li = document.createElement( 'li' ); // Create the input for it var li_input = document.createElement( 'input' ); var emptylabel = document.createElement( 'label' ); var tellafriend = document.forms['tellafriend']; var femails = tellafriend.elements["femail[]"]; var nbrOfFriends = femails.length; var nbrForShow = nbrOfFriends + 1; alert (nbrForShow); //always = 3 in safari / IE emptylabel.appendChild( document.createTextNode( 'Friend #'+nbrForShow+' email' ) ); li_input.className = 'input-text'; li_input.name = 'femail[]'; li_input.id = 'femail'+nbrForShow; // Add the text input to the LI new_li.appendChild( emptylabel ); new_li.appendChild( li_input ); // Add it to the LI friend_ol.appendChild( new_li ); } </script></head><body onload="add_friend();" ><form id="tellafriend" method="post" action="tell.php"> <label><b>Friend #1 email:</b></label> <input name="femail[]" id="femail1" size="25" type="text"><br /> <label><b>Friend #2 email:</b></label> <input name="femail[]" id="femail2" size="25" type="text"><br /> <br /> <ol id="friend-list"> </ol><br /> <label>Have more friends?</label> <input type="button" class="clear" onclick="add_friend();" value="Add another friend" /><br /> <br /></form><script language="JavaScript" type="text/javascript"> </script></body></html>