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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Location
    NY
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Dropdown onchange to view DIVs - requesting help

    Hey guys,

    I believe this falls under DOM so I'm posing here, if not, mods, feel free to move.

    I built/maintain an intranet web site where I work that houses all our call centers support docs and troubleshooting info. We are looking to open it up not just to our support staff but certain sections to our general employees and select customers.

    Ive done HTML for years, but havent touched JS since an intro course in college about 8 years ago.

    End result that I am trying for is a dropdown box that is set to a blank selection.
    When you select the Help Request option it will display the Help Div with the Help request form. When you select the Feedback option is will hide the Help Div and show the Feedback DIV. When you select the blank option, it will hide both.

    Any help would be greatly appreciated!!!!!

    Here is the code I have:

    Code:
    <select name="select_form" id="select_form" onchange="select()">
      <option id="blank" value="blank"></option>
      <option id="help" value="help">Help Request</option>
      <option id="feedback" value="feedback">Feedback</option>
    </select> 
    
    <script type="text/javascript">
    	function select() {
    		if
    		(document.getElementByID("select_form").option[getElementByID("select_form").selectedIndex].value == "help") {
    			document.getElementByID("help_form").style.display = "block";
    			document.getElementByID("feedback_form").style.display = "none";
    		} else if
    		(document.getElementByID("select_form").option[getElementByID("select_form").selectedIndex].value == "feedback") {
    		document.getElementByID("help_form").style.display = "none";
    		document.getElementByID("feedback_form").style.display = "block";
    		}else if
    		(document.getElementByID("select_form").option[getElementByID("select_form").selectedIndex].value == "blank") {
    		document.getElementByID("help_form").style.display = "none";
    		document.getElementByID("feedback_form").style.display = "none";
    		}
    	}
    </script>			
    
    <div id="help_form" style="font:24px bold; display: none">help</div>
    <div id="feedback_form" style="font:24px bold; display: none">feedback</div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,205
    Thanks
    23
    Thanked 605 Times in 604 Posts
    This is a little simpler code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <script type="text/javascript">
    function find_select()
    {
    	if (document.getElementById("help").selected == true)
    	{
    		document.getElementById('help_form').style.display = 'block';
    		document.getElementById('feedback_form').style.display = 'none';
    	}
    	else if (document.getElementById("feedback").selected == true)
    	{
    		document.getElementById('help_form').style.display = 'none';
    		document.getElementById('feedback_form').style.display = 'block';
    	}
    	else{
    		document.getElementById('help_form').style.display = 'none';
    		document.getElementById('feedback_form').style.display = 'none';
    	}
    }
    </script>
    </head>
    <body>
    <select name="select_form" id="select_form" onchange="find_select()">
      <option id="blank" value="blank"></option>
      <option id="help" value="help">Help Request</option>
      <option id="feedback" value="feedback">Feedback</option>
    </select>
    
    <div id="help_form" style="font:24px bold; display: none;">help</div>
    <div id="feedback_form" style="font:24px bold; display: none;">feedback</div>
    </body>
    </html>
    Since your options have an ID (which I use myself) I went right to the source.

  • Users who have thanked sunfighter for this post:

    captainbarred (06-30-2012)

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Location
    NY
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Man, you rock!!!

    So it looks like I was over complicating it - which I tend to do pretty regularly.

    Your right it is much simpler and more importantly, it actually works!

    I see I also had a foul up with the if portion of the statement with the last bit being another "else if" where it should have just been an "else".


    Thanks so much Sunfighter!!!!

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Sunfighter,

    I tried to use your nice coding to my own coding, but it is not working properly. If you can, please take a look at my coding and give me a hint.

    Thank you very much in advance!!

    PHP Code:
    <head>
     <
    script type="text/javascript">
    function 
    find_select()
    {
        if (
    document.getElementById("NEDERLAND").selected == true)
        {
            
    document.getElementById('ander').style.display 'block';
            
    document.getElementById('ander2').style.display 'block';
            
    document.getElementById('dutchcountries').style.display 'block';
            
    document.getElementById('dutchcountries2').style.display 'block';
            
    document.getElementById('germancountries').style.display 'none';
            
    document.getElementById('germancountries2').style.display 'none';
        }
        else if (
    document.getElementById("DUITSLAND").selected == true)
        {
            
    document.getElementById('ander').style.display 'none';
            
    document.getElementById('ander2').style.display 'none';
            
    document.getElementById('dutchcountries').style.display 'none';
            
    document.getElementById('dutchcountries2').style.display 'none';
            
    document.getElementById('germancountries').style.display 'block';
            
    document.getElementById('germancountries2').style.display 'block';
        }
        else{
            
    document.getElementById('ander').style.display 'none';
            
    document.getElementById('ander2').style.display 'none';
            
    document.getElementById('dutchcountries').style.display 'none';
            
    document.getElementById('dutchcountries2').style.display 'none';
            
    document.getElementById('germancountries').style.display 'none';
            
    document.getElementById('germancountries2').style.display 'none';
        }
    }
    </script>

    </head>
    <body>
                     <form action="#" name="eerste">
                   <tr>
                        <td><b>Country:</b></td>
                        <td>
                        <select name="country" onchange="find_select();">
                            <option id="ander" value="ander">select country</option> 
                            <option id="NEDERLAND" value="NEDERLAND"> NEDERLAND</option> 
                            <option id="DUITSLAND" value="DUITSLAND"> DUITSLAND</option> 
                        </select>
                        </td>
                    </tr>
    <p id="ander" style="font:24px bold; display: none;">
                   <tr>
                        <td><b>City:</b></td>
                        <td><input type="text" size="34" name="city" value="" /></td>
                    </tr>
    </p>
    <p id="germancountries" style="font:24px bold; display: none;">
                   <tr>
                        <td><b>City:</b></td>
                        <td>
                        <select name="germancities">
                            <option value=" Dörzbach">Dörzbach</option>
                            <option value="Eschau">Eschau</option>
                            <option value="Haschbach">Haschbach</option>
                            <option value="Pfaffing">Pfaffing</option>
                        </select>
                        </td>
                    </tr>
    </p>
    <p id="dutchcountries" style="font:24px bold; display: none;">
                   <tr>
                        <td width="180" height="30"><b>City:</b></td>
                        <td width="230" height="30">
                        <select name="dutchcities">
                            <option value="AAGTEKERKE"> AAGTEKERKE</option>
                            <option value="AARDENBURG"> AARDENBURG</option>
                            <option value="ABBEGA"> ABBEGA</option>
                            <option value="ABBEKERK"> ABBEKERK</option>
                        </select>
    </td>
                    </tr>
    </p>
                   </form></table>
                   
                                   <form name="tweede" method="post" action="tst2.asp">
    <p id="ander2" style="font:24px bold; display: none;">
                   <tr>
                        <td width="180">
                            <b>City:</b></td>
                        <td width="230">
                            <input type="text" size="34" name="city2" value="" id="city2" disabled /></td><td width="10"></td>
                        <td width="180"><input type="text" size="20" name="country21" value="" id="country21" disabled /></td>
                    </tr>
    </p>
    <p id="dutchcountries2" style="font:24px bold; display: none;">
                    <tr>
                        <td width="180">
                            <b>City:</b></td>
                        <td width="230">
                            <input type="text" size="34" name="germancities2" value="" id="germancities2" disabled /></td><td width="10"></td>
                        <td width="180"><input type="text" size="20" name="country22" value="" id="country22" disabled /></td>
                    </tr>
    </p>
    <p id="germancountries2" style="font:24px bold; display: none;">
                   <tr>
                        <td width="180">
                            <b>City:</b></td>
                        <td width="230">
                            <input type="text" size="34" name="dutchcities2" value="" id="dutchcities2" disabled /></td><td width="10"></td>
                        <td width="180"><input type="text" size="20" name="country23" value="" id="country23" disabled /></td>
                    </tr>
    </p>
    </form>
    </table>
      
    </body>
    </html> 

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The most significant errors are that you haven't opened your table tags. Make sure, also, that they only contain table elements (tr, etc.), with other elements nested within these.

    You are also repeating at least one id-number; they must be unique on the page.

    I assume that you have a DOCTYPE declararation and opening html tag?
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    An alternative using arrays:
    Code:
    function find_select() {
        var elems = ["ander", "ander2", "dutchcountries", "dutchcountries2",
                     "germancountries", "germancountries2"];
        var displays = [];
        displays[0] = ['none', 'none', 'none', 'none', 'block', 'block'];
        displays[1] = ['block', 'block', 'block', 'block', 'none', 'none'];
        displays[2] = ['none', 'none', 'none', 'none', 'none', 'none'];
        
        
        var index = (document.getElementById("NEDERLAND").selected) * 1 +
            (document.getElementById("DUITSLAND").selected) * 2;
        for (var i=0; i < elems.length; i++) {
            document.getElementById(elems[i]).style.display = displays[index][i];
        }
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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