submitting form on enter

Question

I'm having issue submitting search form on hitting enter as well as button click. The click works fine. Text is cleared, the /search page renders and search index shown. When I hit enter, the search text clears, but nothing else. I've added a functions handleSubmit, but it does't work. How do I make it search on enter?

   handleSubmit(e) {   
        e.preventDefault(e);
        document.getElementById("search-input")
        .addEventListener("keydown", function (event) {
            // event.persist();
            if (event.keyCode === 13) {
                document.getElementById("search-button").click();
            }
        });
        this.setState( {
            searchItem: "",
        })
    };

    render() {

        return (
            <div id="search-form">
                <form>
                    <input
                        type="text"
                        id="search-input"
                        placeholder="Search videos"
                        value={this.state.searchItem}
                        onChange={this.update()}
                    />
                    <button type="submit" id="search-button" onClick={this.handleSubmit}>
                        <Link to={`/search?search=${this.state.searchItem}`}><img id="search-icon" src="https://image.flaticon.com/icons/svg/49/49116.svg" alt="" /></Link>
                    </button>
                </form>
            </div>
        );
    }

You can check this problem.This might help you. https://stackoverflow.com/questions/20484738/submit-form-on-enter-key-with-javascript/27797224 — Mithun Das, Jul 15 '20 at 21:00
Does this answer your question? [How to submit a form when the return key is pressed?](https://stackoverflow.com/questions/29943/how-to-submit-a-form-when-the-return-key-is-pressed) — Kundan, Jul 16 '20 at 02:23

score 0 · Answer 1 · answered Jul 15 '20 at 20:52

document.getElementById("id_of_your_textbox").addEventListener("keydown", function(e) {

    // Prevent a blank line.
    e.preventDefault(); 

    // Enter is pressed.
    if (e.keyCode == 13) { 
        this.submit(); 
    }
}, false);

Simply, edit document.getElementById("search-button").click(); to document.getElementById("search-button").submit();

score 0 · Answer 2 · edited Jul 16 '20 at 01:21

0

Your EventListener cant be inside the handleSubmit function.

form.addEventListener('submit', handleSubmit());

edited Jul 16 '20 at 01:21

Patric

2,789
9
33
60

answered Jul 15 '20 at 20:56

Mateus Oliveira

21
1

Should be `handleSubmit` instead of `handleSubmit()`. We just want to point to the function, not call it. – Anis R. Jul 15 '20 at 22:13

score 0 · Answer 3 · answered Jul 15 '20 at 22:11

In forms, enter to submit is enabled by default, but you need to tell the form what to do on submit. So, add an onsubmit event to your form:

<form onSubmit={this.handleSubmit}>
...
</form>

Or, via JS's addEventListener:

form.addEventListener('submit', this.handleSubmit);

Edit: Oh, and you should add preventDefault() at the beginning of the event handler's function, something like:

handleSubmit(e) {
    e.preventDefault(); //prevents the form from submitting before the end of this function
    //do something here...
}

submitting form on enter

3 Answers3