How to reset form values when Ajax submits?

Question

I develop a module which converts submit in the form to Ajax submit (e.g. node/add/article). After every submit, the node is successfully created, but all the values remain saved.

In the Ajax callback, I added a return $form to reload the form after submission, but all fields are empty, not filled with old values.

What shall I do?

Answer 1

You can try the code below

$response->addCommand(new InvokeCommand('#form-id','trigger',['reset']));

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

Answer 2

Using ajax submit option at form submit will stop reloading the page at the time of submission. Thus, to reload the values of field at submit will require

$ajax_response->addCommand(new HtmlCommand('#edit-field-name--description','your value'));

Sample code for this is -

    $form['custom_num'] = array(
'#type' => 'textfield',
'#description' => 'Enter a number',
'#size' => 80,
'#maxlength' => 250,
);
$form['calculate'] = array(
  '#type' => 'submit',
  '#value' => 'Check',
  '#ajax' => array(
    'callback' => '::submitForm',
    'event' => 'click',
    'effect' => 'fade',)
    );
public function submitForm(array &$form, FormStateInterface $form_state) {
  $ajax_response = new AjaxResponse();
  if ($form_state->getValue('custom_num') < 0) {
  $text = 'Negative Number';
  } else {
  $text = 'Positive Number';
  }
  $ajax_response->addCommand(new HtmlCommand('#edit-custom-num--description', $text));
  return $ajax_response;

}