Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts

    adding extra fields via a click of the button

    im trying to add extra fields via a click of a button... my code is as follows

    Code:
    <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?

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Highlighted are the ammendments:
    Code:
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    601
    Thanks
    1
    Thanked 2 Times in 2 Posts
    thanks for trying but that was not the problem... infact it was a ff issue... i have changed the code as shown below

    Code:
    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;
     
    }

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •