Hide div if inputs are empty, and hide input if it's empty.

[Repgahroll]

Hello.

 

I'm a beginner php programmer and have this simple form:

 

name:[____]

phone1:[____]

phone2:[____]

phone3:[____]

 

Everything is inside a div, and there are 4 more identical divs.

 

my problem is, them all are displayed simultaneously, and i want to have the following:

 

name:[____]

[add phone]

[add person]

 

when the user click "add phone" button, an input appears, when the user click "add person" button, another div appears (that has another "add phone" button inside).

 

One problem is, i'm using two scripts, one to hide/show the input, another to hide/show the div.

 

And another problem is, these fields will be populated using data from db, and when some field has any value != "", it should be shown.

 

However, i know nothing about javascript (i'm learning php) and couldn't find any specific tutorial that teaches how to hide/show different things using the same script and how to get values from fields in a div and use them in the script.

 

So please, anyone, point me on the right direction, i don't need the specific answer, i just need a tutorial/documentation that teaches how to program cross-browser javascript to do this.

 

All the documentation that i found was pretty old, and teaches to program distinct javascripts, one that works for IE, and another that works for Netscape.

 

Thank you very much.