0

Okay so i am creating a sign up Modal for a website. It is a 3-page form so i separated it into 3 different form components. So the aim is that on the first form page, I conditionally render a next button and a "Have an account? Login" button. when i click the next button, it moves to form 2 and the "Have an account? Login" button changes to a back button. and then when i click the next button again, i go to form 3 and the next button changes to a submit button, which would be used to submit the form. I took inspiration from the twitch sign up form. The problem is that all the buttons are included in the form tag and as such, they all act as a submit button, even when i only want the submit button on page 3 to act as a submit button. I would add the required code below.

The yup schema:

const schema = yup.object().shape({
    name: yup.string().required(),
    email: yup.string().email().required(),
    password: yup.string().min(8).max(20).required(),
  });

const {register, handleSubmit, formState: { errors }} = useForm({resolver: yupResolver(schema)});

const onSubmit = (data) => console.log(data)

the form conditional:

const [form, setForm] = useState(1)

let view = null

    if(props.form === 1){
        view = <SignupForm1 
                    register={props.register} />
    }else if(props.form === 2){
        view = <SignupForm2 
                    register={props.register}/>
    }else{
        view = <SignupForm3 
                    register={props.register}/>
    }

The actual form:

                 <div  className='w-full h-96 flex flex-col pt-5 gap-5 px-5'>
                    <form onSubmit={props.handleSubmit(props.onSubmit)} >
                        {view}

                        {props.form > 2 ? 
                        <button type='submit' className='w-full mt-5 h-10 rounded-md bg-learnode-green1 bg-opacity-10 font-semibold'>Submit</button> : 
                        <button  className='w-full mt-5 h-10 rounded-md bg-learnode-green1 bg-opacity-10 font-semibold disabled:bg-gray-300 disabled:bg-opacity-9 disabled:text-gray-500' onClick={() => props.setForm(box => box +1)}>Next Step</button>
                        }

                        {props.form > 1 ? 
                        <button className='w-full h-10 rounded-md bg-gray-50 bg-opacity-5 text-xs text-green-400 ' onClick={() => handleBack()} >Back</button> : 
                        <button className='w-full h-10 rounded-md bg-gray-50 bg-opacity-5 text-xs text-green-400 ' onClick={() => handleClick2()} >Already have an account? Login</button>
                        }
                    </form>
                </div>

As you can see, i created a form state and initiated it to Form 1. whenever the user clicks on the next step button, It moves to the next page, until it gets to Form 3 then the button turns to the submit button. The submit button is the only button with a type = 'submit' but if i click any other button, it still submits. Is there a way to make the form know that its only the submit button i want to submit the form or i have to rearrange my form in another way?

gerard
  • 221
  • 1
  • 2
  • 10

1 Answers1

0

In your form, all the buttons are included in the same form tag, so they all act as submit buttons.

To fix this, split the buttons and the forms into separate components, and pass data between them using state or props.

Rashmi Wijesekara
  • 91
  • 8