[thelist] Re: js/css show div based on onchange
Courtenay
court3nay at gmail.com
Thu Oct 21 09:41:03 CDT 2004
Yeah, but it breaks for no javascript.
Also, tables are passe! Yes, its a cheeky response, but here goes.
Changes:
- Show the DSL router box by default.
(and move the style up to the head -- separation of content from
presentation!)
- hide the router DIV with some load-time javascript
- also, the display=""' reverts it to the default --- which is display:none here
- modernize structure a little
Also, maybe turn router into a checkbox ("Uses a router") or radio options?
Good luck
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function fillrouter(obj) {
if(obj.options[obj.selectedIndex].value == 'DSL')
document.getElementById("dslarea").style.display='';
else
document.getElementById("dslarea").style.display='none';
}
// determine whether they've checked DSL and haven't selected a router yes/no
function checkform(frm)
{
var it=frm.getElementById('internet_type');
if ((it.options[it.selectedIndex].value == 'DSL') &&
(frm.getElementById('router').selectedIndex==0))
return false;
else
return true;
}
function init() {
document.getElementById('dslarea').style.display='none';
}
</script>
<style type='"text/css">
#dslbox { display: block }
</style>
</head>
<body onload="init();">
<form name="frmdefault" method="post" action="frmhandler.php"
onsubmit="return checkform();">
<h3>Current Home Internet Type</h3>
<select name="internet_type" id="internet_type"
onchange="fillrouter(this);">
<option value=""></option>
<option value="CABLE">CABLE</option>
<option value="DSL">DSL</option>
<option value="DIALUP">DIALUP</option>
<option value="ISDN">ISDN</option>
<option value="OTHER">OTHER</option>
</select>
<div id='dslarea'>
<select id='router' name="router">
<option value=""></option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
</form>
</body>
</html>
More information about the thelist
mailing list