Form input not cleared after ajax submission and scrolling is not going down in drupal 8 - ajax

Question

I have a form with one field and a submit button with ajax submission option like following -
public function buildForm(array $form, FormStateInterface $form_state, $id = 0)
{
$form['fieldset']['message'] = array(
'#type' => 'textfield',
'#default_value' => "",
'#required' => true,
'#attributes' => array(
'placeholder' => t('write here'),
),
);
$form['actions']['submit'] = array(
'#type' => 'submit',
'#value' => $this->t('Send'),
'#attributes' => array(
'class' => array(
),
),
'#ajax' => [
'callback' => [$this, 'Ajaxsubmit'],
'event' => 'click']
);
return $form;
}
The ajax function is following -
public function Ajaxsubmit(array $form, FormStateInterface $form_state)
{
$user = \Drupal\user\Entity\User::load(\Drupal::currentUser()->id());
$db_values = [
"message" => $form_state->getValue("message"),
"date_create" => date("Y-m-d H:i:s"),
];
$save = DbStorage::Insert($db_values);
//$form_state['rebuild'] = TRUE;
$response = new AjaxResponse();
$message = DbStorage::Get(["id" => $save]);
$send_id = $message->send_id;
$build = [
'#theme' => "chat_view",
'#message' => $message,
'#sender' => $send_id,
'#current_user' => true
];
$ans_text = render($build);
$response->addCommand(new AppendCommand('#mychat', $ans_text));
}
return $response;
}
Here form data submission is working fine. But input data is not cleared after submission. I tried to clear it from my javascript using -
$('#my_form input').val("");
But the problem is my javascript file is called every 3 seconds and the form input is also cleared in every 3 seconds. this is problematic for users. Is there any other way to clear the form input after the ajax submission ? Can i do anything inside Ajaxsubmit function ?
Moreover, after getting new data, the message box does not scroll down automatically. i need to use mouse to see new messages. I tried to solve it in my javascript file with the following -
$("#mychat").each( function()
{
var scrollHeight = Math.max(this.scrollHeight, this.clientHeight);
this.scrollTop = scrollHeight - this.clientHeight;
});
Again, the problem is it scrolls down to the message box every 3 seconds. if the user wants to scroll up to see previous messages, it scrolls down. so it is not user friendly. Is there any other way for scrolling down to message box for new messages and at the same time, it will not scroll down if user's mouse is scrolling up ?

Answer 1

Yes, there is another way to clear the form input. You can return the actual $form array from your Ajax function rather than creating an Ajax response.
A good example of how to leverage this can be found here:
https://drupal.stackexchange.com/a/211582/82623
As far as the enter key goes, you need to move 'event' => 'click' inside of your $form['actions']['submit']['#ajax'] array and uncomment it. That has worked well for me in the past. Found somebody else with a similar observation here: https://drupal.stackexchange.com/a/29784/82623