كيفية اعداد الحدث الخاصة بالـ submit باستخدام الـ addEventListener في JavaScript

Ali Samer · 30 يناير 2023

السلام عليكم اخي الكريم لدي سوال انا اريد ان استعمل في ال Form طريقة ال AddEventLisner انا احب ان استخدم هذة الطريقة لئنها اكثر احترافية من وجهة نضري هل تستطيع ان تعطيني كود المشروع كامل بهذة الطريقة بدون ان استخدم ال onsubmit في ال form

اعرف ان لدي اخطاء املائية لاكن اهم شيء واتمنى اني اوضحت الفكرة

عمر قره محمد · 30 يناير 2023

هذا كود كنت انشأته للإجابة على سؤال مشابه، وهو يقوم بإضافة الـ addEventListener إلى الـ form كما تريد.

<body>
  <form id="form">
    <label for="userName"> ادخل الاسم هنا </label>
    <input type="text" id="userName" name="userName" placeholder="ادخل اسم المستخدم" minlength="3"
           maxlength="36" required />
    <button type="submit">إرسال</button>
  </form>

  <script>
    const form = document.querySelector("#form");
    const url = "http://localhost:3000/"; // الرابط الذي سترسل له البيانات
    const handleSubmit = async (e) => {
      e.preventDefault(); // اذالة الاعدادات الافتراضية (مثل إعادة تحميل الصفحة وغيرها)
      const userName = document.querySelector("#userName").value; // القيمة المدخلة
      try {
        // fetch إرسال طلب باستخدام الدالة 
        const response = await fetch(url + "name", // المسار
                                     { // الاعدادات
          method: "POST", // نوع الطلب
          mode: "cors", // لإرسال الطلب إلى خادم مختلف عن الخادم الذي يقدم الصفحة
          headers: { "Content-Type": "application/json" }, // تحديد نوع بيانات الطلب
          body: JSON.stringify({ userName }), // المعلومات التي سنرسلها وهي نفس القيمة المدخلة
        });
        console.log(await response.json()); // نطبع الاجابة التي سنحصل عليها
      } catch (error) {
        console.log(error);
      }
    };
    form.addEventListener("submit", handleSubmit); // submit نضيف الوظيفة ونربطها بالحدث
  </script>
</body>

لاحظ ان الكود سيظهر خطأ، لأن الخادم الذي يتم إرسال الطلب إليه غير موجود، وعليك تغيير المعلومات الموجودة في الوظيفة للشكل الذي يتناسب مع الخادم الخاص بك (غير العنوان URL و البيانات المرسلة و المسار ..إلخ)

عبدالباسط ابراهيم · 30 يناير 2023

يمكنك معالجة ال حدث submit ل form عن طريق addEventListener كالتالي

document.getElementById('form').addEventListener('submit', validate);

بالنسبة لكلمة validate فهي دالة تقوم بمعالجة القيم المدخلة عن طريق المستخدم قبل تنفيذ ال submit كما في المثال التالي

document.getElementById('form').addEventListener('submit', validate);

function validate() {
    var name = document.getElementById('name').value;
    var email = document.getElementById('mail').value;
    var message = document.getElementById('msg').value;
    if (name == "" || email == "" || message == "") {
        var error = document.createElement('p').textContent = "*This Field is Required";
        document.getElementById('error_name').innerHTML = error;
        document.getElementById('error_email').innerHTML = error;
        document.getElementById('error_msg').innerHTML = error;
        event.preventDefault();
    }
}

كيفية اعداد الحدث الخاصة بالـ submit باستخدام الـ addEventListener في JavaScript

السؤال

Ali Samer

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية