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.

2 comments:

  1. Drupal is a popular open-source content management system used by many businesses and organizations worldwide. Drupal web services offer a range of solutions to help build, manage, and maintain websites, including website design and development, custom module development, theme customization, and website optimization. With Drupal web services, businesses can enhance their online presence, streamline workflows, and improve customer engagement.

    ReplyDelete