Is it possible in React to use the click event on a regular button ponent 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
Is it possible in React to use the click event on a regular button ponent 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
3 Answers
Reset to default 6If 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.
Yes! you can do this wich React in a similar way that plained HTML.
https://reactjs/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}>
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>