Submit From with Enter key without refreshing the page in React

Question

I want to submit From (Textarea) values with Enter key and without refreshing the page. I also do not want to show the submit button. Using the code below, but on Enter, it refreshes the page. Help will be appreciated.

Current Behaviour

Form can be submitted with Enter key but it refreshes the page.

Required Behaviour

Submit the form with Enter Key without refreshing the page and adding the button element.

 import React, {useState, useRef} from 'react'; export const AppHomeFeedPage = () => { const [values, setValues] = useState(NewPostsInitialValues); const Avatar = UserAvatar const ref = useRef(); function changeHandler (event) { setValues({ ...values, [event.target.name]: event.target.value }); console.log(values) } const onSubmitForm = (e) => { e.preventDefault(); if (e.keyCode === 13 || e.keyCode === 'Enter') { ref.current.submit(); } let userId = values.userId; let userName = values.userName; let postText = values.postText; console.log(userId, userName, postText ) } return( <div className='AppHomePageContentContainer'> <div className="AppMainContentWrapper"> <form className='NewPostForm' ref={ref} onKeyUp={onSubmitForm} tabIndex={0}> <div className="NewPostCardContainer"> <div className="NewPostCardContainerWrapper"> <div className="NewPostCardTopWrapper"> <div className="NewPostCarUserAvatarContainer"> <div className="NewPostCarUserAvatarWrapper"> <img className='NewPostCarUserAvatar' src={Avatar} alt="user image"/> </div> </div> <div className="NewPostCardInputContainer"> <div className="NewPostCardInputWrapper"> <textarea name='postText' className="NewPostTextArea" placeholder={`How's your Portfolio Today ?`} // id='quoteTypeLabelContainer' value={values.postText} onChange={changeHandler} /> </div> </div> </div> </div> </div> </form> </div> </div> ) }

Matthew Kwong · Accepted Answer · 2021-05-21 01:29:05Z

Use onSubmitForm as an onSubmit listener instead of onKeyUp. Most browsers will treat pressing enter in a form as submit action.

i.e.

<form onSubmit{onSubmitForm} />

const onSubmitForm = e => { e.preventDefault(); // Since this is not a keyUp event, you don't need this part // if (e.keyCode === 13 || e.keyCode === 'Enter') { // ref.current.submit(); // } let userId = values.userId; let userName = values.userName; let postText = values.postText; console.log(userId, userName, postText) // HTTP request submit form, modify it depending on your need fetch('/api/form', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ userId, userName, postText }) }); };

Thanks for your reply, I tried, it does not submit, if I press enter without IF statement in "onSubmitForm", it goes to the next line on enter and do not detect the Enter Key at all.
I tried testing with INPUT instead of TextArea and it works perfectly, however, I need it to work with Textarea.
I don't think you will like that idea with text area. The reason you want to use the text area is to support multi-line text, but now you are preventing users to insert new lines. This contradicts the usage of the text area.
textarea break the line when reached assigned width without pressing enter, input, however, do not break-line and user cannot see what they typing after assigned width.

Collectives™ on Stack Overflow

Submit From with Enter key without refreshing the page in React

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related