Can this be done? If so, how?

I want to create a very basic Form.

That operates just like this....

http://www.assessment.ucf.edu/assessment_archive/assessmentarchive.aspx

To understand how I want this to operate... choose
Plan Year-> 2010-2011
Program Unit->Pick any

In short this simple form operates like this

Auto-Populate Drop Down List 1
Depending on Choice for Drop Down List 1, Populate Drop Down List 2
Depending on Choice for Drop Down List 2, Populate HTML for corresponding Article

I would like Chronoforms to provide this functionality if possible by:

1. Populate Drop Down List 1 with all Child Category Names from #_categories, based on the ID of a Parent Category (SELECT title FROM #__categories WHERE parent_id = "ID of parent category")
2. When an item is selected from Drop Down List 1, Drop Down List 2 is Populated with the names of All the Articles in that Child Category from #_content (SELECT title FROM #__content WHERE title = "Title From Drop Down 1")
3. When an item is selected from Drop Down List 2, get article HTML from database and display below form. (SELECT introtext FROM #__content WHERE title = "Title from Drop Down 2").

Very simple in theory, not sure if Chronoforms can handle this?

Hi agiles2303,

The form may only have a few inputs but it's not what I would call a simple form. You can do this in ChronoForms using Ajax to load the data for the second drop-down. This isn't built-in to ChronoForms but the code isn't too hard to add.


Bob

Thanks for the reply, sorry about the double post, didn't see the message that the topic had to be approved.

Is there anyway I can receive some assistance in using Chronoforms to achieve this functionality?

I have done something similar in ChronoForms v3 with JavaScript based on the example at:

http://chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=7&t=5798&start=30#p17191

Neil.

Neil,

I am not having any success in translating that example into a workable version for my purposes.

Hi agiles2303,

Here are my notes from the particular example which was car make/model but I think the principle is the same. You can see this working at (remove spaces): aaac towing dot com dot au.

I hope this helps,

Neil.

Second dropdown option list is based on first dropdown option selected. Useful for country/state, make/model etc.

Note: on second dropdowns, the first one is set to: style='display:block;' and the subsequent ones are set to: style='display:none;'

EXAMPLE 1: FEW DROP DOWN ITEMS THAT ARE INCLUDED IN THE FORM

HTML:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Make:</label>
    <div id="make">
      <select class="cf_inputbox validate-selection" id="make_list" size="1" title="choose make"  name="VehicleMake" onChange="change_make();" >
        <option value="" selected="selected">Choose Option</option>
        <option value="Ford">Ford</option>
        <option value="Toyota">Toyota</option>
      </select>
      <span style="color:red;font-size:130%;">*</span>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Model:</label>

    <div id="Ford" class="select" style="display:block;" >
      <select class="cf_inputbox validate-selection" id="model_list" size="1" title="choose model"  name="VehicleModel">
        <option value="">Choose Option</option>
        <option value="Cortina">Cortina</option>
        <option value="Fairmont">Fairmont</option>
        <option value="Falcon">Falcon</option>
      </select>
      <span style="color:red;font-size:130%;">*</span>
    </div>

    <div id="Toyota" class="select" style="display:none;" >
      <select class="cf_inputbox validate-selection" id="model_list" size="1" title="choose model"  name="VehicleModel">
        <option value="">Choose Option</option>
        <option value="Camry">Camry</option>
        <option value="Corolla">Corolla</option>
        <option value="Landcruiser">Landcruiser</option>
      </select>
      <span style="color:red;font-size:130%;">*</span>
    </div>

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

JAVASCRIPT:

function change_make()
  {
    var make = $('make_list');
    var selects = $$('div.select');
    for ( var i = 0; i < selects.length; i++ ) {
      if ( selects[i].id == make.value ) {
        selects[i].style.display = 'block';
      } else {
        selects[i].style.display = 'none';
      }
    }
  }

EXAMPLE 2: MANY DROP DOWN ITEMS PULLED FROM DATABASE TABLES

CREATE TABLES in MYSQL DATABASE LIKE THIS:

joom_car_makes

MakeID	MakeDesc
1	Alfa Romeo
2	Audi
3	BMW
3	Chevrolet
3	Chrysler
3	Citroen
etc.

joom_car_models

ModelID	ModelMakeID	ModelDesc
1		1		147
2		1		159
3		1		156
4		1		GTV/Spider
5		2		80
6		2		A3
etc.

CREATE TABLES:

CREATE TABLE joom_car_makes (
  MakeID INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  MakeDesc VARCHAR(255) NOT NULL
);

CREATE TABLE joom_car_models (
  ModelID INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  ModelMakeID INT(11) NOT NULL,
  ModelDesc VARCHAR(255) NOT NULL
);

POPULATE CAR MAKE TABLE:

INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (1, 'Alfa Romeo');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (2, 'Audi');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (3, 'BMW');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (4, 'Chevrolet');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (5, 'Chrysler');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (6, 'Citroen');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (7, 'Daewoo');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (8, 'Daihatsu');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (9, 'Dodge');
INSERT INTO joom_car_makes (MakeID,MakeDesc) VALUES (10, 'Eunos');
etc.

POPULATE CAR MODEL TABLE:

INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (1,1, '147');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (2,1, '159');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (3,1, '156');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (4,1, 'GTV/Spider');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (5,2, '80');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (6,2, 'A3');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (7,2, 'A4');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (8,2, 'A6');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (9,2, 'Q7');
INSERT INTO joom_car_models (ModelID,ModelMakeID,ModelDesc) VALUES (10,2, 'TT');
etc.

THEN USE THIS HTML CODE:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Make:</label>
    <div id="make">
      <select class="cf_inputbox" id="make_list" size="1" title="choose make"  name="VehicleMake" onChange="change_make();" >
        <option value="" selected="selected">Choose Option</option>
        <?php
          $database =& JFactory::getDBO();
          $database->setQuery("SELECT MakeID,MakeDesc FROM joom_car_makes ORDER BY MakeDesc");
          $makes = $database->loadObjectList();
          foreach($makes as $make){
            echo "        <option value=\"" . $make->MakeDesc . "\">" . $make->MakeDesc . "</option>\n";
          }
        ?>
        <option value="Other (please specify)">Other (please specify)</option>
      </select>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Model:</label>
    <?php
      $database =& JFactory::getDBO();
      $database->setQuery("SELECT MakeID,MakeDesc FROM joom_car_makes ORDER BY MakeDesc");
      $makes = $database->loadObjectList();
      foreach($makes as $make){
        echo "    <div id='$make->MakeDesc' class='select' style='display:none;' >\n";
        echo "      <select class='cf_inputbox' id='model_list' size='1' title='choose model'  name='VehicleModel'>\n";
        echo "        <option value=''>Choose Option</option>\n";
        $database->setQuery("SELECT ModelID,ModelMakeID,ModelDesc FROM joom_car_models WHERE ModelMakeID=$make->MakeID ORDER BY ModelDesc");
        $models = $database->loadObjectList();
        foreach($models as $model){
          echo "        <option value=\"" . $model->ModelDesc . "\">" . $model->ModelDesc . "</option>\n";
        }
        echo "        <option value='Other (please specify)'>Other (please specify)</option>\n";
        echo "      </select>\n";
        echo "    </div>\n";
      }
    ?>
    <div id="Other (please specify)" class="select" style="display:none;" >
      <select class="cf_inputbox" id="model_list" size="1" title="choose model"  name="VehicleModel">
        <option value="">Choose Option</option>
        <option value="Other (please specify)">Other (please specify)</option>
      </select>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

JAVASCRIPT STAYS THE SAME:

function change_make()
  {
    var make = $('make_list');
    var selects = $$('div.select');
    for ( var i = 0; i < selects.length; i++ ) {
      if ( selects[i].id == make.value ) {
        selects[i].style.display = 'block';
      } else {
        selects[i].style.display = 'none';
      }
    }
  }

Neil,

Thank you so much!

I got the drop downs to populate how I wanted.

One last thing I need to accomplish...

After the second drop down is selected, a DB query gets the value in a specific column based on the id of the second drop down selected, and displays that when it is selected.

Could you please help me with that?

So basically, it works just like drop down 1 and drop down 2 work. Instead when drop down 2 is selected it just displays a block of text from the table column.

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Plan Year:</label>
    <div id="make">
      <select class="cf_inputbox" id="make_list" size="1" title="choose make"  name="VehicleMake" onChange="change_make();" >
        <option value="" selected="selected">Choose Option</option>
        <?php
          $database =& JFactory::getDBO();
          $database->setQuery("SELECT id, title FROM #__categories WHERE parent_id = '88' ORDER BY title");
          $makes = $database->loadObjectList();
          foreach($makes as $make){
            echo "        <option value=\"" . $make->title . "\">" . $make->title . "</option>\n";
          }
        ?>
        <!--option value="Other (please specify)">Other (please specify)</option!-->
      </select>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Program/Unit:</label>
    <?php
      $database =& JFactory::getDBO();
      $database->setQuery("SELECT id, title FROM #__categories WHERE parent_id = '88' ORDER BY title");
      $makes = $database->loadObjectList();
      foreach($makes as $make){
        echo "    <div id='$make->title' class='select' style='display:none;' >\n";
        echo "      <select class='cf_inputbox' id='model_list' size='1' title='choose model'  name='VehicleModel'>\n";
        echo "        <option value=''>Choose Option</option>\n";
        $database->setQuery("SELECT id,title FROM #__content WHERE catid = $make->id ORDER BY title");
        $models = $database->loadObjectList();
        foreach($models as $model){
          echo "        <option value=\"" . $model->id . "\">" . $model->title . "</option>\n";
        }
        //echo "        <option value='Other (please specify)'>Other (please specify)</option>\n";
        echo "      </select>\n";
        echo "    </div>\n";
      }
    ?>
    <div id="Other (please specify)" class="select" style="display:none;" >
      <select class="cf_inputbox" id="model_list" size="1" title="choose model"  name="VehicleModel">
        <option value="">Choose Option</option>
        <option value="Other (please specify)">Other (please specify)</option>
      </select>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

The SELECT statement would be

SELECT introtext FROM #__content WHERE $id = $model->id;

Hi agiles2303,

I think what you need to do is to include an onChange parameter in the second drop down select statement and add a corresponding Javascript function to set relevant div ids to display = 'block' in a similar way to the existing code.

I have had a go but I'm no JavaScript expert!

Maybe someone else can help?

Neil.