FormSubmit

import React, { useState } from "react";

function FormSubmit() {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

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

    // نستخدم trim عشان نشيل المسافات الفارغة في البداية/النهاية
    if (userName.trim() === "" || password.trim() === "") {
      alert("الرجاء إدخال اسم المستخدم وكلمة المرور");
      return; // مهم: يوقف الدالة هنا، ما يكمّل للـ console.log
    }

    console.log({ userName, password });

    // (اختياري) تفريغ الحقول بعد الإرسال
    setUserName("");
    setPassword("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label>UserName:</label>
          <input
            type="text"
            name="name"
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
          />
          <p>{userName}</p>
        </div>

        <br />

        <div>
          <label>Password:</label>
          <input
            type="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <br />

        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default FormSubmit;

import React, { useState } from "react";

function FormSubmit() {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

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

    // نستخدم trim عشان نشيل المسافات الفارغة في البداية/النهاية
    if (userName.trim() === "" || password.trim() === "") {
      alert("الرجاء إدخال اسم المستخدم وكلمة المرور");
      return; // مهم: يوقف الدالة هنا، ما يكمّل للـ console.log
    }

    console.log({ userName, password });

    // (اختياري) تفريغ الحقول بعد الإرسال
    setUserName("");
    setPassword("");
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label>UserName:</label>
          <input
            type="text"
            name="name"
            value={userName}
            onChange={(e) => setUserName(e.target.value)}
          />
          <p>{userName}</p>
        </div>

        <br />

        <div>
          <label>Password:</label>
          <input
            type="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <br />

        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default FormSubmit;