Submit form in ReactJS using BUTTON element

Question

I'm building the form using ReactJS and if it has <input type="submit"> element it works fine: forms submits by pressing enter in input[type="text"] and by pressing submit element (And there are also working checkings by ReactJS when form is not submitted if nothing has changed).

But if I replace input[type="submit"] with <button>ButtonLabel</button> I try to use 2 ways:

Get form DOMNode element and call .submit() method which is not ok because it doesn't use internal ReactJS logic
Pass params to button like <button type="submit" form="form-id"> but it still doesn't use ReactJS checkings (I don't want to submit the form if nothing has changed)

So I would really appreciate if someone will suggest me how to submit the form in ReactJS correctly using BUTTON element.

i_like_robots · Accepted Answer · 2014-05-29 11:53:07Z

39

The button element should work exactly as you expect providing the type is set to a submit button and the form has an onsubmit handler.

<form ref="form" onSubmit={this.handleSubmit}>
    <button type="submit">Do the thing</button>
</form>

answered May 29, 2014 at 11:53

i_like_robots

2,7872 gold badges20 silver badges23 bronze badges

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

1 Comment

Brigand Over a year ago

and to add to this, you can do handleSubmit: function(e){ if (!this.validate()) { e.preventDefault() } }

Erik Martín Jordán · Accepted Answer · 2021-01-28 18:07:42Z

8

In React Hooks (16.8.0 and above), use the onSubmit handler and e.preventDefault():

import React, { useState } from 'react';

const Form = () => {
    
    const [name, setName] = useState('');
    
    const handleSubmit = (e) => {
    
        e.preventDefault();

        console.log(`Form submitted, ${name}`);    

    }

    return(
        <form onSubmit = {handleSubmit}>
            <input onChange = {(e) => setName(e.target.value)} value = {name}></input>
            <button type = 'submit'>Click to submit</button>
        </form>
    );
    
}

export default Form;

edited Jan 28, 2021 at 18:07

answered Jan 28, 2021 at 13:41

Erik Martín Jordán

4,8934 gold badges34 silver badges42 bronze badges

Collectives™ on Stack Overflow

Submit form in ReactJS using BUTTON element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related