Show and Hide

tayorolls · Aug 13, 2007

Hi,

I have this example which works in IE Explorer, but not in Firefox. What changes do I make in the JS code to make it work both in IE and Firefox?

In the Firefox, I get the alert messages in the JS function, but there is no display of the div containers.

Thanks.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
    <title>Show and Hide Function</title>
    
    <script type="text/javascript">   
    function togDisplay(argState) {
	argState = String(argState);
	
	alert(argState);
	
	switch (argState) {			

    //Pass the option value of the Select Control. Based on the value, show the div you would like to display and hide the others.				          
	case "Car": 
		showCars.style.display = "block";
		showTrucks.style.display = "none";
		showSUV.style.display = "none";		
		break;
    
    case "PickUpTruck":
		showCars.style.display = "none";
		showTrucks.style.display = "block";
		showSUV.style.display = "none";		
		break;
    
    case "SUV":
		showCars.style.display = "none";
		showTrucks.style.display = "none";
		showSUV.style.display = "block";		
		break;
    }
}    
    </script>
</head>
<body>

Select Vehicle Type:
<select name="sVehicle" id="sVehicle" onChange="togDisplay(this.value);">
    <option value="">Select Vehicle Type</option>
    <option value="Car">Car</option>
    <option value="PickUpTruck">Pick Up Trucks</option>
    <option value="SUV">SUV</option>
</select>

<div id="showCars" style="display:none">
Enter Car Type: <input type="text" name="Car1" id="Car1" size="50" /><br />
Enter Car Type: <input type="text" name="Car2" id="Car2" size="50" /><br />
Enter Car Type: <input type="text" name="Car3" id="Car3" size="50" /><br />
</div>


<div id="showTrucks" style="display:none">
Enter Truck Type: <input type="text" name="Truck1" id="Truck1" size="50" /><br />
Enter Truck Type: <input type="text" name="Truck2" id="Truck2" size="50" /><br />
Enter Truck Type: <input type="text" name="Truck3" id="Truck3" size="50" /><br />
</div>

<div id="showSUV" style="display:none">
Enter SUV Type: <input type="text" name="SUV1" id="SUV1" size="50" /><br />
Enter SUV Type: <input type="text" name="SUV2" id="SUV2" size="50" /><br />
Enter SUV Type: <input type="text" name="SUV3" id="SUV3" size="50" /><br />
</div>
</body>
</html>

feherke · Aug 13, 2007

Hi

[ul]
[li]The problem is not HTML/CSS, but JavaScript.[/li]
[li]That is Explorer only code, so will work only in Explorer.[/li]
[/ul]

Code:

function togDisplay(argState) {
    argState = String(argState);
    
    alert(argState);
    
    switch (argState) {            

    //Pass the option value of the Select Control. Based on the value, show the div you would like to display and hide the others.
    case "Car":
        [red]document.getElementById('[/red]showCars[red]')[/red].style.display = "block";
        [red]document.getElementById('[/red]showTrucks[red]')[/red].style.display = "none";
        [red]document.getElementById('[/red]showSUV[red]')[/red].style.display = "none";
        break;

    case "PickUpTruck":
        [red]document.getElementById('[/red]showCars[red]')[/red].style.display = "none";
        [red]document.getElementById('[/red]showTrucks[red]')[/red].style.display = "block";
        [red]document.getElementById('[/red]showSUV[red]')[/red].style.display = "none";
        break;

    case "SUV":
        [red]document.getElementById('[/red]showCars[red]')[/red].style.display = "none";
        [red]document.getElementById('[/red]showTrucks[red]')[/red].style.display = "none";
        [red]document.getElementById('[/red]showSUV[red]')[/red].style.display = "block";
        break;
    }
}    

[gray]// or[/gray]

function togDisplay(argState) {
    argState = String(argState);
    
    alert(argState);

    [red]var showCars=document.getElementById('showCars');[/red]
    [red]var showTrucks=document.getElementById('showTrucks');[/red]
    [red]var showSUV=document.getElementById('showSUV');[/red]


    switch (argState) {

    //Pass the option value of the Select Control. Based on the value, show the div you would like to display and hide the others.
    case "Car":
        showCars.style.display = "block";
        showTrucks.style.display = "none";
        showSUV.style.display = "none";
        break;

    case "PickUpTruck":
        showCars.style.display = "none";
        showTrucks.style.display = "block";
        showSUV.style.display = "none";
        break;

    case "SUV":
        showCars.style.display = "none";
        showTrucks.style.display = "none";
        showSUV.style.display = "block";
        break;
    }
}

Feherke.

http://rootshell.be/~feherke/

feherke · Aug 13, 2007

Hi

By the way, why that huge [tt]switch[/tt] ?

Code:

function togDisplay(arg) {
    argState = String(arg.value);

    var divName=new Array('showCars','showTrucks','showSUV');

    for (var i=0;i<divName.length;i++)
        document.getElementById(divName[i]).style.display=arg.selectedIndex==i?'block':'none';
}

And call it like :

Code:

<select name="sVehicle" id="sVehicle" onChange="togDisplay([red]this[/red]);">

Note, that if not needed elsewhere, you can remove the function's first line.

Feherke.

http://rootshell.be/~feherke/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show and Hide

tayorolls

MIS

feherke

Programmer

feherke

Programmer

Similar threads

Part and Inventory Search

Sponsor