Breaking News: Grepper is joining You.com. Read the official announcement!

make it animate into each step

Encouraging Eland answered on July 9, 2023 Popularity 3/10 Helpfulness 1/10

answer make it animate into each step

make it animate into each step

Comment

import React, { useState } from 'react';
import './MultiStepForm.css';

const MultiStepForm = () => {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Process form data
    console.log(formData);
  };

  const goToNextStep = () => {
    setStep((prevStep) => prevStep + 1);
  };

  const goToPrevStep = () => {
    setStep((prevStep) => prevStep - 1);
  };

  return (
    <div className="multi-step-form">
      <form onSubmit={handleSubmit}>
        <div className={`form-step ${step === 1 ? 'active' : ''}`}>
          <h2>Step 1: Personal Information</h2>
          <input
            type="text"
            name="firstName"
            value={formData.firstName}
            onChange={handleChange}
            placeholder="First Name"
            required
          />
          <input
            type="text"
            name="lastName"
            value={formData.lastName}
            onChange={handleChange}
            placeholder="Last Name"
            required
          />
          {step !== 4 && (
            <button type="button" onClick={goToNextStep}>
              Next
            </button>
          )}
        </div>

        <div className={`form-step ${step === 2 ? 'active' : ''}`}>
          <h2>Step 2: Account Information</h2>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            placeholder="Email"
            required
          />
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            placeholder="Password"
            required
          />
          {step !== 1 && (
            <button type="button" onClick={goToPrevStep}>
              Previous
            </button>
          )}
          {step !== 4 && (
            <button type="button" onClick={goToNextStep}>
              Next
            </button>
          )}
        </div>

        <div className={`form-step ${step === 3 ? 'active' : ''}`}>
          <h2>Step 3: Additional Information</h2>
          {/* Additional form fields */}
          {step !== 1 && (
            <button type="button" onClick={goToPrevStep}>
              Previous
            </button>
          )}
          {step !== 4 && (
            <button type="button" onClick={goToNextStep}>
              Next
            </button>
          )}
        </div>

        <div className={`form-step ${step === 4 ? 'active' : ''}`}>
          <h2>Step 4: Confirmation</h2>
          {/* Confirmation message or summary of entered data */}
          {step !== 1 && (
            <button type="button" onClick={goToPrevStep}>
              Previous
            </button>
          )}
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  );
};

export default MultiStepForm;

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: each javascript step

Link to this answer
Share Copy Link

Contributed on Jul 09 2023

Encouraging Eland

0 Answers Avg Quality 2/10

make it animate into each step

Contents

More Related Answers

make it animate into each step

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.