PHP, MySQL, Drupal, .htaccess, Robots.txt, Phponwebsites: Update multiple fields using #ajax in Drupal 7 form

1 Mar 2017

Update multiple fields using #ajax in Drupal 7 form

     We know how to replace a field using #ajax in a form. Can we update multiple fields using #ajax in a form? Yes, we can update multiple fields using #ajax in the Drupal 7. We can achieve it using ajax_command_replace() in Drupal 7. For more details about ajax commands on Drupal 7, please visit https://api.drupal.org/api/drupal/7.x/search/ajax_command.

Update fields using #ajax in a Drupal form:


    Consider the following example. In this example, I've created a form with fields First, Second & Third name. I tried to update the Second & Third name fields when focus out on the First name field.

/**
 * Implments hook_form()
 */
function phponwebsites_ajax_form($form, &$form_state) {
  $form['firstname'] = array(
    '#title' => t('First name'),
    '#type' => 'textfield',
    '#ajax' => array(
      'callback' => '_generate_textfield',
      'wrapper' => 'copied-text-field',
    )
  );

  $form['secondname'] = array(
    '#title' => t('Second name'),
    '#type' => 'textfield',
    '#prefix' => '<div id="copied-secondname">',
    '#suffix' => '</div>',
  );

  $form['thirdname'] = array(
    '#title' => t('Third name'),
    '#type' => 'textfield',
    '#prefix' => '<div id="copied-thirdname">',
    '#suffix' => '</div>',
  );

  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => 'Submit'
  );

  return $form;
}

function _generate_textfield($form, &$form_state) {
  if (!empty($form_state['values']['firstname'])) {
    $form['secondname']['#value'] =  $form_state['values']['firstname'];
    $form['thirdname']['#value'] =  $form_state['values']['firstname'];
  }
  $commands = array();
  $commands[] = ajax_command_replace('#copied-secondname', drupal_render($form['secondname']));
  $commands[] = ajax_command_replace('#copied-thirdname', drupal_render($form['thirdname']));
  return array('#type' => 'ajax', '#commands' => $commands);
}

When you tried to execute the above codes, it'll populate the same name on the other 2 fields. It looks likes the below image:

Update multiple form fields using #ajax in Drupal 7


Now I hope you know how to populate multiple fields using #ajax in Drupal 7 forms.

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Thanks for the information you brought to us. They are very interesting and new. Look forward to reading more useful and new articles from you!

    ReplyDelete
  3. This is exactly what Ive been searching for! Thanks for sharing!

    ReplyDelete