CODEWITHSUNDEEP
javascriptreact-hooks
sundeep
sundeep

Reputation: 355

Unable to Capture the Checkbox Values on form Submission using React

I am facing an issue with Checkboxes, I will explain the issue in a clear way and What I tried for that. I have four Checkboxes and If I select two checkboxes and Submitted the Form and I am getting two checkbox values like this [HTML, CSS]... Now, The Issue is, Again If I select two other Checkboxes, Then Previous selected values are getting added to the new Array like this [HTML,CSS,HTML,CSS] and Goes on like this.. [HTML,CSS,HTML,CSS,HTML,CSS,HTML,CSS] That is the Issue, It should not be Added to the Previous array... I got Struck here, Please Can anyone help me with this...

This is the HTML Part

<div className="mb-3">
  <label className="mb-2 fw-bold">Checkbox Value</label>
    <div className="form-check">
      <input className="form-check-input" type="checkbox" name="checking"  value="Javascript" onChange={handleChnage} />
      <label className="form-check-label" htmlFor="flexCheckDefault">Javascript</label>
    </div>
    <div className="form-check">
      <input className="form-check-input" type="checkbox" name="checking" value="React JS" onChange={handleChnage} />
      <label className="form-check-label" htmlFor="flexCheckChecked">React JS</label>
    </div>
    <div className="form-check">
      <input className="form-check-input" type="checkbox" name="checking"  value="HTML" onChange={handleChnage} />
      <label className="form-check-label" htmlFor="flexCheckChecked">HTML</label>
    </div>
    <div className="form-check">
      <input className="form-check-input" type="checkbox" name="checking"  value="CSS" onChange={handleChnage} />
      <label className="form-check-label" htmlFor="flexCheckChecked">CSS</label>
    </div>
</div>

This is the Function

const [data, setdata] = useState({
        "UserName": "",
        "PhoneNumber": "",
        "email": "",
        "dropDown": "",
        "gender": null,
        "checking": [],
        // "id" :""
    })

  
      const handleChnage = (e) => {
        if (e.target.name !== "checking") {
            setdata({ ...data, [e.target.name]: e.target.value });

        } else if (e.target.name === "checking") {
          
                let value = e.target.value;
                //console.log(value);
                let newcheckes = { ...data };
                  //console.log(newcheckes);
                  //newcheckes.checking.push(value);
                      //console.log(data);
                if(newcheckes.checking.indexOf(value) === -1){
                      newcheckes.checking.push(value);
                }else {
                    newcheckes.checking.splice(newcheckes.checking.indexOf(value),1);
                }
                //console.log(newcheckes);
                setdata(data);
        }
    }


const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(allActions.createData(data));

}

Upvotes: 0

Views: 715

Answers (1)

B.Anup
B.Anup

Reputation: 585

  1. If you are using with user-inputted form, I would recommend using Formik and Yup, which solve most of the challenges.

  2. Probably you are not updating the state values to the default initial values after clicking submit button. Hence after form submission, your state is retaining previous user-inputted data.

  3. Define an object, that contains default initial values. once user submits the form, you can set "data" with default initial values. Then your state "data" will be ready for next form cycle.

  4. Most of these challenges can be easily solved in Formik and Yup.

     const initialValues = {
     "UserName": "",
     "PhoneNumber": "",
     "email": "",
     "dropDown": "",
     "gender": null,
     "checking": [],
 }

Upvotes: 1

Related Questions