AJAX Select box in CakePHP

In this example, I have a country select list.  After you choose a country, my second select box will be populated with cell phone carriers based on the country selected.

echo $form->input('country_id', array('options' => $countries, 'empty' => '-- Select --'), null, array('id' => 'country_id', 'label' => 'Country'));
$options = array('url' => 'update_select','update' => 'UserCarrierId');
echo $ajax->observeField('UserCountryId', $options);
echo $form->input('carrier_id', array('options' => $carriers, 'empty' => '-- Select --'), null, array('id' => 'carriers', 'label' => 'Carrier'));

Let's break down what is happening here.  The first thing we do is create a country select box.  The $countries variable is passed in to our view from our controller.  We simple did a $this->Country->find('list') to populate it.

Next up, we create an empty select item with "-- Select --" in it.  Because we need to reference this field later, we also give it an id of "country_id".  It's important to note that CakePHP automatically converts this to UserCountryId.  User comes from our form name that is specified during our form create.  And finally, we assign it a label of "Country".

Now let's discuss the "meat and potatoes" of this example.  We start by creating an options JavaScript array, in this array we provide a URL of "update_select" and a field to update, "UserCarrierId".  We then echo out a function from our AJAX helper.  We are telling it to observe our country_id field and passing in the options above.  What this does is create Javascript code that says "when country_id changes call our update_select function in our users_controller and when it's done, update our carrier_id field".

The last thing we do in this example is create our carrier_id field.  By default $carriers is empty, however, we use a variable here because if our validation fails during submit, we can populate the $carriers variable in our controller and not force the user to re-select a country to populate it.

Below is the contents of "update_select.ctp":

echo "<option value=\"\">-- Select --</option>\n";
foreach($carriers as $k => $v) {
 echo "<option value=\"$k\">$v</option>\n";
}

This code receives the same $carriers variable, but this time it is populated with the carriers only for our country that we previously selected.

That's it for today's article and hopefully you can avoid the headaches I had to go through to create this for the first time. If you're looking to explore how to do this with another server-side language be sure to checkout my Node.js tutorial as I've compiled a list of examples that perform this very similar functionality.

Published on Mar 6, 2009

Tags: AJAX | CakePHP Tutorial