اذهب إلى المحتوى
  • 0

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

Ali Samer

السؤال

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

هذا كود كنت انشأته للإجابة على سؤال مشابه، وهو يقوم بإضافة الـ 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 و البيانات المرسلة و المسار ..إلخ)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك معالجة ال حدث 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();
    }
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...