[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