Can I use ajax to target multiple form elements from one input?

I'm trying to use ajax to update two different parts of a drupal form from just one form input blur.

I have the standard ajax stuff on my input:

$my_form['my_input']['#ajax'] = array(
  'callback' => 'my_callback',
  'wrapper' => 'my_target_div',
  'event' => 'blur',
);

This is working well, swapping out my div when the input is updated ... however I also want to update another form input elsewhere in the form with different code as a result of the blur on my original input.

Is this possible, any ideas?

Edit: For clarity, here's my real world example:

  • Content type 'movie'
  • Added field 'primary_title'
  • When 'primary_title' is updated my ajax callback checks for similar strings and returns html.

  • The html from the callback is inserted into an empty div.

    That part is working great!

I'm trying to also modify the standard node 'title' input, giving it the value of 'primary_title' after I have done some regex to tidy up the string (removing "The" or "A" from the start etc) The result will be two title fields, one with the complete title 'primary_title' and one trimmed 'title' that will be useful for sorting and displaying records.

7 forms ajax
Paige Abshire

Answers 3

Submit Answer
  • Deontae Keebler

    It appears that you can target different parts of a form using ajax commands, however you must choose to return only one of either:

    • HTML or

    • A renderable array or

    • An array of AJAX commands

    In the situation I originally wrote about, I was trying to return both an array of AJAX commands and a renderable array, which doesn't seem possible.

    Code in the examples module demonstrates targeting different parts of a form using an array of AJAX commands:

    function ajax_example_advanced_commands_html_callback($form, $form_state) {
  $text = $form_state['values']['html_command_example'];

  $commands = array();
  $commands[] = ajax_command_html('#html_div', $text);
  $commands[] = ajax_command_replace("#html_status", "<div id='html_status'>Updated html_command_example with text=$text;  " . date('r') . "</div>");
  return array('#type' => 'ajax', '#commands' => $commands);
}

    In this code sample, #html_div is getting $text, and separately #html_status is getting "Updated html_command_example with text=$text; " . date('r') . ""

    Two different locations on a form with two different pieces of information from the one ajax callback!

    Looking again at what I was working on, I realized that I didn't need to return the node title field at all. It will only be a utility field, used for sorting data in lists.

    I have hidden the field on the node form and it is populated the second time my form is built when my original ajax callback is triggered.

  •
    Alexane Kessler

    I am quite new to Drupal but so far i found the Ajax framework rather unflexible. It works great as long as you use it as it was intended to. So in your instance if you know some JS the best would definilty be to make that script your self it should be very light.

    Good luck!

  •
    Libby O'Conner II

    Another option, from drupal.org:

    You can easily replace the entire form if that is easiest. Just add a #prefix and #suffix to the entire form array, then set that as the #ajax['wrapper']. (This will allow you to change multiple form elements via a single ajax call.) The only reason not to do this is that the process is faster if less information is transferred.

    Your callback funciton could be as simple as:

    function _callback($form, $form_state) {
  return $form;
}

    That should be called from an #ajax array on a form element (field_whatever for the example below) defined in a hook_form_FORM_ID_alter() (or some kind of form alter hook) where you also test for $form_state and make alterations to the $form array, like:

     if (isset($form_state['values']['field_whatever'])){
     $form['field_something']['#disabled'] = TRUE;
     $form['field_something_else']['#disabled'] = FALSE;
 } else {
     $form['field_something']['#disabled'] = FALSE;
     $form['field_something_else']['#disabled'] = TRUE;
 }

Related Questions