Form Submission using Enter Key

Question

I am trying to get the Enter key to submit this form but it is refreshing the page instead. Any Solutions?

<form onSubmit={() => handleSubmit()}> <label for="text">Enter Task</label> <input type="text" id="name" value = {input} onInput = {(e) => setInput(e.target.value)}></input> <button type = "submit">Add</button> </form>

This is my handleSubmit() function:

const handleSubmit = e => { e.preventDefault() //function logic

I have tried using the preventDefault() function but that does not seem to work

I remember doing this by adding an eventListener to the holding div for when the enter key is pressed, then run the submit function on capture. — Display name
– Display name, Commented Dec 23, 2022 at 13:23

Liem · Accepted Answer · 2022-12-23 13:24:56Z

I think the issue you have here is that e.preventDefault() is not working as expected because e is not defined. You need to pass params to handleSubmit() doing one of the following

<form onSubmit={handleSubmit}></form> <form onSubmit={(e) => handleSubmit(e)}></form>

Collectives™ on Stack Overflow

Form Submission using Enter Key

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related