document.createElement not working on IE 8 and below

marvolo

New Member
I have this for that lets users upload pictures. I wanted to limit the number of pictures to 4. At first it shows only one input field, then if a user wants to add more they can click on Button-Add-icon.png and another input field appears. When they reach four inputs and they decide to remove one they click on Button-Delete-icon.png.This whole thing works fine on Firefox, Chrome, Seamonkey and IE9. But it doesn't work on IE8, IE7 and before.Could someone give a hint on how to get it fixed?Thanks\[code\] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans titre</title> <script type="text/javascript"> var totalItems = 0; function addItems() { if(totalItems < 3) { var table1 = document.getElementById('tab1'); var newrow = document.createElement("tr"); var newcol = document.createElement("td"); var input = document.createElement("input"); input.type="file"; input.name="image[]"; newcol.appendChild(input); newrow.appendChild(newcol); table1.appendChild(newrow); totalItems++; } else { //Display your message here.. } } function remItems(){var table1 = document.getElementById('tab1');var lastRow = table1.rows.length;if(lastRow>=2) { table1.deleteRow(lastRow-1); totalItems--; }} </script> </head> <body> <table align="center" border="0" id="tab1" > <tr> <td width="218" align="center"><input type="file" name="image[]" /></td> <td width="54" align="center"><img src="http://stackoverflow.com/questions/15510625/images/Button-Add-icon.png" style="cursor:pointer" onclick="addItems()" /> </td> <td><img src="http://stackoverflow.com/questions/15510625/images/Button-Delete-icon.png" style="cursor:pointer" onclick="remItems()" /> </td> </tr> </table> <table align="center" border="0" id="tab2"> </table> </body> </html>\[/code\]
 
Back
Top