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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help With Dynamic Add/Remove Div

    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!

    Code:
    <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.setAttribute("id",divIdName);
    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>";
    ni.appendChild(newdiv);
    }
    
    function removeEvent(divNum)
    {
    var d = document.getElementById('myDiv');
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
    }
    //-->
    </script>
    
    <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" />
    </form>

  • #2
    New Coder
    Join Date
    Jul 2006
    Posts
    45
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Guys,

    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.

    Thanks,

    7079


  •  

    Posting Permissions

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