How can I submit form using javascript dom manipulation with input value

Question

I want to click the submit form button using javascript DOM manipulation with the textarea value. I have another button if I click on the button the form will be submitted.

<form class="sendXMPPMessage">
            <button type="submit" class="btn send-button fa fa-paper-plane" title="Send the message"></button>

            <textarea type="text" class="chat-textarea suggestion-box__input
                    chat-textarea-send-button
                    " placeholder="Message" aria-autocomplete="list" spellcheck="false"><!----><!----></textarea>
            <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
     
</form>

<button class="submit-message">Submit</button>

Answer 1

You could do this. You can listen to click event on .submit-message button and then once that is clicked call click method on .send-button

document.querySelector('.submit-message').addEventListener('click', () => {
  document.querySelector('.send-button').click()
})

<form class="sendXMPPMessage">
  <button type="submit" class="btn send-button fa fa-paper-plane" title="Send the message"></button>

  <textarea type="text" class="chat-textarea suggestion-box__input
                    chat-textarea-send-button
                    " placeholder="Message" aria-autocomplete="list" spellcheck="false"><!----><!----></textarea>
  <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>

</form>

<button class="submit-message">Submit</button>