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 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing Display in DIVs

    I've been banging my head against the wall for two weeks on this. I'm much more experienced in PHP, and am pretty new to js. In the post below I've pasted in the code.

    There are 3 DIVs (div1, div2, div3), and each DIV defaults to displaying the textbox for you to enter a name (name1, name2, name3). Next to each name is a link to delete it, and at the top of the form is a link to add a new name. You can only have a total of 3 names listed.

    The function I am looking for is that if you delete name2, then name1 continues to display in div1, and name3 would then display into div2. If you click on Add New Contact, you would then get name2 displaying again, but in the div3 position. This is for a basic contacts page, where you can add/remove contacts, and they display in the order you enter them.

    The script currently works if you delete in order (name3, then name2, then name1). And, if you delete in order, you can add them back in. So I'm close. But, if you delete out of order, things break. So, if name1, name2, and name3 are all displayed, and you click to delete name2, it deletes and displays correctly, but then if you go to delete or add another name you get the following errors:

    IE = "document.forms.submit.elements.name2.value is null or not an object"
    FF = "document.forms.submit.elements.name2 has no properties"

    I've tried reworking things multiple ways, scratched and rewrote the whole thing, but I still get these errors. Please, any help/direction would be appreciated....

  • #2
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <form id="submit" method ="POST" action="#">
    
    <script language="Javascript" type="text/javascript">
    
    function display_divs(addnew) {
    
    
    var unsorted = new Array();
    var sorted   = new Array();
    var divobj   = new Array();
    
    //assign each div element id to an array element
    divobj[1]=document.getElementById('div1');
    divobj[2]=document.getElementById('div2');
    divobj[3]=document.getElementById('div3');
    
    //set all DIVs to be hidden
    for (x=1;x<4;x++) {
       divobj[x].style.display="none";
       divobj[x].style.visibility="hidden";
       divobj[x].style.position="absolute"; 
       unsorted[x]="";
       sorted[x]=""; }
    
    
    //assign html to be placed on page to variables
    name1="Name: <input type='text' name='name1' size='25' value='" + document.forms['submit'].elements['name1'].value + "'>" +
          "<a href='javascript: deleteit(1);'>Delete</a>";
    
    name2="Name: <input type='text' name='name2' size='25' value='" + document.forms['submit'].elements['name2'].value + "'>" +
          "<a href='javascript: deleteit(2);'>Delete</a>";
    
    name3="Name: <input type='text' name='name3' size='25' value='" + document.forms['submit'].elements['name3'].value + "'>" +
          "<a href='javascript: deleteit(3);'>Delete</a>";
    
    //assign html to an unsorted array based off of the position variable
    if (n1_pos != 0)
       unsorted[n1_pos]=name1;
    
    if (n2_pos != 0)
       unsorted[n2_pos]=name2;
    
    if (n3_pos != 0)
       unsorted[n3_pos]=name3;
    
    //put into a sorted array by screen position, and adjust position variables as needed
    count=1;
    for (x=1;x<4;x++) 
     {
      if (unsorted[x]) 
       {
         sorted[count]=unsorted[x];
         
         if (x==n1_pos)
            n1_pos=count;
         if (x==n2_pos)
            n2_pos=count;
         if (x==n3_pos)
            n3_pos=count;
         
    	 count++;
       }
     }
      
    //if adding a new name, check there aren't already 3 names added, if not
    //then add the new name to the last screen position and update the
    //position variable  
    if ((addnew==1) && (count<4))
     {
       if (n1_pos == 0) {
          n1_pos=count;
          sorted[count]=name1;
    	  count++; }
    
       else if (n2_pos == 0) {
          n2_pos=count;
          sorted[count]=name2;
    	  count++; }
    
       else if (n3_pos == 0) {
          n3_pos=count;
          sorted[count]=name3;
    	  count++; }
     }
    else if ((addnew==1) && (count>3)) alert("You can only have 3 names");
    
    //display sorted array into the right DIV/screen position
    for (x=1;x<count;x++) {
       divobj[x].style.display="block";
       divobj[x].style.visibility="visible";
       divobj[x].style.position="relative"; 
       divobj[x].innerHTML=sorted[x]; }
    
    }
    
    //if you are deleting a name, clear it's value, set its
    //position on the screen to 0, call display_divs function above.
    function deleteit(choose) {
    
    if (choose==1) {
       document.forms['submit'].elements['name1'].value="";
       n1_pos=0; }
    
    if (choose==2) {
       document.forms['submit'].elements['name2'].value="";
       n2_pos=0; }
    
    if (choose==3){
       document.forms['submit'].elements['name3'].value="";
       n3_pos=0; }
    
    display_divs(0);
    }
    
    //set initial global position variables
    var n1_pos=1;
    var n2_pos=2;
    var n3_pos=3;
    
    document.write('<a href="javascript: display_divs(1);">Add New Contact</a><br><br>');
    
    if (navigator.appName == "Microsoft Internet Explorer")
    	document.write('<div style="display:none;visibility:visible;position:relative;height:0;" id="div1" class="div1">');
    else
    	document.write('<div style="display:none;visibility:visible;position:relative;" id="div1" class="div1">');
    document.write('Name: <input type="text" name="name1" size="25" value="">');
    document.write('<a href="javascript: deleteit(1);">Delete</a>');
    document.write('</div>');
    
    if (navigator.appName == "Microsoft Internet Explorer")
    	document.write('<div style="display:none;visibility:visible;position:relative;height:0;" id="div2" class="div2">');
    else
    	document.write('<div style="display:none;visibility:visible;position:relative;" id="div2" class="div2">');
    document.write('Name: <input type="text" name="name2" size="25" value="">');
    document.write('<a href="javascript: deleteit(2);">Delete</a>');
    document.write('</div>');
    
    if (navigator.appName == "Microsoft Internet Explorer")
    	document.write('<div style="display:none;visibility:visible;position:relative;height:0;" id="div3" class="div3">');
    else
    	document.write('<div style="display:none;visibility:visible;position:relative;" id="div3" class="div3">');
    document.write('Name: <input type="text" name="name3" size="25" value="">');
    document.write('<a href="javascript: deleteit(3);">Delete</a>');
    document.write('</div>');
    
    display_divs();
    
    </script>
    </form>

  • #3
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    ok, browser detects really bad idea, not 100&#37; and the different versions have different features so you'd have to break it down to versioning to get an accurate feel for what features are supported & whatnot. if you must do a test for msie, use document.body.attachEvent?true:false this will return true if the agent is msie, false otherwise (as it's the only one that does attachEvent, everything else is addEventListener). the document.writes are your problem. when you use document.write it basically starts a new page, if you absolutely insist on storing your tags as strings (instead of using the proper var x = document.createElement(...) method) use
    Code:
     
    var htmlContainer = document.getElementById("targetElement");
    htmlContainer.innerHTML += "...your tag here...";
    which is still not proper but is more likely to work (replace targetElement with the id you gave to the element you're trying to put the code inside)

    also your javascript links should be in this format
    Code:
     
    <a href="#" onclick="yourjsfunction(parameters); return false;">Link</a>
    moreover, move you script to the head section of the page (never put it in the body unless absolutely necessary) and make your dynamically created html start writing after the onload event.


    window.onload = function(){/* all your elements here */}
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #4
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm still getting the same error. You suggested the following for me to try:

    Code:
    var htmlContainer = document.getElementById("targetElement");
    htmlContainer.innerHTML += "...your tag here...";
    Isn't that the same thing I did with this code:
    Code:
    divobj[1]=document.getElementById('div1');
    divobj[2]=document.getElementById('div2');
    divobj[3]=document.getElementById('div3');
    and then
    Code:
    for (x=1;x<count;x++) {
       divobj[x].style.display="block";
       divobj[x].style.visibility="visible";
       divobj[x].style.position="relative"; 
       divobj[x].innerHTML = sorted[x]; }
    I did try your suggestion of using divobj[x].innerHTML += sorted[x] instead of =, but that just gave me duplicates (6 names listed because I wasn't setting the innerHTML to the new display value, but adding the new display value to an existing value.


    I also removed the document.write statements. Those actually were below my functions, and only executed once.

    So, in IE I'm still getting the document.forms.submit.elements.name2.value is null or not an object and in FF that it has no properties. From what I can tell, its basically the same problem between the two browsers (or they see my issue as the same thing). This only happens if you delete something out of order. If you delete div3, then div2, then div1, you can add one back in. But, if you have all 3 divs visible, delete div2, then try to delete another one, or add one in, you get those errors.

    It makes no sense to me why. You can delete in order, but out of order those errors indicate that the properties for the name1, name2, and name3 elementes are gone, like if those elements themselves have been deleted. I thought it was my delete function that did the following:

    Code:
    if (choose==1) {
       document.forms['submit'].elements['name1'].value="";
       n1_pos=0; }
    but even if I set the value="hello" or something, it still doesn't work. Something in my script is killing those elements, and I don't know why. Below is an updated script with your suggestions added in:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <form id="submit" method ="POST" action="#">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript" type="text/javascript">
    function display_divs(addnew) {
    
    
    var unsorted = new Array();
    var sorted   = new Array();
    var divobj   = new Array();
    
    //assign each div element id to an array element
    divobj[1]=document.getElementById('div1');
    divobj[2]=document.getElementById('div2');
    divobj[3]=document.getElementById('div3');
    
    //set all DIVs to be hidden
    for (x=1;x<4;x++) {
       divobj[x].style.display="none";
       divobj[x].style.visibility="hidden";
       divobj[x].style.position="absolute"; 
       unsorted[x]="";
       sorted[x]=""; }
    
    
    //assign html to be placed on page to variables
    name1="Name: <input type='text' name='name1' size='25' value='" + document.forms['submit'].elements['name1'].value + "'>" +
          "<a href='#' onclick='deleteit(1); return false;'>Delete</a>";
    
    name2="Name: <input type='text' name='name2' size='25' value='" + document.forms['submit'].elements['name2'].value + "'>" +
          "<a href='#' onclick='deleteit(2); return false;'>Delete</a>";
    
    name3="Name: <input type='text' name='name3' size='25' value='" + document.forms['submit'].elements['name3'].value + "'>" +
          "<a href='#' onclick='deleteit(3); return false;'>Delete</a>";
    
    //assign html to an unsorted array based off of the position variable
    if (n1_pos != 0)
       unsorted[n1_pos]=name1;
    
    if (n2_pos != 0)
       unsorted[n2_pos]=name2;
    
    if (n3_pos != 0)
       unsorted[n3_pos]=name3;
    
    //put into a sorted array by screen position, and adjust position variables as needed
    count=1;
    for (x=1;x<4;x++) 
     {
      if (unsorted[x]) 
       {
         sorted[count]=unsorted[x];
         
         if (x==n1_pos)
            n1_pos=count;
         if (x==n2_pos)
            n2_pos=count;
         if (x==n3_pos)
            n3_pos=count;
         
    	 count++;
       }
     }
      
    //if adding a new name, check there aren't already 3 names added, if not
    //then add the new name to the last screen position and update the
    //position variable  
    if ((addnew==1) && (count<4))
     {
       if (n1_pos == 0) {
          n1_pos=count;
          sorted[count]=name1;
    	  count++; }
    
       else if (n2_pos == 0) {
          n2_pos=count;
          sorted[count]=name2;
    	  count++; }
    
       else if (n3_pos == 0) {
          n3_pos=count;
          sorted[count]=name3;
    	  count++; }
     }
    else if ((addnew==1) && (count>3)) alert("You can only have 3 names");
    
    //display sorted array into the right DIV/screen position
    for (x=1;x<count;x++) {
       divobj[x].style.display="block";
       divobj[x].style.visibility="visible";
       divobj[x].style.position="relative"; 
       divobj[x].innerHTML = sorted[x]; }
    
    }
    
    //if you are deleting a name, clear it's value, set its
    //position on the screen to 0, call display_divs function above.
    function deleteit(choose) {
    
    if (choose==1) {
       document.forms['submit'].elements['name1'].value="";
       n1_pos=0; }
    
    if (choose==2) {
       document.forms['submit'].elements['name2'].value="";
       n2_pos=0; }
    
    if (choose==3){
       document.forms['submit'].elements['name3'].value="";
       n3_pos=0; }
    
    display_divs(0);
    }
    
    //set initial global position variables
    var n1_pos=1;
    var n2_pos=2;
    var n3_pos=3;
    
    window.onload=display_divs;
    
    </script>
    </head>
    
    <body>
    <form id="submit" method ="POST" action="#">
    
    <a href="#" onclick="display_divs(1); return false;">Add New Contact</a><br>
    
    <br><div style="display:none;visibility:visible;position:relative;height:0;" id="div1" class="div1">
    Name: <input type="text" name="name1" size="25" value="">
    <a href="#" onclick="deleteit(1); return false;">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:relative;height:0;" id="div2" class="div2">
    Name: <input type="text" name="name2" size="25" value="">
    <a href="#" onclick="deleteit(2); return false;">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:relative;height:0;" id="div3" class="div3">
    Name: <input type="text" name="name3" size="25" value="">
    <a href="#" onclick="deleteit(3); return false;">Delete</a>
    </div>
    
    </body>
    </form>
    </html>
    Last edited by RoadRash; 05-01-2008 at 02:18 AM.

  • #5
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    I did try your suggestion of using divobj[x].innerHTML += sorted[x] instead of =, but that just gave me duplicates (6 names listed because I wasn't setting the innerHTML to the new display value, but adding the new display value to an existing value.
    i suggested replacing document.write with appropriately named objects and values, i did not suggest using append equals on divobj[] to sorted; it actually has nothing at all to do with divobj[], that was one of the things done correctly in the original code.

    document.forms['submit'].elements['name1'].value="";
    could be
    Code:
     
    document.forms['submit']['name'].value="";
    submit and name are bad ideas to use as identifiers, try giving your elements ids (descriptive ones at that) and using
    Code:
    document.getElementById("yourElementsIdHere").value = ""
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #6
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I apologize I didn't understand your first post. I'm looking through things now. Please don't take any offense, I sincerely appreciate your help in taking a look at this for me, and giving me suggestions.

  • #7
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well, I'm getting closer. It doesn't error out in FF anymore, but I have values going to undefined when moving between DIVs. So, if name1, name2, and name3 text boxes are showing, you delete name2, you now have name1 in the div1 position, name3 in the div2 position. The values for both textboxes is correct. Now, when I click on add new contact, it does add it correctly, and puts the name2 object in the div3 screen position, but the name3 value goes to undefined. IE is still just giving me the "null or not an object" error. Firefox is not.

    I've posted the updated code below, but I just don't know what else to do from here. I'm doing google searches now.

    mjlorbet, the variable names are really generic I know. This is a simple test of the real code. I just wanted something that would either work, or duplicate what the real code is doing, and be more manageable to post up some help on, and hack around with.

    Any other help, anyone have any ideas? It can't be this hard. I know I am just doing something stupid, I just need help figuring it out. If by some miracle I find the fix, I'll definately post it up here when I know more. Thanks...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <form id="submit" method ="POST" action="#">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript" type="text/javascript">
    function display_divs(addnew) {
    
    var name1;
    var name2;
    var name3;
    var unsorted = new Array();
    var sorted   = new Array();
    var divobj   = new Array();
    
    //assign each div element id to an array element
    divobj[1]=document.getElementById('div1');
    divobj[2]=document.getElementById('div2');
    divobj[3]=document.getElementById('div3');
    
    //set all DIVs to be hidden
    for (x=1;x<4;x++) {
       divobj[x].style.display="none";
       divobj[x].style.visibility="hidden";
       divobj[x].style.position="absolute"; 
       unsorted[x]="";
       sorted[x]=""; }
    
    
    //assign html to be placed on page to variables
    
    name1="Name: <input type='text' name='name1' size='25' value='" + document.forms['submit']['name1'].value + "'>" +
          "<a href='#' onclick='deleteit(1); return false;'>Delete</a>";
    
    name2="Name: <input type='text' name='name2' size='25' value='" + document.forms['submit']['name2'].value + "'>" +
          "<a href='#' onclick='deleteit(2); return false;'>Delete</a>";
    
    name3="Name: <input type='text' name='name3' size='25' value='" + document.forms['submit']['name3'].value + "'>" +
          "<a href='#' onclick='deleteit(3); return false;'>Delete</a>";
    
    //assign html to an unsorted array based off of the position variable
    if (n1_pos != 0)
       unsorted[n1_pos]=name1;
    
    if (n2_pos != 0)
       unsorted[n2_pos]=name2;
    
    if (n3_pos != 0)
       unsorted[n3_pos]=name3;
    
    //put into a sorted array by screen position, and adjust position variables as needed
    count=1;
    for (x=1;x<4;x++) 
     {
      if (unsorted[x]) 
       {
         sorted[count]=unsorted[x];
         
         if (x==n1_pos)
            n1_pos=count;
         if (x==n2_pos)
            n2_pos=count;
         if (x==n3_pos)
            n3_pos=count;
         
    	 count++;
       }
     }
      
    //if adding a new name, check there aren't already 3 names added, if not
    //then add the new name to the last screen position and update the
    //position variable  
    if ((addnew==1) && (count<4))
     {
       if (n1_pos == 0) {
          n1_pos=count;
          sorted[count]=name1;
    	  count++; }
    
       else if (n2_pos == 0) {
          n2_pos=count;
          sorted[count]=name2;
    	  count++; }
    
       else if (n3_pos == 0) {
          n3_pos=count;
          sorted[count]=name3;
    	  count++; }
     }
    else if ((addnew==1) && (count>3)) alert("You can only have 3 names");
    
    //display sorted array into the right DIV/screen position
    
    for (x=1;x<count;x++) {
       divobj[x].style.display="block";
       divobj[x].style.visibility="visible";
       divobj[x].style.position="relative"; 
       divobj[x].innerHTML = sorted[x]; }
    
    }
    
    //if you are deleting a name, clear it's value, set its
    //position on the screen to 0, call display_divs function above.
    function deleteit(choose) {
    
    if (choose==1) {
       document.forms['submit']['name1'].value="";
       n1_pos=0; }
    
    if (choose==2) {
       document.forms['submit']['name2'].value="";
       n2_pos=0; }
    
    if (choose==3){
       document.forms['submit']['name3'].value="";
       n3_pos=0; }
    
    display_divs(0);
    }
    
    //set initial global position variables
    var n1_pos=1;
    var n2_pos=2;
    var n3_pos=3;
    
    window.onload=display_divs;
    
    </script>
    </head>
    
    <body>
    <form id="submit" method ="POST" action="#">
    
    <a href="#" onclick="display_divs(1); return false;">Add New Contact</a><br>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div1" class="div1">
    Name: <input type="text" name="name1" size="25" value="">
    <a href="#" onclick="deleteit(1); return false;">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div2" class="div2">
    Name: <input type="text" name="name2" size="25" value="">
    <a href="#" onclick="deleteit(2); return false;">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div3" class="div3">
    Name: <input type="text" name="name3" size="25" value="">
    <a href="#" onclick="deleteit(3); return false;">Delete</a>
    </div>
    
    
    
    </body>
    </form>
    </html>

  • #8
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, I'm down to trying to figure out why the document.forms['submit]['namex'].value would change to 'undefined'. Here's the example:

    Name1: Bob
    Name2: Harry
    Name3: Suzy

    If I click on the delete link next to name 2 the display changes to:

    Name1: Bob
    Name2: Suzy

    So, at this point it seems like it would be working. I have verified with firebug that the DIV1 html is set for name1, and the DIV2 html is set for name3 here.

    Now, if I click on the "Add Contact Link", I get the following:

    Name1: Bob
    Name2: undefined
    Name3:

    I have verified here that Name1 still points to the name1 value, Name2 points to name3 value (which has indeed changed to undefined), and name3 point to the name2 value, which is set correctly to blank.

    The change I realized that fixed my IE errors (FF didn't seem to care), what the I could not rearrange the innerHTML for the DIV objects, and not assign one that's not being used to something, otherwise it was gone. Like in the example above, if I deleted Name2, which was assigned to DIV2, and then DIV2 became assigned to name3, with assigning the name2 values to a DIV, all was gone. So I created a second set of hidden DIVs on the page as placeholders for values that have no home. The new code is attached below.

    Any ideas on how to fix the undefined string being assigned to the values when moving between divs?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <form id="submit" method ="POST" action="#">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript" type="text/javascript">
    function display_divs(addnew) {
    
    var name1;
    var name2;
    var name3;
    var count;
    var unsorted = new Array();
    var sorted   = new Array();
    var divobj   = new Array();
    var Hdivobj  = new Array();
    
    //assign each div element id to an array element
    divobj[1]=document.getElementById('div1');
    divobj[2]=document.getElementById('div2');
    divobj[3]=document.getElementById('div3');
    
    Hdivobj[1]=document.getElementById('Hdiv1');
    Hdivobj[2]=document.getElementById('Hdiv2');
    Hdivobj[3]=document.getElementById('Hdiv3');
    
    //set all DIVs to be hidden
    for (x=1;x<4;x++) {
       divobj[x].style.display="none";
       divobj[x].style.visibility="hidden";
       divobj[x].style.position="absolute"; 
       unsorted[x]="";
       sorted[x]=""; }
    
    
    //assign html to be placed on page to variables
    
    name1="Name: <input type='text' name='name1' size='25' value='" + document.forms['submit']['name1'].value + "'>" +
          "<a href='#' onclick='deleteit(1); return false;'>Delete</a>";
    
    name2="Name: <input type='text' name='name2' size='25' value='" + document.forms['submit']['name2'].value + "'>" +
          "<a href='#' onclick='deleteit(2); return false;'>Delete</a>";
    
    name3="Name: <input type='text' name='name3' size='25' value='" + document.forms['submit']['name3'].value + "'>" +
          "<a href='#' onclick='deleteit(3); return false;'>Delete</a>";
    
    //assign html to an unsorted array based off of the position variable
    if (n1_pos != 0)
       unsorted[n1_pos]=name1;
    
    if (n2_pos != 0)
       unsorted[n2_pos]=name2;
    
    if (n3_pos != 0)
       unsorted[n3_pos]=name3;
    
    //put into a sorted array by screen position, and adjust position variables as needed
    count=1;
    for (x=1;x<4;x++) 
     {
      if (unsorted[x]) 
       {
         sorted[count]=unsorted[x];
         
         if (x==n1_pos)
            n1_pos=count;
         if (x==n2_pos)
            n2_pos=count;
         if (x==n3_pos)
            n3_pos=count;
         
    	 count++;
       }
     }
      
    //if adding a new name, check there aren't already 3 names added, if not
    //then add the new name to the last screen position and update the
    //position variable  
    if ((addnew==1) && (count<4))
     {
       if (n1_pos == 0) {
          n1_pos=count;
          sorted[count]=name1;
    	  count++; }
    
       else if (n2_pos == 0) {
          n2_pos=count;
          sorted[count]=name2;
    	  count++; }
    
       else if (n3_pos == 0) {
          n3_pos=count;
          sorted[count]=name3;
    	  count++; }
     }
    else if ((addnew==1) && (count>3)) alert("You can only have 3 names");
    
    //display sorted array into the right DIV/screen position
    
    for (x=1;x<count;x++) {
       divobj[x].style.display="block";
       divobj[x].style.visibility="visible";
       divobj[x].style.position="relative"; 
       divobj[x].innerHTML = sorted[x]; }
    
    //if an object is hidden or deleted, still needs to be assigned to a div or it's elements will disappear
    count=1;
    if (n1_pos == 0) {
    	Hdivobj[count].innerHTML=name1;
    	count++; }
    
    if (n2_pos == 0) {
    	Hdivobj[count].innerHTML=name2;
    	count++; }
    	
    if (n3_pos == 0) {
    	Hdivobj[count].innerHTML=name3;
    	count++; }	
    
    
    
    }
    
    
    
    //if you are deleting a name, clear it's value, set its
    //position on the screen to 0, call display_divs function above.
    function deleteit(choose) {
    
    if (choose==1) {
       document.forms['submit']['name1'].value="";
       n1_pos=0; }
    
    if (choose==2) {
       document.forms['submit']['name2'].value="";
       n2_pos=0; }
    
    if (choose==3){
       document.forms['submit']['name3'].value="";
       n3_pos=0; }
    
    display_divs(0);
    }
    
    //set initial global position variables
    var n1_pos=1;
    var n2_pos=2;
    var n3_pos=3;
    
    window.onload=display_divs;
    
    </script>
    </head>
    
    <body>
    <form id="submit" method ="POST" action="#">
    
    <a href="#" onclick="display_divs(1); return false;">Add New Contact</a><br>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div1" class="div1">
    Name: <input type="text" name="name1" size="25" value="">
    <a href="#" onclick="deleteit(1); return false;">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div2" class="div2">
    Name: <input type="text" name="name2" size="25" value="">
    <a href="#" onclick="deleteit(2); return false;">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div3" class="div3">
    Name: <input type="text" name="name3" size="25" value="">
    <a href="#" onclick="deleteit(3); return false;">Delete</a>
    </div>
    
    <div style="display:none;visibility:visible;position:absolute;height:0;" id="Hdiv1" class="Hdiv1">
    </div>
    <div style="display:none;visibility:visible;position:absolute;height:0;" id="Hdiv2" class="Hdiv2">
    </div>
    <div style="display:none;visibility:visible;position:absolute;height:0;" id="Hdiv3" class="Hdiv3">
    </div>
    
    
    </body>
    </form>
    </html>

  • #9
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    Name: <input type="text" name="name3" size="25" value="">
    change name="name3" to id="name3" (similarly, change the other name="nameX" to id="nameX")
    document.forms['submit']['name3'].value="";
    should be
    document.getElementById("name3").value = ""; after making the adjustment above

    just less room for error

    the undefined bit would come from not being able to find the element through that lookup (and rightfully so, name is a grouping, so looking it up with an indexer should at best return a one length array that you would have to select the zero-th element from to get the appropriate object, but the indexer-based lookup searches ids only anyways). you could leave the things as is if you really want and change your value extraction to document.body.forms['submit'].getElementsByName("name3")[0].value=""; but that's just more work than it's worth. change the id of your form too.... submit isn't a good choice
    Last edited by mjlorbet; 05-01-2008 at 03:00 PM.
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • Users who have thanked mjlorbet for this post:

    RoadRash (05-01-2008)

  • #10
    New Coder
    Join Date
    Jan 2008
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    That did it. I can't beleive it. It works. I have been beating my head against the wall on this for so many hours. I've bought books, read through posts, and did google searches into many late nights. mjlorbet, I can't thank you enough for your help. Thank you so much, you have made my day, actually my MONTH! I want to go out and celebrate...thank you again.

    One final question, you had mentioned that I should have used document.createElement, instead of storing my tags as strings. Do you have any recommended links for reading up on that. Javascript is becoming a lot more integral to my work, and right now I'm fumbling around in the dark, and not utlizing it properly. And, I know I'm being repetitive, but thank you again.

    And for everyone's benefit, here's the final code block that works. Its not a shining example of javascript, but it's getting the job done.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script language="Javascript" type="text/javascript">
    function display_divs(addnew) {
    
    var name1;
    var name2;
    var name3;
    var count;
    var unsorted = new Array();
    var sorted   = new Array();
    var divobj   = new Array();
    var Hdivobj  = new Array();
    var cache1;
    var cache2;
    var cache3;
    
    //assign existing values to cache variables
    cache1=document.getElementById("name1").value;
    cache2=document.getElementById("name2").value;
    cache3=document.getElementById("name3").value;
    
    
    //assign each div element id to an array element
    divobj[1]=document.getElementById('div1');
    divobj[2]=document.getElementById('div2');
    divobj[3]=document.getElementById('div3');
    
    Hdivobj[1]=document.getElementById('Hdiv1');
    Hdivobj[2]=document.getElementById('Hdiv2');
    Hdivobj[3]=document.getElementById('Hdiv3');
    
    //set all DIVs to be hidden
    for (x=1;x<4;x++) {
       divobj[x].style.display="none";
       divobj[x].style.visibility="hidden";
       divobj[x].style.position="absolute"; 
       unsorted[x]="";
       sorted[x]=""; }
    
    
    //assign html to be placed on page to variables
    
    name1="Name: <input type='text' id='name1' size='25' value='" + document.getElementById("name1").value + "'>" +
          "<a href='#' onclick='deleteit(1);'>Delete</a>";
    
    name2="Name: <input type='text' id='name2' size='25' value='" + document.getElementById("name2").value + "'>" +
          "<a href='#' onclick='deleteit(2);'>Delete</a>";
    
    name3="Name: <input type='text' id='name3' size='25' value='" + document.getElementById("name3").value + "'>" +
          "<a href='#' onclick='deleteit(3);'>Delete</a>";
    
    //assign html to an unsorted array based off of the position variable
    if (n1_pos != 0)
       unsorted[n1_pos]=name1;
    
    if (n2_pos != 0)
       unsorted[n2_pos]=name2;
    
    if (n3_pos != 0)
       unsorted[n3_pos]=name3;
    
    //put into a sorted array by screen position, and adjust position variables as needed
    count=1;
    for (x=1;x<4;x++) 
     {
      if (unsorted[x]) 
       {
         sorted[count]=unsorted[x];
         
         if (x==n1_pos)
            n1_pos=count;
    	 if (x==n2_pos)
            n2_pos=count;
         if (x==n3_pos)
            n3_pos=count;
    	 count++;
       }
     }
      
    //if adding a new name, check there aren't already 3 names added, if not
    //then add the new name to the last screen position and update the
    //position variable  
    if ((addnew==1) && (count<4))
     {
       if (n1_pos == 0) {
          n1_pos=count;
          sorted[count]=name1;
    	  count++; }
    
       else if (n2_pos == 0) {
          n2_pos=count;
          sorted[count]=name2;
    	  count++; }
    
       else if (n3_pos == 0) {
          n3_pos=count;
          sorted[count]=name3;
    	  count++; }
     }
    else if ((addnew==1) && (count>3)) alert("You can only have 3 names");
    
    //display sorted array into the right DIV/screen position
    
    for (x=1;x<count;x++) {
       divobj[x].style.display="";
       divobj[x].style.visibility="visible";
       divobj[x].style.position="relative"; 
       divobj[x].innerHTML = sorted[x]; }
    
    //if an object is hidden or deleted, still needs to be assigned to a div or it's elements will disappear
    count=1;
    if (n1_pos == 0) {
    	Hdivobj[count].innerHTML=name1;
    	count++; }
    
    if (n2_pos == 0) {
    	Hdivobj[count].innerHTML=name2;
    	count++; }
    	
    if (n3_pos == 0) {
    	Hdivobj[count].innerHTML=name3;
    	count++; }	
    
    document.getElementById("name1").value=cache1;
    document.getElementById("name2").value=cache2;
    document.getElementById("name3").value=cache3;
    }
    
    
    
    //if you are deleting a name, clear it's value, set its
    //position on the screen to 0, call display_divs function above.
    function deleteit(choose) {
    
    if (choose==1) {
       document.getElementById("name1").value="";
       n1_pos=0; }
    
    if (choose==2) {
       document.getElementById("name2").value="";
       n2_pos=0; }
    
    if (choose==3){
       document.getElementById("name3").value="";
       n3_pos=0; }
    
    display_divs(0);
    }
    
    //set initial global position variables
    var n1_pos=1;
    var n2_pos=2;
    var n3_pos=3;
    
    window.onload=display_divs;
    
    </script>
    </head>
    
    <body>
    <form id="contactlist" method ="POST" action="#">
    
    <a href="#" onclick="display_divs(1); return false;">Add New Contact</a><br>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div1" class="div1">
    Name: <input type="text" id="name1" size="25" value="">
    <a href="#" onclick="deleteit(1);">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div2" class="div2">
    Name: <input type="text" id="name2" size="25" value="">
    <a href="#" onclick="deleteit(2);">Delete</a>
    </div>
    
    <br><div style="display:none;visibility:visible;position:absolute;height:0;" id="div3" class="div3">
    Name: <input type="text" id="name3" size="25" value="">
    <a href="#" onclick="deleteit(3);">Delete</a>
    </div>
    
    
    <div style="display:none;visibility:visible;position:absolute;height:0;" id="Hdiv1" class="Hdiv1">
    </div>
    <div style="display:none;visibility:visible;position:absolute;height:0;" id="Hdiv2" class="Hdiv2">
    </div>
    <div style="display:none;visibility:visible;position:absolute;height:0;" id="Hdiv3" class="Hdiv3">
    </div>
    
    </body>
    </form>
    </html>
    Last edited by RoadRash; 05-01-2008 at 07:25 PM.

  • #11
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    message me in the next few days & i'll walk you through its use
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender


  •  

    Posting Permissions

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