Is it possible to use button click event to trigger form submit in React?

Question

Is it possible in React to use the click event on a regular button component to trigger the click of a hidden form submit button/submission of the form with all the form values and updated index intact?

I have an application with a series of steps (like a wizard) and a form in each step that has its own hidden submit button. When ButtonNext (and ButtonFinal on the final step) are clicked, is there a way to trigger a click on the hidden form submit button so that onSubmit runs and the form values and index value are then sent to the handleSubmit function?

I can probably access the hidden submit button with a data-key attribute.

EDIT: ButtonNext and ButtonFinal are direct siblings of the form in the DOM and can't be added to the form.

import React, { useState } from 'react'
import { Row, Col } from 'react-styled-flexboxgrid'
import { Form, ButtonNext, ButtonPrevious, ButtonFinal } from './style'

const Application = ({ steps }) => {
  const [currentStepNum, setCurrentStepNum] = useState(0)
  const [previousStepName, setPreviousStepName] = useState(steps[0].step_name)
  const [nextStepName, setNextStepName] = useState(steps[1].step_name)
  const [formValues, setFormValues] = useState(null)

  const handleSubmit = (values, step) => {
    setFormValues(values)
    setStep(step)
  }

  const handleClick = (event, step) => {
    event.preventDefault()
    setStep(step)
  }

  const setStep = step => {
    step = parseInt(step)
    setCurrentStepNum(step)

    if (step > 0) {
      setPreviousStepName(steps[step - 1].step_name)
    }

    if (step < steps.length - 1) {
      setNextStepName(steps[step + 1].step_name)
    }
  }

  return (
    <>
      <div>
        {steps.map((step, index) => {
          return (
            <div key={index}>
              {currentStepNum == index && (
                <>
                  {step.form.length > 0 && (
                    <Form
                      action="/"
                      fields={fields}
                      onSubmit={(values) => {
                        handleSubmit(values, [index + 1])
                      }}
                    />
                  )}
                  {index > 0 && (
                    <ButtonPrevious
                      onClick={event => {
                        handleClick(event, [index - 1])
                      }}
                    >
                      Back to {previousStepName}
                    </ButtonPrevious>
                  )}
                  {index < steps.length - 1 && (
                    <ButtonNext
                      onClick={Trigger onSubmit here}
                    >
                      Next: {nextStepName}
                    </ButtonNext>
                  )}
                  {index == steps.length - 1 && (
                    <ButtonFinal
                     onClick={Trigger onSubmit here}
                    >
                      FINAL SUBMIT BUTTON PLACEHOLDER
                    </ButtonFinal>
                  )}
                </>
              )}
            </div>
          )
        })}
      </div>
    </>
  )
}

export default Application

bwasilewski · Accepted Answer · 2020-01-27 19:36:09Z

6

If you have a form element with onSubmit set, then any button within that form by default will submit the form. You could disable this default behavior by defining an onClick function for that button, and calling preventDefault() on the passed event.

answered Jan 27, 2020 at 19:36

bwasilewski

1707 bronze badges

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

1 Comment

ForDevTasks Over a year ago

Hello. The only issue with this approach is I'm unable to add children to the form component. ButtonNext and ButtonFinal exist as siblings to the form.

Luís Guilherme Pelin Martins · Accepted Answer · 2020-01-27 19:35:29Z

4

Yes! you can do this wich React in a similar way that plained HTML.

https://reactjs.org/docs/forms.html

class NameForm extends React.Component {
  constructor(props) {
  super(props);
  this.state = {value: ''};

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  }

handleChange(event) {
  this.setState({value: event.target.value});
}

handleSubmit(event) {
  alert('A name was submitted: ' + this.state.value);
  event.preventDefault();
}

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <label>
        Name:
        <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
      <input type="submit" value="Submit" />
    </form>
  );
}}

This way the < input type="submit" value="Submit" /> will be your submit button and you just pass the handleSubmit function to form tag, < form onSubmit={this.handleSubmit}>

answered Jan 27, 2020 at 19:35

Luís Guilherme Pelin Martins

1294 bronze badges

1 Comment

ForDevTasks Over a year ago

Hello. The only issue with this approach is I'm unable to add children to the form component. ButtonNext and ButtonFinal exist as siblings to the form.

Bill Metcalf · Accepted Answer · 2020-01-27 19:24:56Z

0

You can do this in vanilla HTML, which should work in React. Clicking the button should automatically trigger the form submission event

<button type="submit">...</button>

answered Jan 27, 2020 at 19:24

Bill Metcalf

6704 silver badges7 bronze badges

Collectives™ on Stack Overflow

Is it possible to use button click event to trigger form submit in React?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related