Dynamic Form IE8 Error

Question

I’m trying to create a dynamic form that adds elements in a certain table when a button is clicked. I do this by calling a javascript function that will, in this example, create a new text box that has a name and type of “item_3” with its remove link beside it. The webpage runs just fine in firefox and chrome possibly due to the fact that they doesn’t strictly use W3C like internet explorer. It will not run in IE8 and will give the error “Unknown Runtime Error”. I’m sure that problem has to do with DOM and how I am using my elements but I need a way to add an element dynamically in a specific table. Here is the head:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<script language="Javascript" type="text/javascript"> 

//Add more fields dynamically.
function addField(area,type) 
{
    if(!document.getElementById) return; //Prevent older browsers from getting any further.
    var field_area = document.getElementById(area); //Select table to insert element

    //Example, i want a textbox with id and name as item_3
    var type = "item_";
    var count = "3";

    //Add html to insertiontable table
    field_area.innerHTML += "<tr><td colspan='2'><input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a></td</tr>";
}

</script> 
</head>

The body section contains my form. There are two tables, table1 and insertiontable. Table one contains a textbox along with a button to inserting a the new "item_3" element into insertiontable.

<body>

<form name="newbookform1" method="post" action =""> 
<!--Table one-->
<table id="table1" align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td><strong>What:</strong></td><td><input type="text" name="item_1" id="item_1" /></td><td><input type="button" value="Add New Item Type"     onclick="addField('insertiontable','item_');" /></td></tr>
</table>

<!--Table two-->
<table id="insertiontable" align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td colspan="2"><input type="text" name="item_2" id="item_2" /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);"> Remove Box</a></td></tr>
</table>

</form> 

</body>
</html>

Cleaning this up is a headache for me, how can this work in IE8 with valid HTML? Your help is greatly appreciated.

score 0 · Answer 1 · edited Aug 22 '11 at 19:53

0

IE is real funny about modifying tables with javascript. You have to use document.createElement. This should work for you.

//Add html to insertiontable table
    var tbody = document.createElement('tbody');
    var tr = document.createElement('tr');
    var td = document.createElement('td');

    td.setAttribute('colspan', '2');

    var inp = document.createElement('input');
    inp.setAttribute('type', 'text');
    inp.setAttribute('name', 'item_' + count);
    inp.setAttribute('id',  'item_' + count);

    var a = document.createElement('a');
    a.setAttribute('style', 'cursor:pointer;color:blue;');
    a.setAttribute('onclick', 'this.parentNode.parentNode.removeChild(this.parentNode);');
    a.innerText = " Remove Box";

    td.appendChild(inp);
    td.appendChild(a);

    tr.appendChild(td);
    tbody.appendChild(tr);

    field_area.appendChild(tbody);

edited Aug 22 '11 at 19:53

T. Junghans

11,385
7
52
75

answered Aug 22 '11 at 18:54

Johnie Karr

2,744
2
35
44

You also have to use tbody when adding rows in IE. I haven't done much with JavaScript in a long time so I just put that code together off the top of my head, but I tested it and it does work. I would also recommend that you take a look at jQuery. – Johnie Karr Aug 22 '11 at 18:55
Bear in mind that "innerText" won't work in all browsers. See: http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox. "setAttribute in conjunction with "style" also won't work in all browsers. See: http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work_in_IE_when_used_with_th.html – T. Junghans Aug 22 '11 at 19:08
good point @TJ. I forgot about that. jQuery really is the best solution here. – Johnie Karr Aug 22 '11 at 19:10
Fantastic! Although in firefox the remove box dosent show up and sadly in IE the remove box is not a hyper link and not clickable. – xoxo Jenny Shu oxox Aug 22 '11 at 19:14
Oh well that explains it. @TJ and Johnie do you think you guys can find a alternative to doing the exact same thing using jQuery? – xoxo Jenny Shu oxox Aug 22 '11 at 19:23
Just a quick search on bing returned this: [link]http://stackoverflow.com/questions/171027/add-table-row-in-jquery and several other examples as well. – Johnie Karr Aug 22 '11 at 19:28
@Jenny Shu: Here's a working example with jQuery: http://jsfiddle.net/tangibleJ/9Ut2x/4/. The code could still be optimized by making the javascript unobtrusive and remove all inline css and javascript. – T. Junghans Aug 22 '11 at 20:16

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

Here's a similar question: Internet Explorer Javascript/ Dom Object add rows problem

I agree with either using jQuery to do dom manipulation or use the dom methods provided by javascript.

edited May 23 '17 at 12:04

Community

1
1

answered Aug 22 '11 at 18:56

T. Junghans

11,385
7
52
75

ZenMaster · Answer 3 · 2011-08-22T19:17:47.017

This should work:

replace:

 //Add html to insertiontable table
    field_area.innerHTML += "<tr><td colspan='2'><input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a></td</tr>";

with:

var row = document.createElement("tr");
var cell = document.createElement("td");
cell.innerHTML = "<input type='text' name='"+(type+count)+"' id='"+(type+count)+"'/><a style='cursor:pointer;color:blue;' onclick='this.parentNode.parentNode.removeChild(this.parentNode);'> Remove Box</a>";
row.appendChild(cell);
field_area.appendChild(row);

Simply put - innerHTML for tables is messed up. You'd have to put your HTML string into a cell and then append the cell to a row and the row to the table.

Dynamic Form IE8 Error

3 Answers3