Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

Dependent select boxes

bm
bmheck 11 Aug, 2009
A few other people have discussed setting up dependent select boxes, but I'm still having trouble and hope that someone might point me in the right direction. Unfortunately, I'm not very good with JS, so I probably am overlooking something rather simple, so please take pity.... :^)

I'm trying to create a form in which the options in the the first selection box control which options are shown in a second selection box. I found some elegant code to set this up and it works really nicely when I execute the full HTML file directly (see the Area and Activity boxes):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <input>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Columbus Audubon Volunteer Time Entry
    </title>
<script type="text/javascript">
 var Blank = [''];
 var Groups = new Array ('ad:Administration','cs:Citizen Science','co:Conservation','de:Development','ed:Education');
  var ad = new Array(':Board Meeting',':Committee Meeting',':Web Site',':Other Administration');
  var cs = new Array(':Christmas Bird Count',':IBA Monitoring',':Other Citizen Science');  
  var co = new Array(':Calamus Swamp',':Other Conservation');
  var de = new Array(':Art for Audubon',':Birdathon',':Bird Seed Sale',':Membership',':Other Development');  
  var ed = new Array(':EcoWeekend',':Public Programs',':South Side Settlement',':Other Education');


function ListSetUp(level) {
  switch (level) {
   case 'Groups' : Populate('Area',Groups);   Populate('Activity', Blank); break;
    case 'ad': Populate('Activity', ad); break;
    case 'cs': Populate('Activity', cs); break;
    case 'co': Populate('Activity', co); break;
    case 'de': Populate('Activity', de); break;
    case 'ed': Populate('Activity', ed); break;
    
   default : alert('Invalid entry: '+level); break;  // should never ooccur
  }
}

function Populate(IDS,Items){
  var tmp = [];
  var sel = document.getElementById(IDS);
  sel.options.length=0;
  sel.options[0]=new Option('[SELECT]','',true,true);
  for (var zxc0=0;zxc0<Items.length;zxc0++){
    if (Items[zxc0]){
      tmp = Items[zxc0].split(':');
      sel.options[sel.options.length]=new Option(tmp[1],tmp[0],true,true);
    }
  }
  sel.selectedIndex=0;
}


</script>
    
  </head>
  <body onload="ListSetUp('Groups')">
    <form method="post" name="ColumbusAudubonVolunteerTimeEntry"><h1>Columbus Audubon Volunteer Time Entry</h1>
      <br>
      <br>
      <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td>Volunteer</td>
            <td>Last Name </td>
            <td>
              <input maxlength="40" size="20" name="LastName"></td>
            <td>First Name </td>
            <td>
              <input maxlength="40" size="20" name="FirstName"></td>
          </tr>
          <tr>
          <td>Activity Dates
          </td>
          <td>
          Start Date
          </td>
          <td>
          <input maxlength="8" size="8" name="StartDate">
          </td>
          <td>
          End Date
          </td>
          <td>
          <input maxlength="8" size="8" name="EndDate"> 
          </td>
          </tr>
          <tr>
            <td>Activity</td>
            <td>Area</td>
            <td>
              <select id="Area" onchange="ListSetUp(this.value)"></select>
            </td>
            <td>Activity</td>
            <td>
            <select id="Activity"></select>
            </td>
          </tr>
          <tr>
            <td>Hours</td>
            <td></td>
            <td>
              <input maxlength="5" size="4" name="Hours" value="0"></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table> 
        <button name="Submit">Submit</button>
    </form>
  </body>
</html>


But in ChronoForms, when I put the JS in the JS box and the HTML part in the HTML code area, then ChronoForm, the Area and Activity boxes are not populated at all. There's are small empty boxes where the selection boxes should be, so CF knows that there should be something there but doesn't know what to put there. Here's the JS piece as it is in CF:

 var Blank = [''];
 var Groups = new Array ('ad:Administration','cs:Citizen Science','co:Conservation','de:Development','ed:Education');
  var ad = new Array(':Board Meeting',':Committee Meeting',':Web Site',':Other Administration');
  var cs = new Array(':Christmas Bird Count',':IBA Monitoring',':Other Citizen Science');  
  var co = new Array(':Calamus Swamp',':Other Conservation');
  var de = new Array(':Art for Audubon',':Birdathon',':Bird Seed Sale',':Membership',':Other Development');  
  var ed = new Array(':EcoWeekend',':Public Programs',':South Side Settlement',':Other Education');


function ListSetUp(level) {
  switch (level) {
   case 'Groups' : Populate('Area',Groups);   Populate('Activity', Blank); break;
    case 'ad': Populate('Activity', ad); break;
    case 'cs': Populate('Activity', cs); break;
    case 'co': Populate('Activity', co); break;
    case 'de': Populate('Activity', de); break;
    case 'ed': Populate('Activity', ed); break;
    
   default : alert('Invalid entry: '+level); break;  // should never ooccur
  }
}

function Populate(IDS,Items){
  var tmp = [];
  var sel = document.getElementById(IDS);
  sel.options.length=0;
  sel.options[0]=new Option('[SELECT]','',true,true);
  for (var zxc0=0;zxc0<Items.length;zxc0++){
    if (Items[zxc0]){
      tmp = Items[zxc0].split(':');
      sel.options[sel.options.length]=new Option(tmp[1],tmp[0],true,true);
    }
  }
  sel.selectedIndex=0;
}


and the HTML piece:

<h1>Columbus Audubon Volunteer Time Entry</h1>
      <br>
      <br>
      <table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td>Volunteer</td>
            <td>Last Name </td>
            <td>
              <input maxlength="40" size="20" name="LastName"></td>
            <td>First Name </td>
            <td>
              <input maxlength="40" size="20" name="FirstName"></td>
          </tr>
          <tr>
          <td>Activity Dates
          </td>
          <td>
          Start Date
          </td>
          <td>
          <input maxlength="8" size="8" name="StartDate">
          </td>
          <td>
          End Date
          </td>
          <td>
          <input maxlength="8" size="8" name="EndDate"> 
          </td>
          </tr>
          <tr>
            <td>Activity</td>
            <td>Area</td>
            <td>
              <select id="Area" onchange="ListSetUp(this.value)"></select>
            </td>
            <td>Activity</td>
            <td>
            <select id="Activity"></select>
            </td>
          </tr>
          <tr>
            <td>Hours</td>
            <td></td>
            <td>
              <input maxlength="5" size="4" name="Hours" value="0"></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table> 
        <button name="Submit">Submit</button>


I'm guessing that the issue has to do with naming the function, but I've tried a few variations and no luck. Any ideas?

Thanks in advance for any help!
Gr
GreyHead 12 Aug, 2009
Hi bmheck,

Looks as though you are missing this line in the CF version
  <body onload="ListSetUp('Groups')">
Rather thatn try to add it to the Joomla body tag I'd change your JavaScript to load from the Form HTML
<?php
$script = "
window.addEvent('onload', function() {
var Blank = [''];
var Groups = new Array ('ad:Administration','cs:Citizen Science','co:Conservation','de:Development','ed:Education');
  var ad = new Array(':Board Meeting',':Committee Meeting',':Web Site',':Other Administration');
  var cs = new Array(':Christmas Bird Count',':IBA Monitoring',':Other Citizen Science'); 
  var co = new Array(':Calamus Swamp',':Other Conservation');
  var de = new Array(':Art for Audubon',':Birdathon',':Bird Seed Sale',':Membership',':Other Development'); 
  var ed = new Array(':EcoWeekend',':Public Programs',':South Side Settlement',':Other Education');


function ListSetUp(level) {
  switch (level) {
   case 'Groups' : Populate('Area',Groups);   Populate('Activity', Blank); break;
    case 'ad': Populate('Activity', ad); break;
    case 'cs': Populate('Activity', cs); break;
    case 'co': Populate('Activity', co); break;
    case 'de': Populate('Activity', de); break;
    case 'ed': Populate('Activity', ed); break;
   
   default : alert('Invalid entry: '+level); break;  // should never ooccur
  }
}

function Populate(IDS,Items){
  var tmp = [];
  var sel = document.getElementById(IDS);
  sel.options.length=0;
  sel.options[0]=new Option('[SELECT]','',true,true);
  for (var zxc0=0;zxc0<Items.length;zxc0++){
    if (Items[zxc0]){
      tmp = Items[zxc0].split(':');
      sel.options[sel.options.length]=new Option(tmp[1],tmp[0],true,true);
    }
  }
  sel.selectedIndex=0;
}
ListSetUp('Groups');
});
";
$doc =& JFactory::Get Document();
$doc->addScriptDeclaration($script);
?>

This should load the script in the page header and call the ListSetUp function.

Bob

NB 'domload' is a MooTools function - if MooTools isn't loaded then change it to onload.
This topic is locked and no more replies can be posted.