Create dynamic dropdowns and collect results in DB?

Hi,

I'm new to ChronoForms after using a competing product(RSForms).

I'd like to create a form with dynamic drop-down menus. First drop-down field has 3 options to choose from, and based upon your selection, 1 of 3 option groups would be visible and available to select other options next.

Also, I'd like to send the form to multiple email addresses that would be collected on the form.

The skeleton of my form to start with

<table border="0"> 
	<tr> 
		<td>Choose a Category *</td> 
		<td>
        <select  name="form[CategoryName][]"  id="CategoryName" onchange="displayField()" >
        <option  value="Aerospace Exploration">Aerospace Exploration</option>
        <option  value="Renewable/Green Energy">Renewable/Green Energy</option>
        <option  value="Nutrition">Nutrition</option></select>
        <div class="formClr"></div>
        <span id="component16" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr id="hide"> 
		<td>Select a Team</td> 
		<td>
<input  name="form[Aerospace]" type="radio" value="ARCSat" id="Aerospace0"  /><label for="Aerospace0">ARCSat</label><br/>
<input  name="form[Aerospace]" type="radio" value="Sun Sailors" id="Aerospace1"  /><label for="Aerospace1">Sun Sailors</label><br/>
<input  name="form[Aerospace]" type="radio" value="Tenorios" id="Aerospace2"  /><label for="Aerospace2">Tenorios</label><br/>
<input  name="form[Aerospace]" type="radio" value="Emerson Applied Technology" id="Aerospace3"  /><label for="Aerospace3">Emerson Applied Technology</label><br/>
<input  name="form[Aerospace]" type="radio" value="GADGET Resonance" id="Aerospace4"  /><label for="Aerospace4">GADGET Resonance</label><br/>
<input  name="form[Aerospace]" type="radio" value="Hexigami" id="Aerospace5"  /><label for="Aerospace5">Hexigami</label><br/>
<input  name="form[Aerospace]" type="radio" value="Falcon Robotics project EVROV" id="Aerospace6"  /><label for="Aerospace6">Falcon Robotics project EVROV</label><br/>
<input  name="form[Aerospace]" type="radio" value="Monte Vista FBLA" id="Aerospace7"  /><label for="Aerospace7">Monte Vista FBLA</label><br/>
<div class="formClr"></div><span id="component10" class="formNoError">Invalid Input</span>
</td> 
		<td></td> 
	</tr> 
	<tr id="hide1"> 
		<td>Select a Team</td> 
		<td>
<input  name="form[Energy]" type="radio" value="ACWa" id="Energy0"  /><label for="Energy0">ACWa</label><br/>
<input  name="form[Energy]" type="radio" value="Ramana" id="Energy1"  /><label for="Energy1">Ramana</label><br/>
<input  name="form[Energy]" type="radio" value="ChlamyPower" id="Energy2"  /><label for="Energy2">ChlamyPower</label><br/>
<input  name="form[Energy]" type="radio" value="Team Orca" id="Energy3"  /><label for="Energy3">Team Orca</label><br/>
<input  name="form[Energy]" type="radio" value="Emerson Renewable Technology" id="Energy4"  /><label for="Energy4">Emerson Renewable Technology</label><br/>
<input  name="form[Energy]" type="radio" value="Going Green" id="Energy5"  /><label for="Energy5">Going Green</label><br/>
<input  name="form[Energy]" type="radio" value="Native Sun" id="Energy6"  /><label for="Energy6">Native Sun</label><br/>
<input  name="form[Energy]" type="radio" value="TJ Alpha" id="Energy7"  /><label for="Energy7">TJ Alpha</label><br/>
<input  name="form[Energy]" type="radio" value="TJ Delta Green" id="Energy8"  /><label for="Energy8">TJ Delta Green</label><br/>
<input  name="form[Energy]" type="radio" value="DOBB" id="Energy9"  /><label for="Energy9">DOBB</label><br/>
<input  name="form[Energy]" type="radio" value="Green MAST" id="Energy10"  /><label for="Energy10">Green MAST</label><br/>
<div class="formClr"></div><span id="component17" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr id="hide2"> 
		<td>Select a Team</td> 
		<td>
<input  name="form[Nutrition]" type="radio" value="AM Rocks" id="Nutrition0"  /><label for="Nutrition0">AM Rocks</label><br/>
<input  name="form[Nutrition]" type="radio" value="Team GBN Gadget" id="Nutrition1"  /><label for="Nutrition1">Team GBN Gadget</label><br/>
<input  name="form[Nutrition]" type="radio" value="Team Delicious" id="Nutrition2"  /><label for="Nutrition2">Team Delicious</label><br/>
<input  name="form[Nutrition]" type="radio" value="Team Rocket" id="Nutrition3"  /><label for="Nutrition3">Team Rocket</label><br/>
<input  name="form[Nutrition]" type="radio" value="Space Girls" id="Nutrition4"  /><label for="Nutrition4">Space Girls</label><br/>
<input  name="form[Nutrition]" type="radio" value="Megan Cline" id="Nutrition5"  /><label for="Nutrition5">Megan Cline</label><br/>
<div class="formClr"></div><span id="component18" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr> 
		<td>Enter your Name *</td> 
		<td><input type="text" value="" size="20" maxlength="60" name="form[Name]" id="Name" /><div class="formClr"></div><span id="component11" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr> 
		<td>Email Address *</td> 
		<td><input type="text" value="" size="20" maxlength="60" name="form[Email]" id="Email" /><div class="formClr"></div><span id="component12" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr> 
		<td>Email your Friend</td> 
		<td><input type="text" value="" size="20" maxlength="60" name="form[FriendEmail]" id="FriendEmail" /><div class="formClr"></div><span id="component13" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr> 
		<td>Select Affiliate</td> 
		<td>
<input  name="form[Affiliate]" type="radio" value="Affiliate 1" id="Affiliate0"  /><label for="Affiliate0">Affiliate 1</label><br/>
<input  name="form[Affiliate]" type="radio" value="Affiliate 2" id="Affiliate1"  /><label for="Affiliate1">Affiliate 2</label><br/>
<input  name="form[Affiliate]" type="radio" value="Affiliate 3" id="Affiliate2"  /><label for="Affiliate2">Affiliate 3</label><br/>
<input  name="form[Affiliate]" type="radio" value="Affiliate 4" id="Affiliate3"  /><label for="Affiliate3">Affiliate 4</label><br/>
<div class="formClr"></div><span id="component14" class="formNoError">Invalid Input</span></td> 
		<td></td> 
	</tr> 
	<tr> 
		<td></td> 
		<td><input type="submit" value="Submit" name="form[Submit]" id="Submit"  /><div class="formClr"></div><span id="component15" class="formNoError"></span></td> 
		<td></td> 
	</tr> 
</table> 

I'll be working on changing the radio buttons to dropdowns, but I need some assistance on next steps and how to collect the data and store it in a database table.

Thanks

Hi rrosko,

There's been a recent thread about selectively adding or unhiding fields. In this case I think you can probably do it with a small script to hide and unhide the blocks that you need.

There are tutorials on sending emails and saving to the database from the tutorials link above.

You can send emails to multiple addresses by using a Dynamic To element in the Email Setup and setting the value to an input name that contains a comma separated string of email addresses. You will need to build this string in the OnSubmit Before box.

Bob

Hello rrosko!

May it help for you..

open your form and put this code in the +/- "Form HTML" section of "Form Code" tab.

<div class="form_item">
  <div class="form_element cf_heading">
    <h1 class="cf_text">course finder</h1>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 200px;">step1:choose type of course</label>
    <select name="optone" class="cf_inputbox" size="1" onchange="setOptions(document.ChronoContact_course_finder.optone.options[document.ChronoContact_course_finder.optone.selectedIndex].value);">
      <option value=" " selected="selected">Choose Option</option>
      <option value="85">beauty courses</option>
	  <option value="69">complimentary courses</option>
	  <option value="80">teaching courses</option>
	  <option value="83">fitness courses</option>	  

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

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 200px;">step2: choose a subject</label>
    <select size="1" name="opttwo" class="cf_inputbox" >
    <option value=" " selected="selected">Choose Option</option>
      
    </select>
    <!--<input type="button" name="go" value="Value Selected" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">-->
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input type="submit" name="go" value="search" onclick="window.open(document.ChronoContact_course_finder.opttwo.options[document.ChronoContact_course_finder.opttwo.selectedIndex].value);">
  </div>
  <div class="cfclear"> </div>
    
</div>

-------------------------------------------------------------
now put this code in +/- "Form Javascript" portion.

function setOptions(chosen) {
var selbox = document.ChronoContact_course_finder.opttwo;
 
selbox.options.length = 0;
if (chosen == ' ') {
  selbox.options[selbox.options.length] = new Option('Choose Option',' ');
 
}
if (chosen == '85') {
  selbox.options[selbox.options.length] = new Option('ITEC Beauty Specialist Diploma','index.php?option=com_content&view=article&id=49&Itemid=68');
  selbox.options[selbox.options.length] = new Option('ITEC Professional Makeup','index.php?option=com_content&view=article&id=57&Itemid=76');
  selbox.options[selbox.options.length] = new Option('Fashion Catwalk & Photographic Makeup Course','index.php?option=com_content&view=article&id=67&Itemid=91');
  selbox.options[selbox.options.length] = new Option('Bridal Makeup Course','index.php?option=com_content&view=article&id=68&Itemid=92');
  selbox.options[selbox.options.length] = new Option('Special Effects Makeup','index.php?option=com_content&view=article&id=56&Itemid=77');
  selbox.options[selbox.options.length] = new Option('Gel Nails Course','index.php?option=com_content&view=article&id=65&Itemid=88');
  selbox.options[selbox.options.length] = new Option('Acrylic Nails Course','index.php?option=com_content&view=article&id=66&Itemid=89');
  selbox.options[selbox.options.length] = new Option('Spray Tanning Course','index.php?option=com_content&view=article&id=55&Itemid=73');  
}
if (chosen == '69') {
  selbox.options[selbox.options.length] = new Option('ITEC Holistic Massage Course','index.php?option=com_content&view=article&id=51&Itemid=2');
  selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=78');
  selbox.options[selbox.options.length] = new Option('Indian Head Massage Course','index.php?option=com_content&view=article&id=60&Itemid=79');
  selbox.options[selbox.options.length] = new Option('ITEC Reflexology Diploma','index.php?option=com_content&view=article&id=64&Itemid=87');
}
if (chosen == '80') {
  selbox.options[selbox.options.length] = new Option('ITEC Teaching Diploma','index.php?option=com_content&view=article&id=61&Itemid=81');
  selbox.options[selbox.options.length] = new Option('FETAC Train The Trainer Level 6','index.php?option=com_content&view=article&id=63&Itemid=86');
}
if (chosen == '83') {
  selbox.options[selbox.options.length] = new Option('ITEC Sports Massage Diploma','index.php?option=com_content&view=article&id=59&Itemid=90');

}
}

here we go.