Getting data from a form field using JavaScript in Drupal6

Question

I have a form with two autocomplete fields: 'province' and 'city'.

When a province it's written I would like to get the input from that field in order to use it in a query for only showing cities relative to that province in the 'city' field.

Here is the code so far.

Hook form:

function location_form(&$form_state, $unused, $form_values) {               
  $form = array();                                                              

  $form['state'] = array(                                                       
    '#type' => 'textfield',                                                     
    '#title' => 'Province',                                                       
    '#description' => 'Province',                                                 
    '#autocomplete_path' => 'admin/autocomplete/provinces',             
  );                                                                            

  $form['city'] = array (                                                       
    '#type' => 'textfield',                                                     
    '#title' => 'Cidade',                                                       
    '#description' => 'Cidade',                                                 
    '#autocomplete_path' => 'admin/autocomplete/cities'                 
  );                                                                            

  $form['submit'] = array(                                                      
    '#type' => 'submit',                                                        
    '#value' => 'Submit',                                                       
  );                                                                            

  return $form;                                                                 
}

Hook menu:

function location_menu() {
 $items['admin/autocomplete/provinces'] = array (                         
    'title' => 'Provinces autocomplete',                                                  
    'description' => 'Provinces autocomplete',                                            
    'page callback' => 'location_provinces_autocomplete',                           
    'access arguments' => array('access administration pages'),                 
    'type' => MENU_CALLBACK,                                                    
  );                                                                            

  $items['admin/autocomplete/cities'] = array(                          
    'title' => 'Cities autocomplete',                                           
    'description' => 'Cities autocomplete',                                     
    'page callback' => 'location_cities_autocomplete',                           
    'access arguments' => array('access administration pages'),                 
    'type' => MENU_CALLBACK,                                                    
  );        

  return $items;
}

Autocomplete functions:

function location_provinces_autocomplete($input) {                                  
  $items = array();                                                             

  $query = "SELECT name FROM location WHERE name LIKE '%s%%' AND level = 1";     

  $result = db_query($query, $input);                                           

  while ($row = db_fetch_object($result)) {                                     
    $items[$row->name] = $row->name;                                            
  }                                                                             

  print drupal_to_js($items);                                                   

  exit;                                                                         
}                                                                               

function location_cities_autocomplete($input) {                                  
  $items = array();                                                             

  $query = "SELECT name FROM location WHERE name LIKE '%s%%' AND level = 2";     

  $result = db_query($query, $input);                                           


  while ($row = db_fetch_object($result)) {                                     
    $items[$row->name] = $row->name;                                            
  }                                                                             

  print drupal_to_js($items);                                                   

  exit;                                                                         
} 

Hopefully someone can point me out to an example on how to do this or something similar.

Answer 1

My answer is to override the Drupal Autocomplete's populatePopup method to pass in both the state input and the city input, and then account for it in your autocomplete function.

You can override the Drupal AC functions by simply adding the same function to your script.js

Place this at the bottom of your script.js file in your theme directory

Drupal.jsAC.prototype.populatePopup = function () {
  // Show popup
  if (this.popup) {
    $(this.popup).remove();
  }
  this.selected = false;
  this.popup = document.createElement('div');
  this.popup.id = 'autocomplete';
  this.popup.owner = this;
  $(this.popup).css({
    marginTop: this.input.offsetHeight +'px',
    width: (this.input.offsetWidth - 4) +'px',
    display: 'none'
  });
  $(this.input).before(this.popup);

  // Do search
  this.db.owner = this;
  if ($(this).parents("form").attr('id') == 'location-form' && this.input.id == 'city') {
    this.db.search($("#location-form input[name='state']").val() + "|" + this.input.value);
  } else {
    this.db.search(this.input.value);
  }
};

And change your city autocomplete function to this (and replace "AND state LIKE" with whatever relation your city has to your state):

<?php
function location_cities_autocomplete($input) {                                  
  $items = array();                                                             

  $pieces = explode("|",$input);
  $province = $pieces[0];
  $city = $pieces[0];

  $query = "SELECT name FROM location WHERE name LIKE '%s%%' AND level = 2 AND state LIKE '%s%%'";

  $result = db_query($query, $city, $province);


  while ($row = db_fetch_object($result)) {                                     
    $items[$row->name] = $row->name;                                            
  }                                                                             

  print drupal_to_js($items);                                                   

  exit;                                                                         
}
?>

Make sure your clear your cache, and this seems like it would work with the code you provided.