Get value from textarea input in event object

Question

I have a form with a textarea where users can put comments, and then trigger a onClick (when the form is submitet via the button).However, I cant get the value of the input, for example if a user writes "test", I want it to get into the handleSubmit function.

My form

<form onSubmit={this.handleSubmit.bind(this)} method="POST">
    <label>Skicka</label>
    <textarea placeholder="Type in comments (allergis etc.)" name ="name" ref ="name"></textarea>

    <button className="btn" type="submit">
        Send
    </button>
</form>

//my handler

public handleSubmit = event => {
    event.preventDefault();
    console.log(event.name.value)
}

Domino987 · Accepted Answer · 2019-08-13 08:22:35Z

1

You have to save the textarea value separately in the onChange method of the textarea like this (for class component):

<form onSubmit={this.handleSubmit.bind(this)}
   method="POST"

   >
    <label>Skicka</label>
    <textarea
         onChange={this.setComments}
         placeholder="Type in comments (allergis etc.)"
         name="name"
         value={this.state.comment}/>

<button className="btn" type="submit">
    Send
</button>
</form>   
// The save function
const setComments = e => this.setState({comment: e.target.value});

This will save the textarea input in your local state and you can access it in your submit function with this.state.comment.

Hope this helps. Happy coding.

answered Aug 13, 2019 at 8:22

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Akhil Aravind Over a year ago

you can also directly call the setState() on text area on change event, like onChange ={e=> this.setState({comment: e.target.value})

Domino987 Over a year ago

But for class components, that's bad practice, because it creates a new function on every render.

ravibagul91 · Accepted Answer · 2019-08-13 09:31:17Z

1

As you are using Uncontrolled Component. You can make use of ref to get value.

handleSubmit = (event) => {
  event.preventDefault();
  console.log(this.refs.name.value)
}

Demo

Note: In React you should never add method="POST" and action attribute's on form.

Don't add public keyword to your function (if you are not using typescript).

Better approach to work with form values, is Controlled Component

answered Aug 13, 2019 at 9:31

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Comments

Martijn Pieters · Accepted Answer · 2019-12-02 09:23:11Z

1

You can fix it by changing the handleSubmit method. Check below updated method.

public handleSubmit = event => {
   event.preventDefault();
   console.log(event.target.name.value)
}

But if you are work with React application then update the state variable via onChange event.

edited Dec 2, 2019 at 9:23

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Aug 13, 2019 at 9:15

user11910739

Collectives™ on Stack Overflow

Get value from textarea input in event object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related