Dynamic fields and refreshing throught innerHTML
Marcin Domaslawski
I've got simple script which adds to pointed DIV another DIV which contains
1 combobox (select) and textbox (input) - it's a AddNewRow() function. Every
field has got unique ID (acording with script below). There is also
getNewDig(int) function, which change value of appropriate input field
(checks value of select field and put it to input e.g. if in Pr_1 value has
changed than that value is set to the Number_1 input).
Problem is, values of existing fields are refreshing when new row is added
(to check it: click Add New Row, set value in select field, click Add New
Row).
Problem does not occur with IE. I suppose it's caused by innerHTML which
refresh whole document.getElementById( 'Tutaj' ).
Page:
-----------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<html>
<head></head>
<body>
<script language="javascript">
<!--
var obField;
var nCount = 0;
function AddNewRow()
{
nCount++;
var sForm = '<div id="Pr_' + nCount + '">';
sForm += '<select name="Number_' + nCount + '" onchange="getNewDig( ' +
nCount + ')">';
for ( var i = 1; i < 101; i++ )
{
sForm += '<option value="' + i + '">' + i + '</option>';
}
sForm += '</select>';
sForm += '<input type="text" name="Rice_' + nCount + '" /></div>';
document.getElementById( 'Tutaj' ).innerHTML += sForm;
getNewDig( nCount );
}
function getNewDig( id )
{
var nNumber = document.getElementsByName( 'Number_' + id )[0].value;
try
{
obField = document.getElementsByName( 'Rice_' + id )[0];
}
catch( e )
{
alert( e );
}
if ( obField )
obField.value = nNumber;
else
alert ( obField );
}
// -->
</script>
<a href="#" onclick="AddNewRow()">Add New Row</a>
<div id="Tutaj">
</div>
</body>
</html>
-----------------
How to solve it ? (I work with FF2.0.3)
-------
Marcin