Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: show/hide div

  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show/hide div

    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.
    Attached Thumbnails Attached Thumbnails show/hide div-screen-shot-2013-01-27-10.57.52-am.png  

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,733
    Thanks
    80
    Thanked 4,516 Times in 4,480 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •