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 set the page title in Drupal 8? drupal_set_title() in Drupal 8 ? drupal_get_title() in Drupal8?

Using the following lines of code in hook_form_alter()  , able to set the title and get the title after saving the code do CLEAR CACHE drupal_set_title() in  Drupal8 $request = \ Drupal :: request (); if ( $route = $request -> attributes -> get (\ Symfony \ Cmf \ Component \ Routing \ RouteObjectInterface :: ROUTE_OBJECT )) { $route -> setDefault ( '_title' , 'New Title' ); } drupal_get_title() in Drupal8 $request = \ Drupal :: request (); if ( $route = $request -> attributes -> get (\ Symfony \ Cmf \ Component \ Routing \ RouteObjectInterface :: ROUTE_OBJECT )) { $title = \ Drupal :: service ( 'title_resolver' ) -> getTitle ( $request , $route ); }

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.

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     $ sudo apt-get install varnish       Configure Varnish: