时间戳

首页 > 解决方案 > 表格提交成功

javascript - 表格提交成功

问题描述

我正在用 React 做一个项目，遇到了一个让我难过的问题。
我想添加新用户并在成功添加表单时发出警报。并在表单失败并显示错误消息时发出警报。
所以这是我的代码，我无法弄清楚如何提供自定义消息。
如果有人有一些解决方案，如果你帮助我，那就太好了

import { Component } from "react";
import url from "../components/ApiCall";
import FormElements from "../components/FormElements";
import FormElementStyles from "../styles/Form.module.css";
//component to add employee form
class AddEmployeeForm extends Component {
    //add new employee details from form
    submitForm = (event) => {
        event.preventDefault();
        // console.log(event.target.imageUrl.files[0]);
        let form = event.target;
        let formObj = new FormData();
        formObj.append("firstName", form.firstName.value);
        formObj.append("lastName", form.lastName.value);
        formObj.append("company", form.company.value);
        formObj.append("email", form.email.value);
        formObj.append("contact", form.contact.value);
        formObj.append("imageUrl", form.imageUrl.files[0]);
        formObj.append("skills", form.skills.value.split(","));
        formObj.append("altDescription", form.altDescription.value);
        formObj.append("hobbies", form.hobbies.value.split(","));
        formObj.append("gitHub", form.gitHub.value);
        formObj.append("linkedIn", form.linkedIn.value);
        formObj.append("website", form.website.value);

        fetch(url, {
            method: "POST",

            mode: "cors",
            body: formObj,
        })
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                console.log(data);
                alert("Form Submitted Successfully");
            })
            .catch((err) => {
                console.log(err);
                alert(err);
                alert("Failed");
            });

        form.reset();
    };

标签： javascriptnode.jsreactjsformsvalidation

解决方案

  1. 您只想在表单提交成功后重置表单。
  2. 在您的承诺链中的 catch 调用中，您可以访问表单元素，您可以简单地使用它来显示自定义消息。
class AddEmployeeForm extends Component {
    //add new employee details from form
    submitForm = (event) => {
        event.preventDefault();
        // console.log(event.target.imageUrl.files[0]);
        let form = event.target;
        let formObj = new FormData();
        formObj.append("firstName", form.firstName.value);
        formObj.append("lastName", form.lastName.value);
        formObj.append("company", form.company.value);
        formObj.append("email", form.email.value);
        formObj.append("contact", form.contact.value);
        formObj.append("imageUrl", form.imageUrl.files[0]);
        formObj.append("skills", form.skills.value.split(","));
        formObj.append("altDescription", form.altDescription.value);
        formObj.append("hobbies", form.hobbies.value.split(","));
        formObj.append("gitHub", form.gitHub.value);
        formObj.append("linkedIn", form.linkedIn.value);
        formObj.append("website", form.website.value);

        fetch(url, {
            method: "POST",

            mode: "cors",
            body: formObj,
        })
            .then((response) => {
                return response.json();
            })
            .then((data) => {
                form.reset();
                alert("Form Submitted Successfully");
            })
            .catch((err) => {
                alert(err);
                // you have access to the form data here. Use it.
                // something like this, maybe
                alert(`${form.firstName.value}, Please try again`);
            });
    };

推荐阅读