By akshaynhegde on

I have a form in which user needs to input his height. I have two radio buttons to select the format in which the user wishes to input his height. one is "feet-inch" and another is "centimeters". I want to show a dropdown if "feet-inch" is selected, or else a textfield if "centimeters"is selected using ajax.

Am being able to show the textfield and a single dropdown successfully with ajax call triggered from the selection of the radio buttons, But I need to have two dropdowns, one to select "feet" and another to select "inches" right..?

So my problem is that am not being able to show two dropdowns with one single ajax call. How can I achieve it...?? Or in other words, how can I replace two separate divs (both containing a dropdown select) with one single ajax call..?

Alseo do let me know, if there are any other better ways to achieve this kind of height selection form..?

Please provide, codes for both form elements and the ajax call if possible. (am not an expert, you see..:p)

Thanks in advance.

⋅ Categories: Drupal 7.x

Comments

keesje’s picture

keesje commented

I hope I understand you.
Wrappers is the key. You can wrap any number of form elements of even a whole form in a custom wrapper div.
The ID of this wrapper can be used for replacement in the form API. like:

 '#ajax' => array(
      'callback' => 'ajax_form_callback',
      'wrapper' => 'ajax-form-wrapper-id',
)

Thing you have to take care of is providing a callback function that returns only these fields.
This way you can replace multiple fields at once, or even a whole form.
If you cant wrap these fields in 1 div, EG if there are other htlm elements in between that must not be replaced, than the ajax forms api falls short AFAIK. Build your own js then, like you used to in D6.

Regards,

Kees

akshaynhegde’s picture

akshaynhegde commented

I understand that I have to wrap these two fields inside a single wrpper. But how can I return two form elements from a single callback function.....?

akshaynhegde’s picture

akshaynhegde commented

Hey.. Thank you so much...:) Thanks for the idea... But am still facing some problem, n I dont know what it is..!

I put both select fields inside a fieldset and wrapped that fieldset with the wrapper to be replaced. and put it inside the something_form() function with an if statement. It did worked for me once, but next, whne I refreshed it, its not working..! I tried a lot, I cant see any problem with the code but still no luck... Below is my code, please show me wats wrong....

<?php
function my_form($form,&form_state)
{
$form['health_set']['height_set'] = array(
	    '#title'=>t('Input your height'),
	    '#type'=>'fieldset',
            '#tree'=>TRUE,
            );

$form['health_set']['height_set']['height_radio'] = array(
    '#title' => t("Height input format"),
    '#type' => 'radios',
    '#options' => array(
      1 => t('feet'),
      2 => t('centimeters'),
      ),
 
    '#required'=>TRUE,
    '#ajax' => array(
       'callback' => 'health_height_callback',
       'wrapper' => 'health_height-wrapper',
      'effect'=>'slide',
     ),
    ); 

 if($form_state['values']['health_set']['height_set']['height_radio']==1)
{

$form['health_set']['height_set']['feet-inch'] = array(
   '#type'=>'fieldset',
   '#tree'=>TRUE,
    '#prefix'=>'<div id="health_height-wrapper">',
    '#suffix'=>'</div>',
  );
  
      $options1 = array(
	1=>t('1 ft'),
        2=>t('2 ft'),
        3=>t('3 ft'),
        4=>t('4 ft'),
        5=>t('5 ft'),
	6=>t('6 ft'),
	7=>t('7 ft'),
     );   



$form['health_my_bmi']['height_set']['feet-inch']['feet'] = array(
        '#type'=>'select',
        '#options'=>$options1,
        '#required'=>TRUE,
        '#description'=>t('Whats your height in feet?'),
      );

$options2 = array(
	1=>t('1 inch'),
        2=>t('2 inch'),
        3=>t('3 inch'),
        4=>t('4 inch'),
        5=>t('5 inch'),
	6=>t('6 inch'),
	7=>t('7 inch'),
        8=>t('8 inch'),
        9=>t('9 inch'),
        10=>t('10 inch'),
        11=>t('11 inch'),
     ); 

$form['health_set']['height_set']['feet-inch']['inch'] = array(
       '#type'=>'select',
        '#options'=>$options2,
        '#title'=>t('Inches'),
        '#description'=>t('how many inches ?'),
        '#required'=>TRUE,

      );

}

else if($form_state['values']['health_set']['height_set']['height_radio']==2)
{

   $form['health_set']['height_set']['centi'] = array(
        '#type'=>'textfield',
        '#title'=>'Height in centimeters',
        '#prefix'=>'<div id="health_height-wrapper">',
        '#suffix'=>'</div>',
         '#maxlength'=>3,
         '#size'=>6,
        '#required'=>TRUE,
      );

}
 
  return $form;

}
?>

below is the code of the callback function,

<?php
function health_height_callback($form, $form_state)
{
       if($form_state['values']['health_set']['height_set']['height_radio']==1)
           return $form['health_set']['height_set']['feet-inch'];
       
      else if($form_state['values']['health_set']['height_set']['height_radio']==2)
           return $form['health_set']['height_set']['centi'];
        
}
?>

?>