i made a simple login form using next.js and adminlte. But when i submit the form nothing happens. onSubmit won't triggers. I made debug at every input change. In example i type "test" "test" for fields console logs. I want to use router push when successfull login ;

Here my code ;

const Login = () => {
  console.log("Login component rendered"); 

  const router = useRouter();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");

  const handleInputChange = (setter) => (e) => {
    console.log(`Setting value: ${e.target.value}`); 
    setter(e.target.value);
  };

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

    console.log("Form submitted");
    console.log(`Email: ${email}, Password: ${password}`); 

    if (email === "test" && password === "test") {
      console.log("Login successful!");
      localStorage.setItem("isLoggedIn", "true");
      router.push("/");
    } else {
      console.log("Login failed!");
      setError("Hatalı giriş.");
    }
  };

  return (
    <div className="login-box">
      <div className="card card-outline card-primary">
        <div className="card-header text-center">
          <a href="/" className="h1">
            <b>Admin</b>LTE
          </a>
        </div>
        <div className="card-body">
          <p className="login-box-msg">Sign in to start your session</p>

          <form onSubmit={handleLogin}>
            <div className="input-group mb-3">
              <input
                type="email"
                className="form-control"
                placeholder="Email"
                value={email}
                onChange={handleInputChange(setEmail)} 
                required
              />
              <div className="input-group-append">
                <div className="input-group-text">
                  <span className="fas fa-envelope" />
                </div>
              </div>
            </div>
            <div className="input-group mb-3">
              <input
                type="password"
                className="form-control"
                placeholder="Password"
                value={password}
                onChange={handleInputChange(setPassword)} 
                required
              />
              <div className="input-group-append">
                <div className="input-group-text">
                  <span className="fas fa-lock" />
                </div>
              </div>
            </div>


    </div>
  );
};

export default Login;

How can i fix this?

i made a simple login form using next.js and adminlte. But when i submit the form nothing happens. onSubmit won't triggers. I made debug at every input change. In example i type "test" "test" for fields console logs. I want to use router push when successfull login ;

Here my code ;

const Login = () => {
  console.log("Login component rendered"); 

  const router = useRouter();
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState("");

  const handleInputChange = (setter) => (e) => {
    console.log(`Setting value: ${e.target.value}`); 
    setter(e.target.value);
  };

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

    console.log("Form submitted");
    console.log(`Email: ${email}, Password: ${password}`); 

    if (email === "test" && password === "test") {
      console.log("Login successful!");
      localStorage.setItem("isLoggedIn", "true");
      router.push("/");
    } else {
      console.log("Login failed!");
      setError("Hatalı giriş.");
    }
  };

  return (
    <div className="login-box">
      <div className="card card-outline card-primary">
        <div className="card-header text-center">
          <a href="/" className="h1">
            <b>Admin</b>LTE
          </a>
        </div>
        <div className="card-body">
          <p className="login-box-msg">Sign in to start your session</p>

          <form onSubmit={handleLogin}>
            <div className="input-group mb-3">
              <input
                type="email"
                className="form-control"
                placeholder="Email"
                value={email}
                onChange={handleInputChange(setEmail)} 
                required
              />
              <div className="input-group-append">
                <div className="input-group-text">
                  <span className="fas fa-envelope" />
                </div>
              </div>
            </div>
            <div className="input-group mb-3">
              <input
                type="password"
                className="form-control"
                placeholder="Password"
                value={password}
                onChange={handleInputChange(setPassword)} 
                required
              />
              <div className="input-group-append">
                <div className="input-group-text">
                  <span className="fas fa-lock" />
                </div>
              </div>
            </div>


    </div>
  );
};

export default Login;

How can i fix this?

• forms
• next.js
• submit
• onchange
• adminlte

1 Answer 1

From what I can see from your code is that, its form doesnt have a closing tag, plus no submit button,

the onSubmit function in the form i.e

<form onSubmit={handleLogin}>

this handleLogin function will only get called when the submit button is pressed

and to write/setup a submit button you will have to give type prop to the button and it looks like this

 <button type="submit" className="btn btn-primary btn-block">
  Sign In
 </button>

This will submit the form and calls the handleLogin function

and dont fet to close your form tag