How to Change a form using ajax ?
Exemple : Field 'username'
//Form $form['username'] = array(
'#type' => 'textfield',
'#title' => 'Your user name',
'#description' => 'User name',
'#ajax' => array(
'callback' => '::checkUserNameAjax',
'wrapper' => 'edit-username',
'method' => 'replace',
'effect' => 'fade',
'event' => 'change',
),
//If you want to change the ID
'#prefix' => '<div id="edit-username">',
'#suffix' => '</div>',
);
1. Ajax Methode to Edit Form function checkUserNameAjax($form, FormStateInterface $form_state) {
$form['username']['#description'] = "YES";
return $form['username'];
}
2. Or using AjaxResponse to change HTML/CSS
function checkUserNameAjax(array &$form, FormStateInterface &$form_state) {
$valid = rand(0,1);
if ($valid) {
$css = ['border' => '1px solid green'];
$message = ('User name ok.');
}else {
$css = ['border' => '1px solid red'];
$message = ('User name not valid.');
}
$response = new \Drupal\Core\Ajax\AjaxResponse();
$response->addCommand(new \Drupal\Core\Ajax\CssCommand('#edit-username', $css));
$response->addCommand(new \Drupal\Core\Ajax\HtmlCommand('#edit-username--description', $message));
return $response;
}
Example 2 : Change a title using selected value
public function buildForm(array $form, FormStateInterface $form_state) {
$form['methods'] = array(
'#type' => 'select',
'#title' => $this->t('Method'),
'#default_value' => "",
'#options' => ["a"=>"A Value","b"=>"B Value",],
'#ajax' => array(
'callback' => '::methodChangeAjax',
'wrapper' => 'edit-fieldsset',
'method' => 'replace',
'effect' => 'fade',
'event' => 'change',
),
);
//Ajax changable fields container
$form['fieldsset'] = array(
'#type' => 'fieldset',
'#title' => $this->t('Fields'),
'#default_value' => "",
'#prefix' => '<div id="edit-fieldsset">',
'#suffix' => '</div>',
);
return $form;
}
function methodChangeAjax($form, FormStateInterface $form_state) {
$method = $form_state->getValue('methods');
$form['fieldsset']['#title'] = $method;
return $form['fieldsset'];
}
Comments
I am not able to to get the field values in form submit
Drupal 8 , I have added new text field through ajax, When the form submit in the $form_state not having respective field value
Just for the sake of helping whoever gets here
This happens if you add the fields on the callback function. The form doesn't get rebuilt at this point, so the values on the new fields are discarded. You need to add the fields on buildForm function by checking on the $form_state values.
On the simplest case, you can check that the triggering field has a value set and then conditionally build the new field as per defined functionality. Then on the callback you just need to call:
$form_state->setRebuild(true);
return $form['wrapper_of_the_element_to_change'];
Drupal 8.4
That's not working with Drupal 8.4
RE:Ajax Form
As a rule, there are two different ways to AJAX this form submit! That is, we present the form via AJAX and the server returns HTML. The AJAX would restore the form HTML with the blunder in it so we can render it on the page assignment help service. This is less demanding... since you don't have to do all that much in JavaScript. Be that as it may, this approach is also a bit outdated.
Getting Error: An illegal choice has been detected.
Dear Drupaler,
I have a scenario where I alter options of a form fields with ajax callbacks.
Like I have A, B, C, D fields (all dropdowns)
Selecting any option in field A filters down option for field B, which further filters options to a limited number on C and so on.
I have altered these options based on selections, using Ajax callbacks in Drupal8 and handled current value through $form_state and returning updated select lists with updated and filtered options through use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ReplaceCommand;
Success: The form works great, screenshot: http://prntscr.com/ni5h0k
But the problem is when I submit the form, I get this error "An illegal choice has been detected. Please contact the site administrator."
Screenshot: http://prntscr.com/ni5he5
How do I get it to resolve and get this done?
Anyone who could help?
development
hey there if you are interested in web or app development, visit us at https://wearehivemind.com/
Add new comment