View Full Version : Help With Dynamic Add/Remove Div

10-12-2006, 08:40 PM
I found some code online that I customized to work for my application. It basically allows the user to click the "Add Account" link and it will dynamically add a table with required fields for account information. If you click the "Remove Account" link, it removes the div from the page.

I just created an update page in my application to allow the users to update the account information. The problem I am having is getting the data into these dynamic tables so that if the user wants to delete a particular account, they can easily do it with the removeEvent() function.

Can someone take a look at my code below and give me an idea of how I can adapt it to do what I need?

I appreciate the help!

<script type="text/javascript">
function addEvent()
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById("theValue").value -1)+ 2;
numi.value = num;
var divIdName = "Account"+num;
var newdiv = document.createElement('div');
newdiv.innerHTML = "<table width=\"731\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"input_borders\"><tr> <td width=\"7\" height=\"25\">&nbsp;</td><td width=\"94\">Account:<span class=\"asterisk\">*</span></td><td width=\"169\"><input name=\"Account_"+num+"\" type=\"text\" class=\"form_box_white\" size=\"25\" /></td><td width=\"85\">Account No.<span class=\"asterisk\">*</span></td><td width=\"140\"><input name=\"AccountNumber_"+num+"\" type=\"text\" class=\"form_box_white\" size=\"20\" /></td><td width=\"87\">Status:<span class=\"asterisk\">*</span></td><td width=\"106\"><select name=\"ASCID_"+num+"\" class=\"form_box_white\"><option value=\"1\">30 Days Late</option><option value=\"2\">60 Days Late</option><option value=\"3\">90 Days Late</option><option value=\"4\">Collection</option><option value=\"5\">Included In Bankruptcy</option></select></td></tr><tr><td height=\"26\">&nbsp;</td><td>Date opened:<span class=\"asterisk\">*</span></td><td><input name=\"DateOpened_"+num+"\" type=\"text\" class=\"form_box_white\" size=\"25\"/></td><td>Balance:<span class=\"asterisk\">*</span></td><td><input name=\"Balance_"+num+"\" type=\"text\" class=\"form_box_white\" size=\"20\" /></td><td >Last activity:</td><td><input name=\"DateOfLastActivity_"+num+"\" type=\"text\" class=\"form_box_white\" size=\"15\" /></td></tr><tr><td height=\"26\">&nbsp;</td><td height=\"20\" colspan=\"3\">Optional reason/argument:<input name=\"ReasonOrArgument_"+num+"\" type=\"text\" class=\"form_box_white\" size=\"25\" /></td><td colspan=\"3\">Account Type:<select name=\"ATID_"+num+"\" class=\"form_box_white\"><option value=\"1\">Credit Card</option><option value=\"2\">Mortgage</option><option value=\"3\">Auto Loan</option><option value=\"4\">Judgement</option><option value=\"5\">Student Loan</option></select></td></tr><tr><td height=\"27\">&nbsp;</td><td height=\"27\" colspan=\"2\">Original Creditor:<input name=\"OriginalCreditor_"+num+"\" type=\"radio\" value=\"Y\" /> Yes<input name=\"OriginalCreditor_"+num+"\" type=\"radio\" value=\"N\" /> No</td><td colspan=\"2\">Account Closed:<input name=\"AccountClosed_"+num+"\" type=\"radio\" value=\"Y\" /> Yes<input name=\"AccountClosed_"+num+"\" type=\"radio\" value=\"N\" /> No</td><td colspan=\"2\">&nbsp;</td></tr></table><a href=\"javascript:;\" onclick=\"removeEvent(\'"+divIdName+"\')\">Remove "+divIdName;"</a>";

function removeEvent(divNum)
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(divNum);

<form action="/CDPro/javascriptTesting.cfm" method="POST">
<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addEvent();">Add An Account</a></p>
<div id="myDiv"> </div>
<input type="submit" />

10-12-2006, 09:34 PM

Problem solved on this one here. I took a hard look at the code and tried to understand it line by line till I figured out what part of the code I needed to manipulate to make it work. Now I will go in with ColdFusion and make this dynamic since I did it by hand while I was working the problem out.