Dropdown onchange to view DIVs - requesting help

captainbarred · 06-29-2012, 10:15 PM

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>

sunfighter · 06-30-2012, 04:21 PM

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.

captainbarred · 06-30-2012, 09:31 PM

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!!!!

aspcoderasp · 12-15-2012, 09:57 AM

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>

AndrewGSW · 12-16-2012, 02:30 AM

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?

AndrewGSW · 12-16-2012, 02:55 AM

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];
    }
}