Skip to main content

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.
  */
}

Comments

Popular posts from this blog

How to configure Drupal7, varnish, authcache2 and ESI in Nginx server?

This is step by step procedure for, how to configure the authcache, varnih and ESI for the drupal7 project in NGINX erver. To configuring the Nginx Server use the procedure from document " http://www.geoffstratton.com/2014/03/nginx-php-fpm-apc-ssl-drupal/ " Well, make sure your nginx server is up and running. 1.Configuring the Authcache module.      Download the module from https://www.drupal.org/project/authcache    Enable only the authcache module    Go to admin/reports/status , then you can see the Authcache area is red and saying that there is no back end has been configured.   2.Configure Varnish on the back-end[nginx server].     Using the Following commands,       $ curl http://repo.varnish-cache.org/debian/GPG-key.txt | sudo apt-key add -     $ echo "deb http://repo.varnish-cache.org/ubuntu/ precise varnish-3.0" | sudo tee -a /etc/apt/sources.list     $ sudo apt-get update ...

How to create the Popup or modal in Drupal 8?

The following code will help you to create the popup in Drupal 8.  use \ Drupal \ Core \ Ajax ; function testingPopup () { $response = new AjaxResponse (); $title = $this -> t ( 'Title for the Popup.' ); $form [ '#attached' ][ 'library' ][] = 'core/drupal.dialog.ajax' ; $response -> setAttachments ( $form [ '#attached' ]); $content = '<div class="test-popup-content">' . 'Content in HTML format' . '</div>' ; $options = array ( 'dialogClass' => 'popup-dialog-class' , 'width' => '75%' , ); $modal = new OpenModalDialogCommand ( $title , $content , $options ); $response -> addCommand ( $modal ); return $response ; } You can call the function testingPopup() , you will get the popup.

Drupal Views exposed filter of Node title as drop down.

It can be done through using "Jump menu" settings in views. Download the Ctools module  http://drupal.org/project/ctools  Enable the Chaos Tools Module. This module provides a Views Style Plugin called "Jump Menu" Create a view of type node with two fields Content:nid and Cotent:title. And the path of the views page is like 'my_node_list'. For the Content:nid make sure you click on  Rewrite the output of the field . The rewritten output of the field should be  my_node_list/[nid]. Make sure you select the  exclude from display  checkbox. In the settings for  Style  in the view, select the  Jump Menu  style. Click on the settings for the style. Make sure the  Path  dropdown has 'Content:nid' choosen. Add a block display to the view. Name the block "Node details" and put the contextual filter to filter with nid. Save the view Go to block configuration under structure and configure the above block (Node details)....