...

View Full Version : Changing Display in DIVs



RoadRash
04-30-2008, 11:44 PM
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....

RoadRash
04-30-2008, 11:47 PM
<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>

mjlorbet
05-01-2008, 01:24 AM
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


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


<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 */}

RoadRash
05-01-2008, 02:52 AM
I'm still getting the same error. You suggested the following for me to try:



var htmlContainer = document.getElementById("targetElement");
htmlContainer.innerHTML += "...your tag here...";


Isn't that the same thing I did with this code:


divobj[1]=document.getElementById('div1');
divobj[2]=document.getElementById('div2');
divobj[3]=document.getElementById('div3');


and then


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:



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:



<!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>

mjlorbet
05-01-2008, 03:18 AM
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


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
document.getElementById("yourElementsIdHere").value = ""

RoadRash
05-01-2008, 03:51 AM
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.

RoadRash
05-01-2008, 04:45 AM
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...



<!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>

RoadRash
05-01-2008, 05:21 AM
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?



<!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>

mjlorbet
05-01-2008, 03:57 PM
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

RoadRash
05-01-2008, 06:07 PM
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.



<!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>

mjlorbet
05-01-2008, 10:27 PM
message me in the next few days & i'll walk you through its use



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum