468,532 Members | 1,904 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,532 developers. It's quick & easy.

code works very fine in Firefox but not in I.E.

Avi
Hi All.

This code works very fine in Firefox but not in I.E.
Can anybody help me out?
it gives ... "Unknown Runtime Error" in I.E.

This code ... Stores N*2 Matrix at Client Side & provide the mean to
send the matrix to server side.

================================================== =====
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<script type="text/javascript">
function addToTable()
{
var value1 = document.frmSecondary.txtValue1.value;
var value2 = document.frmSecondary.txtValue2.value;

document.getElementById("tblRecords").innerHTML += "<tr><td>" + value1
+
"</td><td>" + value2 +
"</td></tr>";

document.frmSecondary.txtValue1.value = "";
document.frmSecondary.txtValue2.value = "";

document.frmSecondary.txtValue1.focus();
}

/*
This function should be called on the onSubmit of primary form
*/
function processFormSubmit()
{
processRecordsTable();
return true;
}

/*
This function processes the Records table to output all rows in the
table
as hidded fields in the frmMain form.

In that form there is a hidden field called "rowCount" which stores the
number of rows
of the n*2 matrix (i.e. the value of n)

AT SERVER SIDE - DO THE FOLLOWING THING
---------------------------------------
Read that rowCount attribute into variable n
for i=1 to n
'for the ith row the value of column1 will be in a attribute named as
'Value1-' & i
'for the ith row the value of column2 will be in a attribute named as
'Value2-' & i
next
*/
function processRecordsTable()
{
//store the table in a variable (for easy access)
var tbl = document.getElementById("tblRecords");
//store the form in a variable (for easy access)
var frm = document.frmMain;

//get the number of rows in the table tblRecords
var rowCount = tbl.rows.length;
//save this count to a hidden field in the form
frm.rowCount.value = rowCount - 1;

//now loop through the table rows and output all values as hidden
fields in form frmMain
//looping from 1 because the 0th row has the table headings
for (var i = 1; i < rowCount; i++)
{
frm.innerHTML += "<input type=hidden name='Value1-" + i + "' value='" +
tbl.rows[i].cells[0].innerHTML + "'>";
frm.innerHTML += "<input type=hidden name='Value2-" + i + "' value='" +
tbl.rows[i].cells[1].innerHTML + "'>";
}
}
</script>

</head>

<body>
<form name="frmMain" action="something.asp" method="post"
onSubmit="return processFormSubmit();">
<table cellpadding="5" cellspacing="5">
<tr>
<td>Enter name</td>
<td><input type="text" name="txtName"></td>
</tr>
<tr>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
<!-- HIDDEN FIELDS -->
<input type="hidden" name="rowCount" value="0">
</form>

<form name="frmSecondary">
<table cellpadding="5" cellspacing="5" border="1">
<tr>
<td>Enter Value 1</td>
<td><input type="text" name="txtValue1"></td>
</tr>
<tr>
<td>Enter Value 2</td>
<td><input type="text" name="txtValue2"></td>
</tr>
<tr>
<td><input type="button" value="Add" onClick="addToTable();"></td>
</tr>
</table>
</form>

<table id="tblRecords" cellpadding="5" cellspacing="5">
<tr>
<td><b>Value 1</b></td>
<td><b>Value 2</b></td>
</tr>
</table>
</body>
</html>
================================================== =====

Thanks in Advance.

Oct 24 '05 #1
1 1659


Avi wrote:

This code works very fine in Firefox but not in I.E.
Can anybody help me out?
it gives ... "Unknown Runtime Error" in I.E. document.getElementById("tblRecords").innerHTML += "<tr><td>" + value1 <table id="tblRecords" cellpadding="5" cellspacing="5">


Although IE 4 introduced the innerHTML property into client-side
scripting it and later versions are picky on which elements allow
setting the property, see the documentation here:
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/innerhtml.asp>
Other browsers have implemented innerHTML to follow IE but often by now
setting innerHTML on certain elements works in browsers other than IE
but not IE.
But of course using innerHTML += is rather clueless as that way the
browser has to serialize to existing element content to a string,
concatenate a new string and then parse that back, including the stuff
that was already parsed.
The W3C DOM allows you to simply create element and insert them as
needed without having to use innerHTML so consider using the W3C DOM e.g.
var tr = document.createElement('tr');
var td = document.createElement('td');
td.appendChild(document.createTextNode('cell content'));
tr.appendChild(td);
var table = document.getElementById("tblRecords");
if (table.tBodies) {
var tbody = table.tBodies[table.tBodies.length - 1];
tbody.appendChild(tr);
}

There is also a "table DOM" where you can call insertRow on a table to
create a new row and insertCell on a row to insert a new cell. But be
aware that those methods have slightly different signatures/possible
parameters in IE and the W3C DOM as specified.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Oct 24 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Coder | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.