Webform hook field text element

Question

I Use Drupal 8.8 with Webform 8.x, in a simple webform with a select list element and a text field element, I need to update a text field element with values resulting from database queries when the user chooses an option from the listbox.

I would like to accomplish this with a PHP code in a custom mymodule. How can I intercept the user's action when selecting a value from the select list?

Besides intercepting the event I also need to know the content of the choice that the user has made on the select list.

How can it be done? Can anyone give me an example?

Answer 1

There are more than one way to do what you are asking note both these will require you to create a custom module. (I assume you know how to do this or can google it)

here need to change to your form id, and your field names..

function MYMODULE_form_alter(&$form, FormStateInterface $form_state, $form_id) {
    // change to your form id
  if ($form_id == 'webform_submission_contact_add_form') {
    //dump($form['elements']);
    $form['elements']['select_me']['#ajax'] = [
      'callback' => 'MYMODULE_callback_ajax',
      'event' => 'change',
      'wrapper' => 'changethis',
      'method' => 'replace',
    ];


   $form['elements']['TEXTFIELDNAME']['#prefix'] = '<div id="changethis">';
   $form['elements']['TEXTFIELDNAME']['#suffix'] = '</div>';  
 }
}
// ajax call back 
function MYMODULE_callback_ajax(&$form, FormStateInterface $form_state) {
  $value_selected = $form_state->getValue('select_me');
  if (!empty($value_selected)) {
    // Here do queries then set the value of your text field.

    $form['elements']'TEXTFIELDNAME']['#value'] = $value_selected;
    return $form['elements']'subject'];
  }
}

Answer 2

I tried to implement the function but I didn't have much luck. Ok something works, when I go to select the select list and change an option we see that ajax updates but the text field does not change, I get an HTTP 200 error in the browser console.

Initially nothing worked because having the webform a series of multi-step-wizards. Then I realized that I had to modify the access to the array in the hook_form_alter, in practice like this:

$form['elements']['PAGE_STEP_NAME']['select_list_name']['#ajax'] = [
  'callback' => 'mymodule_callback_ajax',
  'event' => 'change',
  'wrapper' => 'edit-microchip',
  'method' => 'replace',
];
$form['elements']['PAGE_STEP_NAME']['microchip']['#prefix'] = '<div id="edit-microchip">';
$form['elements']['PAGE_STEP_NAME']['microchip']['#suffix'] = '</div>';

And the same in the callback function:

$form['elements']['PAGE_STEP_NAME']['microchip']['#value'] = $value_selected;
return $form['elements']['PAGE_STEP_NAME']['subject'];

link

in this link from the official website of drupal, it is very well explained how to exploit this technology. In particular, it is written that the WRAPPER must be equal to the ID of the object to be modified with the callback. I noticed that the WRAPPER ID in the HTML code is not the same as the one I set in the hook_form_alter edit-microchipbut this id is the same in the first part then there is a random code, maybe it doesn't work for this?

Answer 3

BINGO SUCCESSFUL :-)

First thing I found this post LINK where thanks to this user I copied this concept:

Drupal changes DOM IDs on every submit. You can, however, fix them by adding an attribute specification to your element:

I modified the hook_alter_form function code in the following way inserting this line before the last two

$form['elements']['PAGE_STEP_NAME']['microchip']['#attributes']['id'] = 'edit-microchip';

After this I was surprised to see that the ID in HTML view was no longer the same as before with the name and random number, but exactly as I wanted!

Then I modified the last line of the callback function with this line:

return $form['elements']['PAGE_STEP_NAME']['microchip'];

Now it works great. I am very satisfied and I thank you @TaggartJensen for showing me the way.