How do I alert multiple values at the same time on my React Form?

OccasionalAsker 0
Viewed 20

I'm completely new to React and I'm a bit lost. I want my Form to submit the user's input information and alert it on screen. it works completely fine with the Full Name: ${name} input, but whenever I try to alert the other values such as E-mail: ${email}, the function stops working and the form doesn't do anything when I press submit.

import { useState } from "react";
import './styles/styles.css';

function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [telephone, setTelephone] = useState('');
  const [institution, setInstitution] = useState('');
  const [course, setCourse] = useState('');
  const [year, setYear] = useState('');
  const [company, setCompany] = useState('');
  const [job, setJob] = useState('');
  const [experience, setExperience] = useState('');

  const handleChange =(e)=> {
    setName(e.target.value);
  }

  const handleEmailChange =(e)=> {
    setEmail(e.target.value);
  }

  const handleTelephoneChange =(e)=> {
    setTelephone(e.target.value);
  }
 
  const handleInstitutionChange =(e)=> {
    setInstitution(e.target.value);
  }

  const handleCourseChange =(e)=> {
    setCourse(e.target.value);
  }

  const handleYearChange =(e) => {
    setYear(e.target.value);
  }

  const handleCompanyChange =(e) => {
    setCompany(e.target.value);
  }

  const handleJobChange =(e) => {
    setJob(e.target.value);
  }

  const handleExperienceChange =(e) => {
    setExperience(e.target.value);
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Full Name: ${name}` );
  }

  return (
    <div className="form-container">
    <form onSubmit={(e) => {handleSubmit(e)}} className="cv-form">
        <input 
          className="form-field"
          placeholder="Full Name..."
          value={name}
          onChange={(e)  => 
          {handleChange(e)}} 
          />
        <input 
          className="form-field"
          placeholder="E-mail Address..."
          value={email}
          onChange={(e) => 
          {handleEmailChange(e)}} 
          />
        <input 
          className="form-field"
          placeholder="Telephone Number..."
          value={telephone}
          onChange={(e) => 
          {handleTelephoneChange(e)}} 
        />
        <input 
          className="form-field"
          placeholder="Institution's Name..."
          value={institution}
          onChange={(e) => 
          {handleInstitutionChange(e)}}
        />
        <input 
          className="form-field"
          placeholder="Course's Name..."
          value={course}
          onChange={(e) => 
          {handleCourseChange(e)}}
        />
        <input 
          className="form-field"
          placeholder="Year of Graduation..."
          value={year}
          onChange={(e) => 
          {handleYearChange(e)}}
        />
        <input 
          className="form-field"
          placeholder="Company's Name..."
          value={company}
          onChange={(e) => 
          {handleCompanyChange(e)}}
        />
        <input 
          className="form-field"
          placeholder="Job Position..."
          value={job}
          onChange={(e) => 
          {handleJobChange(e)}}
        />
        <input 
          className="form-field"
          placeholder="Years of Experience..."
          value={experience}
          onChange={(e) => 
          {handleExperienceChange(e)}}
        />
      <input type="submit" value="Submit CV!"/>
    </form>
</div>
  )
}

export default App;
reactjs javascript
2 Answers

You can change your function like this:

const handleSubmit = (e) => {
  e.preventDefault();
  let alertString = `Full Name: ${name}`;
  alertString = `\nEmail: ${email}`;
  alertString = `\nTelephone: ${telephone}`;

  // add other values with a \n at the start

  alert(alertString);
}
Mahesh Samudra0

here formData is for the complete details in form, if there is any doubt pls feel free to ask

import { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    telephone: "",
    institution: "",
    course: "",
    year: "",
    company: "",
    job: "",
    experience: "",
  });

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

  const handleSubmit = (e) => {
    e.preventDefault();
    //here you will get the complete form data
    console.log(formData);
    alert(JSON.stringify(formData));
    // alert(`Full Name: ${name}`);
  };

  return (
    <div className="form-container">
      <form
        onSubmit={(e) => {
          handleSubmit(e);
        }}
        className="cv-form"
      >
        <input
          name="name"
          className="form-field"
          placeholder="Full Name..."
          value={formData.name}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="email"
          className="form-field"
          placeholder="E-mail Address..."
          value={formData.email}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="telephone"
          className="form-field"
          placeholder="Telephone Number..."
          value={formData.telephone}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="institution"
          className="form-field"
          placeholder="Institution's Name..."
          value={formData.institution}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="course"
          className="form-field"
          placeholder="Course's Name..."
          value={formData.course}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="year"
          className="form-field"
          placeholder="Year of Graduation..."
          value={formData.year}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="company"
          className="form-field"
          placeholder="Company's Name..."
          value={formData.company}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="job"
          className="form-field"
          placeholder="Job Position..."
          value={formData.job}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input
          name="experience"
          className="form-field"
          placeholder="Years of Experience..."
          value={formData.experience}
          onChange={(e) => {
            handleChange(e);
          }}
        />
        <input type="submit" value="Submit CV!" />
      </form>
    </div>
  );
}

export default App;
Ashin Thankachan0
Related