Linking drop-down menus

Hi,

I am having a serious problem with linking two drop down menus. I want the second drop-down menu to correspond to the first one. Suppose the first drop-down menu has a list of jobs and the second is a sub category of the relevant job. For example, When i select "Accounting" in the first drop-down menu I want the second drop down menu to only show the relevant sub-categories "Audits", "Bookkeeping", etc. Similarly, when I select "Printing" from the first drop down menu the second drop down menu should only show "Books", "Photos", etc. Please help me out with this!

Thank you.

Cheers,

Meh

SOS!

Do I need to get in to the Form HTML section and change the code?
Here is what it looks like currently:

<div class="form_item">
  <div class="form_element cf_heading">
    <h2 class="cf_text">Business Sign-Up Form</h2>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Business Details</h4>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Business Name</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_3" name="text_3" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">Business Description</label>
    <textarea class="cf_inputbox" rows="3" id="text_4" title="" cols="30" name="text_4"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Business Number</label>
    <select class="cf_inputbox validate-selection" id="select_22" size="1" title="You have to choose atleast one option!"  name="select_22">
    <option value="">Choose your option</option>
      <option value="ABN">ABN</option>
<option value="ACN">ACN</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">License Number</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_6" name="text_6" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Location</h4>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Street Adress</label>
    <input class="cf_inputbox required" maxlength="200" size="30" title="" id="text_11" name="text_11" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Suburb</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_17" name="text_17" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">State</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_15" name="text_15" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Postcode</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="30" title="" id="text_13" name="text_13" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Contact Details</h4>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Contact Person</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="" id="text_26" name="text_26" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Email Adress</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="" id="text_28" name="text_28" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Mobile</label>
    <input class="cf_inputbox required validate-number" maxlength="150" size="30" title="" id="text_27" name="text_27" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Office Number</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_29" name="text_29" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Fax Number</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_25" name="text_25" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_heading">
    <h4 class="cf_text">Services you offer</h4>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Category</label>
    <select class="cf_inputbox" id="select_31" size="1" title=""  name="select_31">
    
      <option value="Accounting">Accounting</option>
<option value="Air Conditioning & Heating">Air Conditioning & Heating</option>
<option value="Alarms">Alarms</option>
<option value="Appliances Repairs">Appliances Repairs</option>
<option value="Architecture">Architecture</option>
<option value="Automotive">Automotive</option>
<option value="Babysitting">Babysitting</option>
<option value="Beauty">Beauty</option>
<option value="Boating & Marine">Boating & Marine</option>
<option value="Bricklaying">Bricklaying</option>
<option value="Building">Building</option>
<option value="Business Consulting">Business Consulting</option>
<option value="Carpentry">Carpentry</option>
<option value="Carpets">Carpets</option>
<option value="Cleaning">Cleaning</option>
<option value="Computers">Computers</option>
<option value="Contracting">Contracting</option>
<option value="Costumes">Costumes</option>
<option value="Curtains, Blinds & Shutters">Curtains, Blinds & Shutters</option>
<option value="Demolition">Demolition</option>
<option value="Driving Lessons">Driving Lessons</option>
<option value="ducting &  Ventilation">ducting &  Ventilation</option>
<option value="Electrical Services">Electrical Services</option>
<option value="Fencing, Doors & Gate">Fencing, Doors & Gate</option>
<option value="Fitness & Health">Fitness & Health</option>
<option value="Flooring">Flooring</option>
<option value="Furniture">Furniture</option>
<option value="Furniture Removal">Furniture Removal</option>
<option value="Gardens">Gardens</option>
<option value="Graphic Design">Graphic Design</option>
<option value="Gyprock & Plasterboard">Gyprock & Plasterboard</option>
<option value="Household Services">Household Services</option>
<option value="Insulation">Insulation</option>
<option value="Insurance">Insurance</option>
<option value="Interior Decorator">Interior Decorator</option>
<option value="Laboring">Laboring</option>
<option value="Legal">Legal</option>
<option value="Locksmith">Locksmith</option>
<option value="Nanny / Baby Sitting">Nanny / Baby Sitting</option>
<option value="Office Administration">Office Administration</option>
<option value="Painting">Painting</option>
<option value="Paving">Paving</option>
<option value="Pest Control">Pest Control</option>
<option value="Pets">Pets</option>
<option value="Photography">Photography</option>
<option value="Plastering">Plastering</option>
<option value="Plumbing & Gas fitting">Plumbing & Gas fitting</option>
<option value="Pools & Spas">Pools & Spas</option>
<option value="Printing">Printing</option>
<option value="Renovations & extensions">Renovations & extensions</option>
<option value="Roofing">Roofing</option>
<option value="Rubbish Removal">Rubbish Removal</option>
<option value="Scaffolding">Scaffolding</option>
<option value="Shop Fits">Shop Fits</option>
<option value="Signange">Signange</option>
<option value="Stonework">Stonework</option>
<option value="Surveying">Surveying</option>
<option value="Tailoring">Tailoring</option>
<option value="Technician">Technician</option>
<option value="Tiling">Tiling</option>
<option value="Transport & Deliveries">Transport & Deliveries</option>
<option value="Websites">Websites</option>
<option value="Wedding & Events">Wedding & Events</option>
<option value="Windows & Glass">Windows & Glass</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Sub Category</label>
    <select class="cf_inputbox validate-selection" id="select_33" size="1" title=""  name="select_33">
    <option value="">Choose your option</option>
      <option value="Audits">Audits</option>
<option value="Bookkeeping">Bookkeeping</option>
<option value="Business Accounting">Business Accounting</option>
<option value="Funds Management">Funds Management</option>
<option value="Acquisitions">Acquisitions</option>
<option value="Payroll Tax">Payroll Tax</option>
<option value="Personal Tax Returns">Personal Tax Returns</option>
<option value="Superannuation">Superannuation</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">You are specialized in</label>
    <div class="float_left">
      <input value="Within Postcode" title="" class="radio validate-one-required" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">Within Postcode</label>
      <br />
      
<input value="Within State" title="" class="radio validate-one-required" id="radio01" name="radio0" type="radio" />
      <label for="radio01" class="radio_label">Within State</label>
      <br />
      
<input value="All State" title="" class="radio validate-one-required" id="radio02" name="radio0" type="radio" />
      <label for="radio02" class="radio_label">All State</label>
      <br />
      

    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_21" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

Please let me know know what needs to be changed here to make the second drop-down manu reflect options based on the selection of the first drop-down menu option. Thank you!

Hi Mehul,

Sorry I didn't understand what you mean by a drop-down menu here.

There are two main ways to do this: one is to group the options for the second drop-down in optgroups and use JavaScript to hide or unhide the optgroups; the other is to use Ajax to get the options for the second drop-down from the server.

The first is good if you have a relatively small total number of options. The second works better if there are a lto of options.

Bob

PS The 'optgroup' is explained in more detail in Chapter 7 of The ChronoForms Book; there's a How-To document on the Ajax approach for a few dollars here

This is the page I'm talking about: http://www.ozbizzle.com/index.php?option=com_chronocontact&Itemid=259

I have created this page using Chronoforms. If you scroll down to the "Services you offer" option you can see two drop down menus - category and sub category. I need the 2nd drop-down menu to display options relevant to the option selected in the 1st drop-down menu. It would be really helpful if you could explain in detail as I am a newbee. Thanks a lot!🙂

Hi Mehul,

I took a look at the form on your site. If you are going to load all the sub-options in the page then the first thing to do is to group them using

<optgroup label='Accounting'>
<option value="Accounting">Accounting</option>
. . .
</optgroup>
<optgroup label='Air Conditioning & Heating'>
<option value="AC Installation & Repair">AC Installation & Repair</option>
. . . 
// and so on

You probably need to clean up the values in the main group so that they don't include '&' or any other special characters as these may cause problem with the JavaScript.

Bob

Hi Bob,

You mean I need to keep the entire part as it is and just change the second drop-down menu part?

Which means I make the changes as follow:

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Sub Category</label>
<select class="cf_inputbox validate-selection" id="select_33" size="1" title="" name="select_33">
<option value="">Choose your option</option>

<optgroup label='Accounting'>
<option value="Auditing">Auditing</option>
<option value="Book keeping">Book keeping</option>
<option value="Auditing">Auditing</option>
</optgroup>

<optgroup label='Air Conditioning & Heating'>
<option value="AC Installation & Repair">AC Installation & Repair</option>
<option value="CCTV Installation">CCTV Installation</option>
<option value="Security Systems">Security Systems</option>
</optgroup>

and so on?

Thank you!

Mehul Shetty

Hi Mehul,

That's the first step - when you have that complete we'll add the JavaScript to get it working.

Bob

Hi Bob,

Great! I shall do that right away🙂

Best Regards,

Mehul

Hi Bob,

It's done. What do I do next?

PS: Sorry for bugging you so much🙂

Best Regards,

Mehul Shetty

Hi Mehul,

I've added in a modified version of the script from the book:

window.addEvent('load', function() {
  var optgroups = $('select_33').getElements('optgroup');
  // hide all the recipes to start with
  if ( $('select_31').value == '' ) {
    optgroups.each(function(item, index) {
      item.setStyle('display', 'none');
      item.disabled = true;
    });
  }

  $('select_31').addEvent('change', function() {
    var optgroups = $('select_33').getElements('optgroup');
    var category = $('select_31').value;
    optgroups.each(function(item, index) {
      if ( item.getProperty('id') == category ) {
        item.disabled = false;
        item.setStyle('display', 'block');
      } else {
        item.disabled = true;
        item.setStyle('display', 'none');
      }
    });
  });
});

Here 'select_31' is the id of the first drop-down and a'select_33' is the id of the second drop-down.

I couldn't get it to work with the full-text values you had in the first drop-down so I've modified

<option value="Accounting">Accounting</option>

to be

<option value="acc">Accounting</option>

(just for the first few on the list so far - you need to fix the rest).

I've modified the optgroup tags to have a matching id

<optgroup label='Accounting' id='acc' >   

Bob

Hi Bob,

Woooooohooooo!!!!! 😀

This is amazing - it's working😀
Thanks a ton for this, I have learnt something really interesting here. Can't thank you enough for this.

Best Regards,

Mehul Shetty

Hi Bob,

I'm so sorry - but I have another last question for you. Is there a way to generate automatic emails to people filling up the Services Needed form with selected fields (Name of the Company, Contact Person Name and Phone Number) of people registered using the Busines sign up form?

Best Regards,

Mehul

Hi Mehul,

Nothing automatic but it's entirely possible to create an email Template that looks up information in the database and includes the results in an email.

Bob

Hi Bob,

That's exactly what I want to do. I know I'm bugging you a lot - but your suggestions have helped me learn a lot.

Thank you!

Best Regards,

Mehul