Add Row(field) inserts in wrong spot [Archive]

swahabio

08-22-2003, 02:33 PM

I have gotten some help but I still cant figure out how to get a new field inserted into the correct spot. I have 2 tables in which you can add a field to by clicking the add more fields button. But for some reason, no matter which "add more fields" button I hit, the new field appends to table1. Here is my code straight from my ASP page. So if anyone wants to replicate it just copy paste it to an asp page and then run it.

<script language="javascript">

var counter = 0;
function moreFields()
{
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
//insertHere;
window.onload = moreFields;
}
</script>
<form name="FirstPageSubmit" action="secondpage.asp" method="post">
<table name=table1>
<input type="button" value="Give me more fields!" onClick="moreFields()" id=button4 name=button4>

<p class="hr"> </p>


<div name='div1' id="readroot" style="display: none">

<select name="rankingsel_1">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br><br>

<input type="button" value="Remove review" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" id=button1 name=button1>
</div>
<span id="writeroot"></span>
</table>





<table name=table2>
<input type="button" value="Give me more fields!" onClick="moreFields()" id=button4 name=button4>

<p class="hr"> </p>


<div name='div2' id="readroot" style="display: none">

<select name="rankingsel_2">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select><br><br>

<input type="button" value="Remove review" style="font-size: 10px"
onClick="
this.parentNode.parentNode.removeChild(this.parentNode);
" id=button1 name=button1>


</div>
<span id="writeroot"></span>
</table>


<input type="submit" value="Send form" id=submit1 name=submit1>

</form>