How do I create a dynamic form in Drupal 6 using jQuery?

Question

What I have is a Drupal form, written in PHP of course which has two selectors. The first one has a list of Drupal themes and the second is a list of available regions. In Drupal, certain themes have certain regions which are available to put blocks into so when a theme is chosen, I want the region selector to be populated by the available options associated to the selected theme.

I want my javascript file to use jQuery to listen to the theme selector so that on change, it will update the region selector.

I have the module PHP set up so that there is a 2D array of values such that array['theme'] = array() of possible region values. Like this:

Array
(
[garland] => Array
    (
        [left] => left
        [] => 
        [right] => right
    )

[zen] => Array
    (
        [] => 
        [sidebar_first] => sidebar_first
        [sidebar_second] => sidebar_second
    )
)

That is done by this code:

$themeQuery = db_query('SELECT DISTINCT theme from {blocks}');
    while($row = db_fetch_object($themeQuery)){ 
        $regionQuery = db_query('SELECT DISTINCT region from {blocks} WHERE theme="%s"',$row->theme);
     while($regions = db_fetch_object($regionQuery)){
        $regionOptions[$row->theme][$regions->region] = $regions->region;
     }
     $themeOptions[$row->theme] = $row->theme;
  }

And here is the form:

$form = array();
 $form['title'] = array(
     '#type'    => 'markup',
     '#value'   => '<br/><h4>Update block: <strong>'.$module.': '.$delta.'</strong></h4>'
  );
 $form['theme'] = array(
    '#title'            => 'Theme',
    '#type'             => 'select',
    '#options'          => drupal_map_assoc($themeOptions),
    '#default_value'            => $currentTheme,
  );
  $form['region'] = array(
    '#title'            => 'Region',
    '#type'             => 'select',
    '#options'          => array(''),
    '#default_value'    => $currentRegion,
  );

All I really need to do is to get the 2D array $regionOptions into the javascript! I tried drupal_to_js and drupal_add_js but it wouldn't work!

The javascript is this so far:

$(document).ready(function(){
    $('#edit-theme').change(function(){
        alert(Drupal.settings.regions[$(this).val()]);
    });
    });

Here is my attempt at drupal_add_js (in the PHP code):

drupal_add_js(array('regions' => $regionOptions),'setting');

This function works if I try to do:

drupal_add_js(array('regions' => 'test'),'setting');

And then call in the javascript:

alert(Drupal.settings.regions);

It does alert 'test'.

I hope I asked this right, thank you :)

Don't know if this will help but Drupal has some built-in ajax functionalities that you can leverage: drupal.org/node/752056 — nmc
Thanks! I did figure out how to do it using only PHP and jQuery and I explained my steps below — fishcx

fishcx fishcx · Accepted Answer · 2011-07-26T13:56:40

Well I figured it out! So I wanted to share my results here for anyone else who wants to know.

The function drupal_add_js adds javascript directly to the output of your page. You can use it to set up variables just like you would do directly if you were coding in javascript.

Here is my php code in my module that adds the javascript along with my JS file entitled 'simple_block_selector.js' which is in the same directory.

// creates outside array
   drupal_add_js("var regions = new Array();",'inline');  
   foreach($regionOptions as $t=>$theme){
        // creates new array for within regions array
        drupal_add_js("var ".$t."= new Array();",'inline');
        drupal_add_js("regions['".$t."']=".$t.";",'inline');
        $counter = 0;
        foreach($theme as $region){
            if($region != ''){
                drupal_add_js("regions['".$t."']['".$counter."'] = '".$region."';",'inline');
            }
            else{
                drupal_add_js("regions['".$t."']['".$counter."'] = 'none';",'inline');
            }
            $counter++;
        }
   }
  drupal_add_js(drupal_get_path('module','simple_block').'/simple_block_selector.js');

As you can see in the code, you just use 'drupal_add_js' and then type whatever you would normally in javascript using quotes (""). When you have to pass PHP variables into it, you use concatenation (using the '.' in between strings and variables) to attach it. If it was blank, I assigned it to show 'none' so the user can understand the choice better. The 'inline' states that the script should be placed inline.

And then in my javascript file, I have it first delete all options in the second selector. Then it selects the specific regions array based on the theme chosen. And then it parses through that array adding each value to the other selector like so:

$(document).ready(function(){
$('#edit-theme').change(function(){
    $('#edit-region').find('option').remove();
    for(var i=0; i<regions[$(this).val()].length;i++)
        {
            $('#edit-region').append($('<option>').text(regions[$(this).val()][i])); 
        }
});

});

If you do not know the id of your selectors, you can go to your page and right-click to do 'view source' to see what they are given as id's.

That's all there is to it! I do have the module also check to see what the current values of the form are based on the block's id and it sets those as defaults on the form. It also finds the regions associated to the default theme of the block and it displays them when the page is first shown. I'd paste the full code, but I felt it was not necessary since these sections explain how I answered my question.

How do I create a dynamic form in Drupal 6 using jQuery?

1 Answers