...

View Full Version : adding extra fields via a click of the button



runnerjp
10-15-2008, 10:29 PM
im trying to add extra fields via a click of a button... my code is as follows


<form id="FormName" action='' method="post" name="basic">
<script type="text/javascript">
function addRow(tableID)
{

// Get a reference to the table
var tableRef = document.getElementById(tableID);
var refNode = tableRef.rows(tableRef.rows.length-5);

var newRow = tableRef.rows(1).cloneNode(true);
tableRef.firstChild.insertBefore(newRow,refNode);
return;

}
</script>
<table id="theTable" width="440" border="5" align="center" cellpadding="0" cellspacing="2">
<tr>
<td colspan="3" align="center" valign="middle"><p align="center"> Select your event and enter your pb here!</p></td>
</tr>
<tr>
<td align="right">
<select class="inputedit" id="event" name="event[]"><option>100m
</option><option>200m
</option><option>400m
</option><option>800m
</option><option>1500m
</option><option>3000m
</option><option>5000m
</option><option>10,000m
</option><option>5k Road
</option><option>10k Road
</option><option>H Marathon
</option><option>Marathon
</option><option>3k S/Chase
</option><option>110m Hurdles

</option><option>400m Hurdles
</option><option>High Jump
</option><option>Pole Vault
</option><option>Long Jump
</option><option>Triple Jump
</option><option>Shot
</option><option>Discus
</option><option>Hammer
</option><option>Javelin
</option><option>Decathlon
</option><option>10k Walk
</option><option>20k Walk
</option><option>50k Walk
</option><option>60m (I)
</option><option>60m Hurdles
</option><option>Hept(I) </option></select>
</td>
<td colspan="2"><input class="inputedit" id="pb" name="pb[]" type="text" size="25" value="" maxlength="255" /></td>
</tr>
<tr>
<td width="150"><div align="right"><label for="dob"></label></div></td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="150"><div align="right"><label for="first_name"></label></div></td>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td width="150"><div align="right"><label for="last_name"></label></div></td>
<td colspan="2"><p><label for="birthday"></label></p></td>
</tr>
<tr>
<td width="150" align="right">status</td>
<td colspan="2"><span onclick="addRow('theTable')">+Add</span></td>
</tr>
<tr>
<td width="150"></td>
<td width="112"><input name="basic" type="submit" class="submit-btn" value="submit"><input type="hidden" name="id" value="1"></td>
<td width="170">&nbsp;</td>
</tr>
</table>
</form>

but for some reason my button is unclickable :S and i have no idea if it will add both the drop down menu and the textbox....

also i have saved it as select.php for now as im going to be adding php to the file

any ideas?

rangana
10-16-2008, 01:19 AM
Highlighted are the ammendments:


function addRow(tableID)
{

// Get a reference to the table
var tableRef = document.getElementById(tableID);
var refNode = tableRef.rows[tableRef.rows.length-5];

var newRow = tableRef.rows[1].cloneNode(true);
tableRef.insertBefore(newRow,refNode.parentNode);
}


Hope that helps.

runnerjp
10-16-2008, 10:16 AM
thanks for trying but that was not the problem... infact it was a ff issue... i have changed the code as shown below


function addRow(tableID)
{
// Get a reference to the table
var tableRef = document.getElementById(tableID).getElementsByTagName("TBODY")[0];
var refNode = tableRef.rows[tableRef.rows.length-5];
var newRow = tableRef.rows[1].cloneNode(true);
tableRef.insertBefore(newRow,refNode);
return 1;

}

rangana
10-16-2008, 10:18 AM
What's the need of returning 1?

Also, what's the problem if not the one I've highlighted on post # 2? Those are vital errors from your end, which I believe is enough (for me) to be consider as a problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum