React Js success message on form submission-CodePudding

I want that when I submit my form, I get a successfully submitted form message, but when I submit my form, it is directly submitted and no message comes. Sometimes, it doesn't submit the form, and it keeps showing the message Please fill all the fields.

Can someone tell me what to do or what I am doing wrong?

const Account2 = () => {
  const [menu, setMenu] = useState([]);
  const [form, setForm] = useState({
    kookid: "",
    price: "",
    description: "",
  });
  const menuCollectionRef = collection(db, "menu");

  useEffect(() => {
    onSnapshot(menuCollectionRef, (snapshot) => {
      setMenu(
        snapshot.docs.map((doc) => {
          return {
            id: doc.id,
            viewing: false,
            ...doc.data(),
          };
        })
      );
    });
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!form.kookid || !form.price || !form.description) {
      alert("Please fill out all fields");
      return alert("Form Submitted Successfully");
    }

    addDoc(menuCollectionRef, form);

    setForm({
      kookid: "",
      price: "",
      description: "",
    }).then(() => {});
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group2">
        <label>Kook Id</label>
        <input
          type="text"
          placeholder=""
          value={form.kookid}
          onChange={(e) => setForm({ ...form, kookid: e.target.value })}
        />
      </div>
      <div className="form-group2">
        <label>Description</label>
        <textarea
          placeholder=""
          value={form.description}
          onChange={(e) => setForm({ ...form, description: e.target.value })}
        />
      </div>

      <center>
        <div className="buttons2">
          <button type="submit">Submit</button>
        </div>
      </center>
    </form>
  );
};

CodePudding user response：

if (!form.kookid || !form.price || !form.description) {
   alert("Please fill out all fields")
   return alert("Form Submitted Successfully")
}

You have small trouble with the above code snippet. The condition is any form field is empty, you throw alert("Please fill out all fields") which is correct, but alert("Form Submitted Successfully") should not be a part of the above condition.

You can modify it to

if (!form.kookid || !form.price || !form.description) {
   alert("Please fill out all fields")
   return //to stop other logic, if any field is empty
   //return alert("Form Submitted Successfully")
}

alert("Form Submitted Successfully") //move the successful alert out of the above condition

CodePudding user response：

This seems obviously wrong:

if (!form.kookid || !form.price || !form.description) {
  alert("Please fill out all fields");
  return alert("Form Submitted Successfully");
}

First you show an error message, and then immediately afterward you show a success message. Does that make sense to you?

Second, your form submit handler should return false in addition to preventing default. Do that in bad cases and good cases.

Bonus: this code seems pointless, and you should remove it:

setForm({
  kookid: "",
  price: "",
  description: "",
}).then(() => {}); // <-- this .then accomplishes nothing