Javascript fails to hide some DIVs

Question

I got the "New user form". There are three different clearence levels:

• client
• clientContact
• clientRepresentative

And there are some fields, like newMail, newPostalCode, etc.

Here is a code I am using to show an element:

function doShow(obj) {
                    document.getElementById(obj).style.display = '';
                }

And a code I am using to hide an element:

function doHide(obj) {
                    document.getElementById(obj).style.display = 'none';
                }

It works for small blocks of data. While creating an user, the clearence level is specified, if it is clientRepresentative the appropriate field is being shown. In example, client has only one e-mail adress, clientRepresentative has two e-mail addresses and clientContact has three.

But this don't work!. If I choose client, there is one e-mail, just as planned, but if I choose clientContact and then switch to clientRepresentative the redundant field (e-mail3) is not being hidden.

I believe this is a JavaScript issue, please help me, since my anger level hits the ceiling.

edit: I forgot to paste function used to show/hide the items.

 if (clearenceLevel != "Chose...") {
                        if (clearenceLevel == "client") {

                            doShow("newMail");
                            doHide("newMail2");
                            doHide("newMail3");
                            doShow("newNip");
                            doShow("newRegon");
                            doShow("newStreet");
                            doHide("newHeadquarters");
                            doShow("newAddress");
                            doShow("newPostalCode");
                            doShow("kptekst");
                            doShow("newCity");
                            doShow("newAccount");
                            doShow("newState");
                            doHide("newStatus");
                            doHide("newPassword");
                        } else if (clearenceLevel == "clientRepresentative") {

                            doShow("newMail");
                            doShow("newMail2");
                            doHide("newStatus");
                            doHide("newMail3");
                            doHide("newNip");
                            doHide("newRegon");
                            doHide("newStreet");
                            doHide("newHeadquarters");
                            doHide("newAddress");
                            doHide("newPostalCode");
                            doHide("newCity");
                            doHide("newAccount");
                            doHide("newState");
                            doHide("kptekst");
                            doShow("newPassword");

                        } else if (clearenceLevel == "clientContact") {

                            doShow("newMail");
                            doShow("newMail2");
                            doShow("newMail3");
                            doHide("newNip");
                            doHide("newRegon");
                            doHide("newStatus");
                            doHide("newStreet");
                            doHide("newHeadquarters");
                            doHide("newAddress");
                            doHide("newPostalCode");
                            doHide("newCity");
                            doHide("newAccount");
                            doHide("newState");
                            doHide("kptekst");
                            doHide("newPassword");
                        }
                    }

Answer 1

You have probably made a mistake in the code.

else if (clearenceLevel == "clientRepresentative") {
doShow("newMail");
doShow("newMail2");
doHide("newStatus");
doShow("newMail3"); // shouldn't this be doHide()?
// etc

From your message I understood that you want to hide the e-mail3 while switching to clientRepresentative, but in the code above doShow() is executed instead of doHide().

Answer 2

Not a direct answer to your question, but a suggestion on how you could improve the way that you're doing this. Instead of having to list each property to display and hide for each user level, do something like:

<input type="text" name="email" class="client representative contact">
<input type="text" name="ssn" class="representative">

Then when the user level changes hide everything and then unhide everything that has the correct level. So in my example "email" is available to "client" "representative" and "contact". So if they switched to any of those levels, this field would display, however "ssn" is only available to "representative" so it wouldn't display for anyone else.

The advantage of this would be the ability to easily add a brand new item without needing to modify the Javascript, only the HTML.

if (clearenceLevel != "Chose...") {
                    hideAll();
                    if (clearenceLevel == "client") {
                        doShow("client");
                    } else if (clearenceLevel == "clientRepresentative") {
                        doShow("representative");
                    } else if (clearenceLevel == "clientContact") {
                        doShow("contact");
                    }
 }

Answer 3

Thanks for your answers, I am posting the form used to send the data

  echo '<div id="newMail"><br><font color="red">*</font>email: <input type="text" name="newMail" value="' . $_POST['newMail'] . '" /> </div>';
    echo '<div id="newMail2"><br>email 2: <input type="text" name="newMail2"  value="' . $_POST['newMail2'] . '" /> </div>';
    echo '<div id="newMail3"><br>email 3: <input type="text" name="newMail3"   value="' . $_POST['newMail3'] . '" /> </div>';
    echo '<div id="newNip"><br>nip: <input type="text" maxlength="15" name="newNip" value="' . $_GET['nip'] . '"/> </div>';
    echo '<div id="newRegon"><br>regon: <input type="text" name="newRegon"  value="' . $_POST['newRegon'] . '" /> </div>';
    echo '<div id="newStreet"><br>Street: <input type="text" name="newStreet" value="' . $_POST['newStreet'] . '" /> </div>';
    echo '<div id="newHeadquarters"><br>Headquarters: <select name="newHeadquarters"> ';