CODEWITHSUNDEEP
javascriptformsreactjs
Dheerendra
Dheerendra

Reputation: 1568

ReactJS: how to trigger form submit event from another event

I've two react events:

  1. Form submit event

    sendMessage: function(event){
    console.log(event);
    event.preventDefault();
},

  2. keyPress Event

    textareaKeypress: function(event){
    if (event.which == 13 && !event.shiftKey){
        document.getElementById('messagebox').submit();
    }
},

but the reactJS is not capturing the form submit triggered by textareaKeypress. How can I call the sendMessage from textareaKeypress with proper event?

Upvotes: 24

Views: 50561

Answers (4)

fredrivett
fredrivett

Reputation: 6576

Expanding on @VasiliyArtamonov's answer, here's how I got it working with Typescript:

const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
  const commandKeyPressed = e.metaKey;
  const enterKeyPressed = e.key === "Enter";
  if (commandKeyPressed && enterKeyPressed) e.currentTarget.form?.requestSubmit();
};

Updated to include the tweak in @VasiliyArtamonov's comment below.

Upvotes: 7

Vasiliy Artamonov
Vasiliy Artamonov

Reputation: 1057

New method (24.08.2022)

Form element now has a requestSubmit() method, which would trigger submit event by itself without workarounds, as stated in submit() MDN docs:

The HTMLFormElement.submit() method submits a given <form>.

This method is similar, but not identical to, activating a form's submit <button>. When invoking this method directly, however:

The HTMLFormElement.requestSubmit() method is identical to activating a form's submit <button> and does not have these differences.

However, this method is not supported well enough on IE and Safari 15.6. As of 02.09.2022, this is about 76.49% global usage. If you need a more browser-compatible solution, keep reading until the end.

No need to use refs

Every answer I've yet seen uses refs when you actually don't need them. Most (if not all) of the form controls have a reference to a parent form in their form property:

textarea.form.requestSubmit();

Just make sure to attach a handler on one of the form controls, for example: <button>, <input>, <textarea>, <select>, <option>.

With all that said, you can write your handlers like that:

<form onSubmit={this.sendMessage}>
    <textarea onKeyPress={this.textareaKeypress}/>
</form>

sendMessage: function(event) {
    console.log(event);
    event.preventDefault();
},

textareaKeypress: function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.target.form.requestSubmit();
    }
},

Or if you care about browser compatibility, dispatch an event manually (thanks to Karol Dabrowski answer):

textareaKeypress: function(event) {
    if (event.which == 13 && !event.shiftKey) {
        event.target.form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
    }
},

Upvotes: 15

Brigand
Brigand

Reputation: 86220

It's your component, so you don't need to worry about passing actual events around. You have some event handlers, and then you have the actual action.

sendMessage: function(){
    console.log('message:', this.state.message);
},
handleFormSubmit: function(event){
    event.preventDefault();
    this.sendMessage();
},
handleTextareaKeypress: function(event){
    if (event.which == 13 && !event.shiftKey){
        this.sendMessage();
    }
}

Upvotes: 3

Michelle Tilley
Michelle Tilley

Reputation: 159095

I learned something new today: this is just how the DOM works.

From the MDN site:

The form's onsubmit event handler (for example, onsubmit="return false;") will not be triggered when invoking this method from Gecko-based applications. In general, it is not guaranteed to be invoked by HTML user agents.

According to the HTML spec:

The submit() method, when invoked, must submit the form element from the form element itself, with the submitted from submit() method flag set.

followed by (section 4.10.22.3)

If the submitted from submit() method flag is not set, then fire a simple event that bubbles and is cancelable named submit, at form.

So, the event is not fired if the submit() method flag is set.

I was able to get the behavior you (and I) were expecting via the following code (JSFiddle example):

<form onSubmit={this.handleSubmit} ref="form">
  <textarea onKeyPress={this.handleKeyPress} />
</form>

// ...

this.refs.form.getDOMNode().dispatchEvent(new Event("submit"));

(You'll need more verbose code in IE.)

jQuery's $(form).submit() delegates to $(form).trigger("submit"), so I expect it's a similar workaround.

Upvotes: 32

Related Questions