onchange dynamic selectbox value return

By Renze on 31 Oct 2006 at 15:55 UTC

i have 2 selectbox's in the first selectbox there is a list of country's from db.
When i select a country i want the second selectbox to fill with city's.

So i want a onchange action on the first selectbox. When a selection is made, i want function city() to be called to fill en visualize the second selectbox.

$form['drop'] = array(
	'#type' => 'select',
	'#title' => t('Country'),
	'#options' =>  $countryArray,
	'#attributes' => array('onChange' => 'dropdown_onclick_function()),
);

What do have i put in the attributes onchange, and how do i get the value from the first selectbox to return?

Comments

re: try this

dwees commented 31 October 2006 at 22:47

Try the solution here with an example here

That would work if i was

Renze commented 14 November 2006 at 11:49

That would work if i was running drupal 5.x, But i am currently running drupal 4.7 and than the Jquery code gives errors.

There must be a easy way to this.

something like this:

function dropdown_page(){

 if($dropdown_value == ""){

        $form['drop'] = array(
        '#type' => 'select',
        '#title' => t('Country'),
        '#options' => $countryArray,
        '#attributes' => array('onChange' => 'dropdown_page())',
        ); 

 }else{

        $form['drop2'] = array(
        '#type' => 'select',
        '#title' => t('City'),
        '#options' => $CityArray,
        '#attributes' => array('onChange' => 'result())',
        ); 
 }
}

My question:
- How do i Call a function with onchange?
- How do i give the value of my drop box with it?

jQuery Module

dwees commented 12 December 2006 at 03:55

There is a module for Drupal 4.7.x which is basically a copy of jQuery modified so that it doesn't produce any errors with Drupal's own JS. I think it's called the jQuery module.

Dave

Dynamic Select box in Drupal 5

sujith7c commented 3 August 2009 at 07:27

I have one working solution for this problem with JavaScript
Here is it

In my custom module , i have to load the Caste of corresponding Religion

my select box definition is

$form['_religion']=array(
'#type' => 'select', // religion select box
'#title' => t('Religion'),
'#default_value' => '',
'#attributes' => array('onclick'=>"htmlData('caste.php', 'ch='+_religion[selectedIndex].text)"),
'#options' => $religion,
);

$caste= array("Any" =>"Any");

$form['_caste']=array(
'#type' => 'select',
'#title' => t('Caste'),
#'#default_value' =>array("Any"),
'#options' =>$caste ,
'#prefix' => '

',
'#suffix' => '

And i have included the Java Script file for the function htmlData() directly into my page.tpl.php

here is the Java script

########################SUJITH S #############################

function GetXmlHttpObject(handler)
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("caste_choice").innerHTML= xmlHttp.responseText;
}
else {
//alert(xmlHttp.status);
}
}

// Will populate data based on input
function htmlData(url, qStr)
{
if (url.length==0)
{
document.getElementById("caste_choice").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}

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

#######################KERALA#########################

the URL call the caste.php file in Drupal directory

HERE IS the caste.php

################SUJITH#################################

#global $current_castelist;
#require_once './includes/bootstrap.inc';
ini_set('display_errors', 1);

error_reporting(E_ALL);

if ($_GET['ch'] == "Any") {
  $options = '<div  id="edit--caste-wrapper" class="form-item"><label for="edit--caste">Caste: </label>';
  $options .= '<select id="edit--caste" class="form-select" name="_caste">';
  $options .= '<option  value="Any">Any</option>';
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}





// HIndu caste
if ($_GET['ch'] == "Hindu") {

$current_castelist = array("Ambalavasi","Nair","Ezhava","Namboodiri","Chettiar","Dheevara","Ezhuthachan","Kshatriya",
"Kudumbi","Mudaliyar","Nadar","Panicker","Rajput","Saliya","SC","Thiyya","ST","Veera Saivam","Viswakarma","Yadav","Guptan","Nambiar","Variar");

$options = '<div  id="edit--caste-wrapper" class="form-item"><label for="edit--caste">Caste: </label>';
$options .= '<select id="edit--caste" class="form-select" name="_caste">';
$opCount=1;
$options .= '<option  value="Any">Any</option>';
$count=count($current_castelist);

for($i=1;$i<$count;$i++)
{
$options .= '<option value="'.$current_castelist[$i-1].'">'.$current_castelist[$i-1].'</option>';
}
  $options .= '</select>';
  $options .= '</div></div>';
echo $options;

}

// Muslim Caste
if ($_GET['ch'] == "Muslim") {

$current_castelist = array("Shiya","Sunni","Bohra","Hanafi","Lebbai","Maraicar","Pathan","Rowther","Siddiqui");

$options = '<div  id="edit--caste-wrapper" class="form-item"><label for="edit--caste">Caste: </label>';
$options .= '<select id="edit--caste" class="form-select" name="_caste">';
$opCount=1;
$options .= '<option value="Any">Any</option>';

$count=count($current_castelist);

for($i=1;$i<$count;$i++)
{
$options .= '<option value="'.$current_castelist[$i-1].'">'.$current_castelist[$i-1].'</option>';
}
  $options .= '</select>';
  $options .= '</div></div>';
echo $options;
}


//christian castes
if ($_GET['ch'] == "Christian") {

$current_castelist = array("Born Again","Jacobite","Knanaya","Catholic","Malankara","Marthoma","Pentacost","Roman Catholic","Syrian Catholic","Syrian");

$options = '<div class="form-item"><label for="edit--caste">Caste: </label>';
$options .= '<select id="edit--caste" class="form-select" name="_caste">';
$opCount=1;
$options .= '<option value="Any">Any</option>';
$count=count($current_castelist);
for($i=1;$i<$count;$i++)
{
$options .= '<option value="'.$current_castelist[$i-1].'">'.$current_castelist[$i-1].'</option>';
}
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}

if ($_GET['ch'] == "InterReligion")
{
  $options = '<div class="form-item"><label for="edit--caste">Caste: </label>';
  $options .= '<select id="edit--caste" class="form-select" name="_caste">';
  $options .= '<option value="Any">Any</option>';
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}

if ($_GET['ch'] == "NoReligion")
{
  $options = '<div class="form-item"><label for="edit--caste">Caste: </label>';
  $options .= '<select id="edit--caste" class="form-select" name="_caste">';
  $options .= '<option value="Any">Any</option>';
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}

if ($_GET['ch'] == "Jain")
{
  $options = '<div class="form-item"><label for="edit--caste">Caste: </label>';
  $options .= '<select id="edit--caste" class="form-select" name="_caste">';
  $options .= '<option value="Any">Any</option>';
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}

if ($_GET['ch'] == "Sikh")
{
  $options = '<div class="form-item"><label for="edit--caste">Caste: </label>';
  $options .= '<select id="edit--caste" class="form-select" name="_caste">';
  $options .= '<option value="Any">Any</option>';
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}

if ($_GET['ch'] == 8)
{
  $options = '<div class="form-item"><label for="edit--caste">Caste: </label>';
  $options .= '<select id="edit--caste" class="form-select" name="_caste">';
  $options .= '<option value="0">Any</option>';
  $options .= '</select>';
  $options .= '</div></div>';
  echo $options;
}

THIS worked for me , I think this will help you solve same or related problem (replacing Religion and caste with , Country and city ) for those who spending a lot of time to solve

Please Let me know if any body knows other good solution than this