"Add another item" using #ajax in hook_field_widget_form

Question

I'm trying to create a custom widget for my module which will contain a textfield to hold a question(textfield), Question style (select box), potential answers (typed into textarea).

I'd then like an "add another item" button so the client can add as many questions as they like.

I've got a basic ajax widget working but i'm not sure if I've constructed it correctly because when I want to validate the data in hook_field_validate I don't seem to be able to access each question seperately.

I thought i'd be able to validate each question before the next is added by ajax but this doesn't seem to be working.

Asssuming this code (below) is correct, can you please advise how I can validate each time the "add another item" is clicked.

My hook_field_widget_form looks like this:

    function keep_warm_field_widget_form(&$form, &$form_state, $field, $instance, $langcode, $items, $delta, $element) {

  $element['question_wrapper'] = array(
    '#type' => 'fieldset',
    '#title' => t('Questions'),
    // Set up the wrapper so that AJAX will be able to replace the fieldset.
    '#prefix' => '<div id="names-fieldset-wrapper">',
    '#suffix' => '</div>',
  );

  if (empty($form_state['num_names'])) {
    $form_state['num_names'] = 1;
  }
  for ($i = 0; $i < $form_state['num_names']; $i++) {


    //other form elements
    $element['question_wrapper'][$i]['question'] = array(
      '#type' => 'textfield',
      '#title' => t('Question number '. $form_state['num_names']),

    );

  }

  $element['question_wrapper']['add_question'] = array(
    '#type' => 'submit',
    '#value' => t('Add another question'),
    '#submit' => array('ajax_example_add_more_add_one'),
    // See the examples in ajax_example.module for more details on the
    // properties of #ajax.
    '#ajax' => array(
      'callback' => 'ajax_example_add_more_callback',
      'wrapper' => 'names-fieldset-wrapper',
    ),
  );
  if ($form_state['num_names'] > 1) {
    $element['question_wrapper']['remove_name'] = array(
      '#type' => 'submit',
      '#value' => t('Remove one'),
      '#submit' => array('ajax_example_add_more_remove_one'),
      '#ajax' => array(
        'callback' => 'ajax_example_add_more_callback',
        'wrapper' => 'names-fieldset-wrapper',
      ),
    );
  }

return $element;
}

And my ajax callback

function ajax_example_add_more_callback($form, $form_state) {
  $form_state['num_names']++;
  return $form['field_question'];
}

Answer 1

Looks like you're just missing a #tree property:

Used to allow collections of form elements. Normally applied to the "parent" element, as the #tree property cascades to sub-elements. Use where you previously used ][ in form_ calls. For more information, see #tree and #parents in the handbook.

e.g.

$element['question_wrapper'] = array(
  '#type' => 'fieldset',
  '#title' => t('Questions'),
  // Set up the wrapper so that AJAX will be able to replace the fieldset.
  '#prefix' => '<div id="names-fieldset-wrapper">',
  '#suffix' => '</div>',
  '#tree' => TRUE,
);

And then in the validate handler:

foreach ($form_state['values']['question_wrapper'] as $key => $value) {
  if (is_numeric($key) && something_is_wrong_with($value['question'])) {
    form_set_error("question_wrapper][$key][question", 'Error');
  }
}

Answer 2

If you want multiple questions , then you can use UI and define your field as multiple value field when creating an instance of it. This way is easy and drupal will handle the rest. just because I think you have misunderstood I tell you that using field API we use to define a Field type not an Instance , I don't say you are completely wrong but what if your field type wants to be used in a situation that it always used single value?

but if you still persist you can write a validation function and call it in "ajax_example_add_more_callback" function.

to access your fields data you can use this code :

foreach($form_state['values']['question_wrapper'] as $key => $value) {
  //do something with $item
  //Code was stolen from @Clive . just for not representing a false answer
}