Multiple textfield values

Question

im using form api and im trying to get to make a group of fields under one type, like for example a phone number, you would have 3 fields 1 being the area code and the other 2 fields being the number

I would think it would be something like this..

$form['phone'] = array(

    '#title' => 'Phone Number',
    '#tree' => TRUE
);

$form['phone']['areacode'] = array(
    '#type' => 'textfield',
    '#maxlength' => 3,
    '#size' => 3,
);

$form['phone']['number1'] = array(
    '#type' => 'textfield',
    '#maxlength' => 3,
    '#size' => 3,
);

    $form['phone']['number2'] = array(
    '#type' => 'textfield',
    '#maxlength' => 4,
    '#size' => 4,
);

or even something with options like this for example

$form['phone'] = array(
    '#type' => 'textfield',
    '#title' => 'Phone Number',
    '#tree' => TRUE,
    '#options' => array(
        array(
        '#value' => t('areacode'),
        '#maxlength' => 3,
        'size' => 3,
        ),
        array(
        '#value' => t('number1'),
        '#maxlength' => 3,
        'size' => 3,
        ),
        array(
        '#value' => t('number2'),
        '#maxlength' => 4,
        'size' => 4,
        ),

    )
);

Either way I want to have multiple textfield values under one form type.

Thanks

Answer 1

I know there are some parent and tree properties in the form API, but to be honest I have never use it. In a case like your I will create 3 text fields with a limit number of characters depending on the part of the phone number I am collecting ( 3 (for area code) - 3 (for the exchange) - 4 (for the number) ) and then on the submit function of the form I will concatenated them together.

function my_module_example_form($form, &$form_state) {

// If you edit the data using the same form then 
// get the previously store phone number
$phone = $phone_from_db;

$form['area-code'] = array(
  '#type' => 'textfield', 
  '#title' => t('Area Code'), 
  '#default_value' => substr($phone, 0, 3), 
  '#size' => 3, 
  '#maxlength' => 3, 
  '#required' => TRUE,
);

$form['exchange'] = array(
  '#type' => 'textfield', 
  '#title' => t('Exchange'), 
  '#default_value' => substr($phone, 3, 3), 
  '#size' => 3, 
  '#maxlength' => 3, 
  '#required' => TRUE,
);

$form['number'] = array(
  '#type' => 'textfield', 
  '#title' => t('Number'), 
  '#default_value' => substr($phone, 6, 4), 
  '#size' => 4, 
  '#maxlength' => 4, 
  '#required' => TRUE,
);

  return $form;
}

function my_module_example_form_submit($form, &$form_state) {
  // Submission logic.
  $phone = $form_state['values']['area-code']+$form_state['values']['exchange']+$form_state['values']['number'];
  // Save the $phone variable 
}

There are also a couple of modules with the ability to add phone fields and they even offer validation of the phone number depending on the country.

1. http://drupal.org/project/phone
2. http://drupal.org/project/cck_phone
3. http://drupal.org/project/location

Answer 2

It is an ideal case to use #tree. #tree is used to force the $form_state['values'] values to be a multidimensional array of values. See the example below:

  $form['phone'] = array(
    '#type' => 'fieldset',
    '#title' => t('Phone numbers'), 
    '#tree' => TRUE, 
  );
  $form['phone'][1] => array(
    '#type' => 'fieldset',
    '#title' => t('Phone number - @index', array('@index' => 1)),
    '#tree' => TRUE, 
  );
  $form['phone'][1]['area'] => array(
    '#type' => 'textfield',
    '#title' => t('Area code'),
  );
  $form['phone'][1]['number'] => array(
    '#type' => 'textfield',
    '#title' => t('Phone number'),
  );
  // Start repeat. 
  $form['phone'][2] => array(
    '#type' => 'fieldset',
    '#title' => t('Phone number - @index', array('@index' => 3)),
    '#tree' => TRUE, 
  );
  $form['phone'][2]['area'] => array(
    '#type' => 'textfield',
    '#title' => t('Area code'),
  );
  $form['phone'][2]['number'] => array(
    '#type' => 'textfield',
    '#title' => t('Phone number'),
  );
  // End repeat. Ideally use a for loop here. Duplicated just to demonstrate it to you. 

  return $form;

Now, you will receive the values in a deeper structured array: $form_state['values']['phone'] would contain an array like this, as if it was created using array():

  array(
    1 => array(
      'area' => 123,
      'phone' => 456789,
    ),
    2 => array(
      'area' => 000,
      'phone' => 9876543,
    ),
  );

To style the form, just add some floating and a width to the form based on the maxlength. You will find a bunch of fieldset tags and wrapping divs to use an effective yet safe CSS selector. To attach CSS to the form, use $form['#attached'].

Answer 3

I think for this particular question there is good example in examples module which exactly explains the same areacode functionality with element features. You can take a look on this one by downloading and installing the https://drupal.org/project/examples. And enable the module form example. Go to this path- 'site-name'/examples/form_example/element_example. This might provide a good help to you.