Issue with form submit using Reactjs

Question

I am working on Reactjs(Nextjs),Trying to submit form but unable to submit form,How can i submit form data ? Here is my current code

    export default function Home() {
      const checklogin = async (e:any) => {
        e.preventDefault();
        alert("Its working");
      }
        <form className="forms-sample" onSubmit={checklogin}>
              <div className="form-group first">
                <label htmlFor="username">Username</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="[email protected]"
                  id="username"
                />
              </div>
              <div className="form-group last mb-3">
                <label htmlFor="password">Password</label>
                <input
                  type="password"
                  className="form-control"
                  placeholder="Your Password"
                  id="password"
                />
              </div>
              <input
                type="submit"
                name="submit"
                defaultValue="Log In"
                className="btn btn-block btn-primary"
              />
            </form>

What happens with this code ? The alert doesn't show up ? Could you go in the console and see if there's any error ? — Emilien
– Emilien, Commented Feb 4, 2023 at 5:40

Sachin Som · Accepted Answer · 2023-02-04 05:51:23Z

1. controlled form

import React from 'react';

export default function Home() {
    const INITIAL_DATA = {
        username: '',
        password: '',
    };
    const [formData, setFormData] = React.useState(INITIAL_DATA);

    const checklogin = async (e) => {
        e.preventDefault();
        console.log(formData); // * PROCESS FORMDATA ON SUBMIT
        alert('Its working');
        setFormData(INITIAL_DATA); // * CLEAR DATA AFTER SUBMIT
    };

    function handleOnChangeInput(event) {
        const name = event?.target?.name;
        const value = event?.target?.value;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    }

    return (
        <form className='forms-sample' onSubmit={checklogin}>
            <div className='form-group first'>
                <label htmlFor='username'>Username</label>
                <input
                    type='text'
                    className='form-control'
                    placeholder='[email protected]'
                    id='username'
                    onChange={handleOnChangeInput}
                    value={formData?.username}
                />
            </div>
            <div className='form-group last mb-3'>
                <label htmlFor='password'>Password</label>
                <input
                    type='password'
                    className='form-control'
                    placeholder='Your Password'
                    id='password'
                    onChange={handleOnChangeInput}
                    value={formData?.password}
                />
            </div>
            <input
                type='submit'
                name='submit'
                defaultValue='Log In'
                className='btn btn-block btn-primary'
            />
        </form>
    );
}

2. Uncontrolled form

import React from 'react';

export default function Home() {
    const formRef = React.useRef(null);

    const checklogin = async (event) => {
        event.preventDefault();
        alert('Its working');

        // * Get form enteries
        const formData = new FormData(formRef?.current);
        const formEnteries = Object.fromEntries(formData?.entries());
        console.log(formEnteries); // * PROCESS FORMENTERIES ON SUBMIT

        // * Clear form fields here
        const formCurrentTarget = event?.currentTarget;
        formCurrentTarget?.reset();
    };

    return (
        <form className='forms-sample' onSubmit={checklogin} ref={formRef}>
            <div className='form-group first'>
                <label htmlFor='username'>Username</label>
                <input
                    type='text'
                    className='form-control'
                    placeholder='[email protected]'
                    id='username'
                    name='username'
                />
            </div>
            <div className='form-group last mb-3'>
                <label htmlFor='password'>Password</label>
                <input
                    type='password'
                    className='form-control'
                    placeholder='Your Password'
                    id='password'
                    name='password'
                />
            </div>
            <input
                type='submit'
                name='submit'
                defaultValue='Log In'
                className='btn btn-block btn-primary'
            />
        </form>
    );
}

Read more about controlled and uncontrolled components here - Link

Collectives™ on Stack Overflow

Issue with form submit using Reactjs

1 Answer 1

1. controlled form

2. Uncontrolled form

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. controlled form

2. Uncontrolled form

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related