Blog Archive

Sunday, 27 July 2014

Drupal7 add more AJAX Form example . [How to use Drupal AJAX form for multiple fields with add more concept?]

The following code you can use it in either your form alter (form_id alter) or your custom form functions......

function modulename_add_more_form()
{
    $form['description'] = array(
    '#markup' => '<div>This is an example of a AJAX Form, where we can use AJAX add more concept in drupal for a set of fields.</div>',
  );

  // Because we have many fields with the same values, we have to set

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

  // Build the fieldset with the proper number of names. We'll use

  // $form_state['num_names'] to determine the number of textfields to build.
  if (empty($form_state['num_names'])) {
    $form_state['num_names'] = 1;
  }
  
  for ($i = 0; $i < $form_state['num_names']; $i++) {
    
    //lets add all the fields we want in the set  
    /*
    We have the prefix and suffix added here, so that we can do some sort of styling with the form, like display the fields side by side. You may remove    it, but generally we need that when we have a set of fields, hence I thought to keep it here.
    */
    
    //Parent container
    $form['names_fieldset'][$i] = array(
    '#prefix' => '<div class="two-col">',
    '#suffix' => '</div>'
    );
    
    //other form elements
    $form['names_fieldset'][$i]['firstname'] = array(
      '#type' => 'textfield',
      '#title' => t('First Name'),
      '#prefix' => '<div class="col1">',
      '#suffix' => '</div>'
    );
    
    $form['names_fieldset'][$i]['lastname'] = array(
      '#type' => 'textfield',
      '#title' => t('Last Name'),
      '#prefix' => '<div class="col2">',
      '#suffix' => '</div>'   
    );  
    
    //-- Like wise we can add more
  }
  
  $form['names_fieldset']['add_name'] = array(
    '#type' => 'submit',
    '#value' => t('Add one more'),
    '#submit' => array('modulename_add_more_add_one'),
    // See the examples in ajax_example.module for more details on the
    // properties of #ajax.
    '#ajax' => array(
      'callback' => 'modulename_add_more_callback',
      'wrapper' => 'names-fieldset-wrapper',
    ),
  );
  
  if ($form_state['num_names'] > 1) {
    $form['names_fieldset']['remove_name'] = array(
      '#type' => 'submit',
      '#value' => t('Remove one'),
      '#submit' => array('modulename_add_more_remove_one'),
      '#ajax' => array(
        'callback' => 'modulename_add_more_callback',
        'wrapper' => 'names-fieldset-wrapper',
      ),
    );
  }
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );

  return $form;


}


/**

 * Callback for both ajax-enabled buttons.
 *
 * Selects and returns the fieldset with the names in it.
 */
function modulename_add_more_callback($form, $form_state) {
  return $form['names_fieldset'];
}

/**

 * Submit handler for the "add-one-more" button.
 *
 * Increments the max counter and causes a rebuild.
 */
function modulename_add_more_add_one($form, &$form_state) {
  $form_state['num_names']++;
  $form_state['rebuild'] = TRUE;
}

/**

 * Submit handler for the "remove one" button.
 *
 * Decrements the max counter and causes a form rebuild.
 */
function modulename_add_more_remove_one($form, &$form_state) {
  if ($form_state['num_names'] > 1) {
    $form_state['num_names']--;
  }
  $form_state['rebuild'] = TRUE;
}

/**

 * Final submit handler.
 *
 * Reports what values were finally set.
 */
function modulename_add_more_submit($form, &$form_state) {
  
  //Process the data of form here and use it
  
  /*
  #Example usage
  $form_state['input']['name_fieldset'][0,1,2... index number]['fieldname'];
  
  you can always use print_r($form_state); to explore the submited data.
  */
}

No comments:

Post a Comment