Reset a form element value through AjaxResponse

Question

I have an AjaxCallback which returns AjaxResponse(). I need to change some form element properties like (disabled to true, remove some css class etc which works). But I'm unable to reset the particular form input element value to null.

Something like this -

public function calbackfunc(array &$form, FormStateInterface $form_state) : AjaxResponse {

  $response = new AjaxResponse();

  $element = $form_state->getTriggeringElement();

  $element_value = $element['#value'];

  if ($element_value === 'hit') {
    $response->addCommand(new InvokeCommand('.hit-container input', 'attr', ['disabled', FALSE]));
    $response->addCommand(new InvokeCommand('.hit-container div', 'removeClass', ['form-disabled']));
    $response->addCommand(new InvokeCommand('.hit-container input', 'removeClass', ['error']));
    //apart from these steps I also want to set the input value to null.
   }

   return $response;
 }
}

This question is a follow up to the earlier question I've posted Form element replaced via Ajax callback doesn't seem to be submitting or the values are not appearing in buildForm .

I tried like this -

$response->addCommand(new InvokeCommand('.hit-container input', 'setValue', ['myfield', '']));

But no luck. Any help would be great. Thanks.

Answer 1

You can try the code below

$response->addCommand(new InvokeCommand('#field_id','val',['']));

The 'invoke' command will instruct the client to invoke the given jQuery method with the supplied arguments on the elements matched by the given selector. Intended for simple jQuery commands, such as attr(), addClass(), removeClass(), toggleClass(), etc.

This command is implemented by Drupal.AjaxCommands.prototype.invoke() defined in misc/ajax.js.

Please see InvokeCommand