form submission doesn't work when press 'enter' key

Question

When I press enter key I get this error: Form submission canceled because form is not connected. But Add User button work right.

 function Form({ modal, showModal, onAddUser }) {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [age, setAge] = useState('');

    const createUser = (e) => {
        if (!name || !age || !surname) {
            return;
        } else {
            onAddUser(name, age, surname)
            console.log(name, age)

        }
        setName('');
        setAge('')
        setSurname('');
        showModal(false)

        console.log(e);

    }
    return (

        <>
            {modal ? <FormContainer onSubmit={createUser}>
                <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" />
                <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" />
                <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" />
                <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button>
                <Button type="button">Add User</Button>

            </FormContainer>
                : (null)
            }


        </ >
    )


}

If this is information for one user you should probably be combining those states into one state object: `{ name, age, surname }` that you can update. — Andy, Oct 01 '21 at 13:38
Andy- in parent component I have `[users, setUsers]` state. I keep all users in this state. — Rabbi Musayev, Oct 01 '21 at 13:58
check this asnwer: [https://stackoverflow.com/questions/42053775/getting-error-form-submission-canceled-because-the-form-is-not-connected] — ABDULLOKH MUKHAMMADJONOV, Oct 01 '21 at 14:08

score 0 · Answer 1 · answered Oct 01 '21 at 14:17

You should change the "Add User" button type to submit instead of button. Also, you should call e.preventDefault() on the form submission.

Your component should be like this,

function Form({ modal, showModal, onAddUser }) {
    const [name, setName] = useState('');
    const [surname, setSurname] = useState('');
    const [age, setAge] = useState('');

    const createUser = (e) => {
        // add this line here to prevent `form` element default behaviour
        e.preventDefault();

        if (!name || !age || !surname) {
            return;
        } else {
            onAddUser(name, age, surname)
            console.log(name, age)

        }
        setName('');
        setAge('')
        setSurname('');
        showModal(false)

        console.log(e);

    }
    return (

        <>
            {modal ? <FormContainer onSubmit={createUser}>
                <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" />
                <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" />
                <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" />
                <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button>
                {/* here we changed type="button" to type="submit" */}
                <Button type="submit">Add User</Button>

            </FormContainer>
                : (null)
            }


        </ >
    )
}

But It doesn't work either – Rabbi Musayev Oct 01 '21 at 17:38 — Rabbi Musayev, Oct 01 '21 at 17:38

form submission doesn't work when press 'enter' key

1 Answers1