How to populate dropdown depending on another dropodown ?

Hello
I have a problem populating one dropdown depending on another dropdown selection.
Both dropdown selection boxes momently are being populated from the database.

The application is about state/city or category/subcategory.

Here is my code for the both dropdowns.
Any idea?

Thanx in advance

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Shteti</label>
    <?php
    $db =& JFactory::getDBO();
	$query = "SELECT shteti_1 FROM #__chronoforms_shto_shtet";
            
    $db->setQuery($query);
    $rows = $db->loadResultArray();
    ?>
   
    <SELECT class="cf_inputbox validate-selection" id=select_3 size=1 name=select_3 >
    <?php
    foreach ($rows as $row) {
      echo "<option value='$row'>$row</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;">Shteti</label>
    <?php
    $db =& JFactory::getDBO();
	$query = "SELECT text_2 FROM #__chronoforms_shto_qytet";
        
    $db->setQuery($query);
    $rows = $db->loadResultArray();
    ?>
   
    <SELECT class="cf_inputbox validate-selection" id=select_3 size=1 name=select_3 >
    <?php
    foreach ($rows as $row) {
      echo "<option value='$row'>$row</option>";
    }
    ?>
    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

Hi ErinD,

You can't do both drop-downs in a linked pair like this using just PHP. At the time the PHP runs on the server there is no way to know which 'state' will be selected and thus no way of knowing which city list to display.

The simplest approach is to use a two step form, select the state, submit the form and then redisplay with the appropriate city list. I assume that you don't want to do this.

I know of two other approaches to this. If there are a few second lists and they are fairly short, then you can create all possible lists in PHP and use a little JavaScript in the page to select and display the appropriate city list. With say 50 states with 50 cities in each this gets a bit too heavy.

The third approach is to use AJAX linked to the first drop-down to get a list of cities from the server and populate the second drop-down. This can work quite smoothly and is my preferred solution - but it may not fail gracefully if JavaScript is disabled in the browser.

Bob

Tanx for the reply.

I have only 3 states and about 10-20 citites per state.
The first solution looked ok for me(the one with the predefined tables in php)

My question is:
Can I make the tables with chronoforms?
Is it ok to make only one table, with two records (state and city)?

Another problem that worries me is that when i populate the drop down form a database, and then submit my form, in the database of this form the records of the dropdowns are empty. Why?😟

Hi erind,

You can make tables with ChronoForms -- but it might be simpler to do it directly with a MySQL tool.

You could merge the two tables into one with id + state + city, it makes the MySQL a tiny bit more complex but no real problem.

I've no idea why your drop-down values aren't saving. Does the name of the 'select' input *exactly* match a column name in the table?

Bob

Hi bob

I have created 3 different tables , with 3 different forms (one table/form per state) to add a city.
Now i can populate each state with cities.

How can i connect the city dropdown depending from the state dropdown?

erind

Hello

I have an application to made.
I have two dropdown menus, one states and one cities.
The one with states it has only 3 states.
I want to change the dropdown cities content depending on the states.
I have created with chronoforms 3 different databaes, one per state with a record city.
I know that this can be made through javascript but i dont know how.
Please suggest me something.

Thanx in anvanced.

Erind

3 Database or 3 tables ?????????
You need states listed in one table
then another table with city's, with a ref to which state it belongs to.

listing states is easy bit, when you select state, it passes the value to external php file using ajax, to process and echo all cities which have same state ref you have selected, and then use ajax again to display these results to the page.

rough guide is listed below

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Shteti</label>
<?php
$db =& JFactory::getDBO();
$query = "SELECT shteti_1 FROM #__chronoforms_shto_shtet";

$db->setQuery($query);
$rows = $db->loadResultArray();
?>

<select class="cf_inputbox validate-selection" id="select_3" size="1" name="select_3" onchange="UpdateCityOptions(this.value)">
<?php
foreach ($rows as $row) {
echo "<option value='$row'>$row</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;">Shteti</label>
<?php
$db =& JFactory::getDBO();
$query = "SELECT text_2 FROM #__chronoforms_shto_qytet";

$db->setQuery($query);
$rows = $db->loadResultArray();
?>
<div id="DD_city_container"> <!--this is where the updated city option list is placed-->
<select class="cf_inputbox validate-selection" id="select_4" size="1" name="select_4">
<option value="">Select State First</option>
</select>

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

javascript file

dropdown_city_update.js

var xmlhttp

function UpdateCityOptions(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url="dropdown_city_update.php";

url=url+"?stateref="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("DD_city_container").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

php file

dropdown_city_update.php

<?php

$get_DDstateref=$_GET["stateref"];

$db =& JFactory::getDBO();
$query = "SELECT stateref,city FROM #__chronoforms_shto_qytet WHERE stateref ='$get_DDstateref'";

$db->setQuery($query);
$rows = $db->loadResultArray();
echo "<select class=\"cf_inputbox validate-selection\" id=\"select_4\" size=\"1\" name=\"select_4\">\n";
foreach ($rows as $row)
{
echo "<option value='$row'>$row</option>\n";
}
echo "</select>\n";

?>

Well I have some kind of the same problem.

I have three CForms with three tables associated. I have set up one common fieldkey in these three tables.

I would like to set a form in which I will input a value (fieldkey),

1) then get back the row associated with this fieldkey value from the table in which it is (which means searching in the three tables)

2) then writing the row/values in the email template, send it

3) and then write a "sent" status in the table from which the value was found

2) seems not a problem but I have no idea for 1) and don't know how I can write in one of three tables with the same field after the email is sent

Is there another possibility than by ajax ? I am really just a beginner in php .

Hi alterna,

It's not particularly hard. It would be easier if all three forms linked to the same table though!

You'll need to hand code a series of db queries to check which of the tables has an entry. You can possibly do this in single query if you are more expert than I am with MySQL.

Once you have the result you can add them to hidden fields in the form for inclusion in an email as you would any other form data.

Bob

Hi Bob,

Thanks but it means that I have to make an ajax request in this case ?
I mean input the key, wait for the request, then have the email setup ?

Hi alterna,

I don't think you need AJAX, you don't need to do this when the form is displayed it can be done after submission.

Bob

Yes you are absolutely right in this case !

But I forgot to precise that once I have the proper row found in the table thanks to the key, I need to input one or two fields before sending the email. Sorry I'm french, not always easy to explain all in english

This why I went to this topic "depending on a dropdown" :wink:

So let's say that I get the proper row in the proper table thanks to the key that I inputed, how can I link all this with a new form in which I will input two fields manually and then send my email template with the data of both the first request and the manually inputed fields ?

Hi alterna,

You can do it with a multi-page form using the plugin; or you can add the ajax to the single page form. The first is probably a little easier.

Bob

Hi,

Here's a link to my website: http://www.ozbizzle.com/index.php?option=com_chronocontact&Itemid=259

On the given link, if you scroll down you'll be able to see a section named "Services you offer"

The first drop-down menu has he items correct. However, I want the second drop-down menu should show options based on the selection of the first drop down menu. For example, when "Computers" is selected in the 1st drop-down menu the second one should show only the options related to "Computers" and not the way it is currently showing. Please help me out with this.

Thanks in advance!🙂

Hi Mehul,

I think I've already pointed you to my How-To document "ChronoForms Double Drop-down with Ajax" (25 page pdf download for $3). That's probably the best solution for you here.

Bob

I tried doing that. I even got a Pay Pal receipt number. And when i try inserting it as the Coupon code it is giving me an error "DMS_INVALID_COUPON". What could be the reason?

Hi Mehul,

Thanks - the document should be emailed to the address you gave. I'm just going out for a few minutes, will send you a copy when I get back.

Bob

Thanks a lot Bob - you've been of great help. I shall update you on how this thing helps me once i try it. Thanks again!

PS: I'm not sure whether you remember me - I was the DE on your Chronoforms book🙂

Best Regards,

Mehul

Hi Mehul,

I've sent you a PM with the document attached.

I did recognise your name but hadn't realised that you were the same Mehul Shetty . . . good to see you here.

Boib

Any idea why this doesn't work in ie?

3 Database or 3 tables ?????????
You need states listed in one table
then another table with city's, with a ref to which state it belongs to.

listing states is easy bit, when you select state, it passes the value to external php file using ajax, to process and echo all cities which have same state ref you have selected, and then use ajax again to display these results to the page.

rough guide is listed below

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Shteti</label>
    <?php
    $db =& JFactory::getDBO();
   $query = "SELECT shteti_1 FROM #__chronoforms_shto_shtet";
           
    $db->setQuery($query);
    $rows = $db->loadResultArray();
    ?>
  
    <select class="cf_inputbox validate-selection" id="select_3" size="1" name="select_3" onchange="UpdateCityOptions(this.value)">
    <?php
    foreach ($rows as $row) {
      echo "<option value='$row'>$row</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;">Shteti</label>
        <?php
        $db =& JFactory::getDBO();
       $query = "SELECT text_2 FROM #__chronoforms_shto_qytet";
           
        $db->setQuery($query);
        $rows = $db->loadResultArray();
        ?>
       <div id="DD_city_container"> <!--this is where the updated city option list is placed-->
	   <select class="cf_inputbox validate-selection" id="select_4" size="1" name="select_4">
	   <option value="">Select State First</option>
	   </select>
        
       </div>
      </div>
      <div class="cfclear"> </div>
    </div>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

javascript file

dropdown_city_update.js
	
var xmlhttp

function UpdateCityOptions(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }

var url="dropdown_city_update.php";

url=url+"?stateref="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("DD_city_container").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

php file

dropdown_city_update.php

    <?php
	
	$get_DDstateref=$_GET["stateref"];
	
	$db =& JFactory::getDBO();
   $query = "SELECT stateref,city FROM #__chronoforms_shto_qytet WHERE stateref ='$get_DDstateref'";
           
    $db->setQuery($query);
    $rows = $db->loadResultArray();
	echo "<select class=\"cf_inputbox validate-selection\" id=\"select_4\" size=\"1\" name=\"select_4\">\n";
    foreach ($rows as $row) 
	{
     echo "<option value='$row'>$row</option>\n";
    }
    echo "</select>\n";
	
	?>

Hi picopaco,

None at all.

Bob

PS There's a version here that does work as far as I know.

Thanks Bob,

Purchased it for a very reasonable price :-)


Markus

Hi Markus,

Thank you. Let me know if you have any problems.

Bob

Is this PDF the same in your new book 3.1 cookbook for chronoforms? I have been trying all day to get this to work for a country/state drop down using geoname.

thanks

Hi about 2flip,

There are two quite different approaches to double drop-downs. The recipe in the book uses Option Groups to hide some options and display others. It works well when there are a relatively small total number of options. Note: i updated this a few days ago in the forums to fix a problem with browser inconsistency - not all browsers accept display: none on options and option groups :-(

The second approach uses Ajax to get the options from a database query on the server - or an external resource like geocodes[?]. That's the approach described in the How-To document here. It's better suited to queries where there are very long options lists (like countries & states).

Bob

Hi Bob,

Are you able to provide the updated code for this? I had a look on the forums for the post you are mentioning but could not find it. I also own your book - is there an errata for it or somewhere you add bits of info like this?

Hi dtour,

The post is here.

There is an erratum list on the PacktPub site if you check your Orders I think (you can also download a set of code samples there); I haven't filed this erratum though - I'll go and do that now, thanks for the prompt.

Bob

Hi dtour,

I've posted the erratum. Packt will check and add it to the errata list in a few days.

I've also updated the version of that article on my website here

Bob

Thanks Bob.

Your code worked perfectly.