show/hide div

searls03 · 01-27-2013, 04:59 PM

hi, I have this code.

Code:

<script type="text/javascript">
 
function showHide(elem) {
    if(elem.selectedIndex != 0) {
         //hide the divs
         for(var i=0; i < divsO.length; i++) {
             divsO[i].style.display = 'block';
        }
        //unhide the selected div
        document.getElementById('div'+elem.value).style.display = 'block';
    }
}
 
window.onload=function() {
    //get the divs to show/hide
    divsO = document.getElementById("frmMyform").getElementsByTagName('div');
}
</script>
</head>

<body>
<div id="user"><br /><form action="#" method="post" id="frmMyform">

                    <input name="user[]" type="text" value="" size="30"/><select name="type[]" onchange="showHide(this)">
                      <option value="text" selected="selected">Text box</option>
                      <option value="textarea">Comment Box</option>
                      <option value="select">Select menu</option>
                    </select><div id="divselect" style="display:none;">This is Div 3</div>
                    <div id="add_user" style="display: none;">
                    <input type="text" name="user[]"/><select name="type[]" onchange="showHide(this)">
                      <option value="text" selected="selected">Text box</option>
                      <option value="textarea">Comment Box</option>
                      <option value="select">Select menu</option>
                    </select><div id="divselect" style="display:none;">This is Div 3</div>
                    <br />
                  </div> 

                  <p>&nbsp;</p>
                 <input type="button" id="add_user()" onclick="add_user('add_user')" value="Give me more fields!" />
                  
                    <br />
                  </form></div><script type="text/javascript">
var counter = 0;
function add_user(FieldName) {
counter++;
var newFields = document.getElementById(FieldName).cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById(FieldName);
insertHere.parentNode.insertBefore(newFields,insertHere);
}
    </script>

my goal is to have a button that will make multiple fields with the same name(this works). After it makes these, all the fields will have a select menu with options, when the select menu option is selected, I would like only the div in that row to show. Instead, it currently shows all the divs with the selected ID. I know why it does this, but I am not sure how to fix this. can anyone help. I have provided a picture of what is happening.

from the picture, you can see that Div 3 shows 3 times, I only want the one under the select option of "select menu" to show...then if one of the others were changed to "select menu" it would show too.

Old Pedant · 01-28-2013, 05:16 AM

Several errors.

For starters, when you clone your elements you are getting

Code:

<input type="text" name="user[]2"/><select name="type[]2" onchange="showHide(this)">
...
<input type="text" name="user[]3"/><select name="type[]3" onchange="showHide(this)">
...

If this page is intended to be submitted to a PHP page, then those names should either be just *ALL* "user[]" or they should be "user[2]", and so on.

Also, *ALL* your <div>s are getting the *SAME* id!!!! <div id="divselect">

That is *ILLEGAL* HTML! You will no longer be able to use document.getElementById("divselect") because of the illegality.

Also, you have this code:

Code:

         //hide the divs
         for(var i=0; i < divsO.length; i++) {
             divsO[i].style.display = 'block';
        }

Your comment says "hide the divs", but then your code SHOWS them all.

And I think you have goofed in another way: I think you have forgotten that you have *TWO TYPES* of <div>s!!

Code:

<div id="add_user" style="display: none;">
    ...
    <div id="add_user" style="display: none;">...</div>
</div>

and *BOTH TYPES* are included in your divsO variable!!!

In short, this is pretty much a complete hash and you need to almost start over and think about what you are after.