Here is a login form code. The problem is when pressing the Submit button the submit handler is not being triggered. What is a plausible cause for it?

The loginHandler function is never triggered however, the handleInputChange function seems to work fine.

I have tried copy pasting the same code in online editors where it seems to trigger the functions just fine? I cannot find any syntactic errors but can there be anything else that is preventing it from being triggered?

import apiClient, { spaAuth, loginEndPoint } from "../../util/api";
import { responseManager } from "../../util/auth";
import Link from "next/link";
import { useEffect, useState } from "react";

const LoginForm = () => {
  const loginCred = {
    user_name: "",
    password: "",
    remember: false,
  };
  const [formData, setFormData] = useState(loginCred);
  const [remember, setRemember] = useState(false);

  const handleInputChange = (e) => {
    setFormData({
      ...formData,
      [e.currentTarget.name]: e.currentTarget.value,
    });
  };

  const rememberHandler = (e) => {
    e.currentTarget.value = e.currentTarget.checked;
  };

  /**
   *
   * @param {*} e
   * Form Submission Handler
   */
  const loginHandler = (e) => {
    e.preventDefault();
    console.log("Here");

    apiClient
      .get(spaAuth)
      .then((response) => {
        console.log(response);
        console.log(formData);

        apiClient
          .post(loginEndPoint, formData)
          .then((response) => {
            console.log(response);

            responseManager("login", response, formData);
          })
          .catch((error) => {
            console.log(error);
          });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <form
      className="flex flex-col justify-center w-full items-center mt-8 flex-wrap"
      id="LoginForm"
      onSubmit={loginHandler}
    >
      <div className="w-full flex flex-col justify-center items-center mb-10">
        <input
          className="input h-10 pl-5"
          id="username"
          type="text"
          name="user_name"
          placeholder="Username"
          onChange={handleInputChange}
          required={true}
        />

        <input
          className="input h-10 pl-5"
          id="password"
          type="password"
          name="password"
          placeholder="Password"
          onChange={handleInputChange}
          required={true}
        />

        <div className="w-5/6 flex items-center justify-between">
          <div>
            <label className="flex items-center text-gray-400 font-bold">
              <input
                className="leading-tight"
                type="checkbox"
                value={remember}
                id="remember"
                onChange={handleInputChange}
                onClick={rememberHandler}
                name="remember"
              />
              <span className="text-sm pl-2">Remember Me</span>
            </label>
          </div>
          <div>
            <Link href="/">
              <a className="font-bold text-sm text-gray-400 transition-colors duration-500 hover:text-blue-300">
                Forgot Password
              </a>
            </Link>
          </div>
        </div>
      </div>

      <input
        type="submit"
        className="btn bg-btn-color w-56 h-14 shadow-btn text-2xl mb-5 font-title font-bold"
        value="Login"
      />
    </form>
  );
};

export default LoginForm;

CodePudding user response：

I have solved the problem and in this case-

<input
    type="submit"
    className="btn bg-btn-color w-56 h-14 shadow-btn text-2xl mb-5 font-title font-bold"
    value="Login"
    onClick={(e) => {
        e.stopPropagation();
    }}
/>

adding an onClick method and stopping it from propagation enabled the onSubmit method triggering.

The Same thing can be done using a Button instead of an input element.

CodePudding user response：

It is because the form didn't have an action property set.

<form onSubmit={this.handleSubmit} action="#">
    <input placeholder="githug login" ref="login" />
    <button>Add Login</button>
</form>

If the above solution also does'nt work=>Adding a buttton with type="submit" may help

<button type="submit">Submit</button>