show selected div while hiding others.

[nelsonm]

HI all,

I'm new to this great forum. I have learned a lot. Anyway...

I have an html form where the client enters customer and part information. However, I'd like to allow the client to enter multiple parts (up to 10) sequentially on the same form.

I know I have to:
a. duplicate the parts entry div 10 times
b. give each div a sequentially unique ID like partdiv1, partdiv2
c. add a sequence number to the end of each divs input fields. I.E. div1 will have 1 added to the end of all its input fields. div2 will have 2 added to the end of all its input fields and so on.
d. hide all but the first part div.

I found a show/hide div java script posted by member outrun in 2003 under that shows the div passed to it and hides the rest.

[webmasterworld.com...] post#:1474110

So my questions are...

1. Is outrun's java script still up-to-date?
2. Are the code portions for Netscape and IE still necessary?
3. Can I show/hide the divs using just one button like "Next Part"/"previous Part" buttons or do I have to use 10 buttons?
4. how do hide all but the first part div when the form page is initially displayed?
5. Are unique div ID's like partdiv1, partdiv2, partdiv3 good enough to work with outrun's java script?
6. Will outrun's script affect only the "partdiv#" divs and leave the other customer divs alone?

Thanks,

[DrDoc]

I know I have to:
a. duplicate the parts entry div 10 times
b. give each div a sequentially unique ID like partdiv1, partdiv2
c. add a sequence number to the end of each divs input fields. I.E. div1 will have 1 added to the end of all its input fields. div2 will have 2 added to the end of all its input fields and so on.
d. hide all but the first part div.

Technically, you don't have to do any of that at all. Instead of duplicating divs, simply creating the elements using JavaScript is a feasible option as well. Another option is copying the entire node from the first div. Unique IDs are only necessary if they are referred to via the DOM (getElementByID). There are other ways of accomplishing that, notably by accessing parents and children via the DOM.

1. Is outrun's java script still up-to-date?
2. Are the code portions for Netscape and IE still necessary?
3. Can I show/hide the divs using just one button like "Next Part"/"previous Part" buttons or do I have to use 10 buttons?
4. how do hide all but the first part div when the form page is initially displayed?
5. Are unique div ID's like partdiv1, partdiv2, partdiv3 good enough to work with outrun's java script?
6. Will outrun's script affect only the "partdiv#" divs and leave the other customer divs alone?

1. Sure.
2. If you need to support NN4 or IE4, yes. Otherwise, no.
3. If the state is either remembered or checked for, yes.
4. I would rethink "hiding" in favor of creating or copying elements as needed.
5. Assuming you pass the correct ID, yes.
6. Try it.

[nelsonm]

Thanks for responding DrDoc,

Unfortunately, I'm not a java programmer let alone a heavy duty html programmer. I was able to put together a 9 page html website with an html form by learning to use (just barely); php, Dreamweaver, CSS, Forms-To-Go and a lot of help from forum examples.

Although I have a computer science and programming background, its been many years since I programmed. I thought myself enough php to create a custom php mail form script with the help of Forms-To-Go.

Referring to a.,b.,c.,d. in my post above, all of the examples i saw through searches on this and other forums showed the method I outlined. I don't know what you mean by creating the elements using JavaScript. If you are saying I can program steps a - d in JavaScript, I would not know how to do that.

Also, I just learned what a div is let alone a div node and DOM.

I would like to do modify the html form using the more sophisticated manner you suggest, but unless you can point me some examples of doing steps a - d via JavaScript and examples of questions 3 - 5, I'll be doing it the long way. It may be the old fashion way and generate a lot more html code but it should work.

[nelsonm]

Ok...

Not to sit on my butt, I have been staring at the following two JavaScripts:

function showdiv1(pass) {
var divs = document.getElementsByTagName('div');
for(i = 0; i < divs.length; i++){
if(divs[i].id.match(pass)){
if(divs[i].style.visibility = 'visible'){
divs[i].style.visibility = 'hidden';
}else{
divs[i].style.visibility = 'visible';
}
}
}
}

function showdiv2(id) {
var divs = document.getElementsByTagName('div');
for(i = 0; i < divs.length; i++){
if(divs[i].id.match(id)){
if(divs[i].style.display != 'none'){
divs[i].style.display = 'none';
}else{
divs[i].style.display = '';
}
}
}
}

Whats the difference in using ".display = 'none'" and ".visibility = 'hidden'"?

[nelsonm]

In any case I decided to use the following javascript function:

div = new Array()
div[0] = "partdiv1"
div[1] = "partdiv2"

function hideallexcept(id) {
for (var i = 0; i < div.length; i++) {
var layer = document.getElementById(div[i]);
if (id != div[i]) {
layer.style.display = "none";
}else{
layer.style.display = "block";
}
}
}

<body onload="hideallexcept('partdiv1');">