• 0

ارسال البيانات من نموذج HTML الى google sheet

السلام عليكم

احاول جمع وارسال البيانات من نموذج بصفحةhtml بعد التحقق من ادخال البيانات بالحقول باستخدام jquery validation الى google sheet

وتمكن بطريقة ما من منع  ارسال حقول فارغة الا انني اواجه مشكلة.ففي النموذج يظهر جدول يبين ما تم شراءة من الصفحة وتحديد العدد المطلوب مع امكانية  حذف الطلب، ويفترض انه يمنع ارسال البيانات في حال كان جدول الطلب  فارغا .. الا انه يتم الارسال. حاولت حل المشكلة كتالي:

  serverlessForm.addEventListener('submit', e => {
     //للتاكد من الكمية المختارة ليست صفر
            if ($('[data-product-quantity]').val() === "1" || $('[data-product-quantity]').val()==="2") {
                console.log($('[data-product-quantity]').val())
                $('[data-product-quantity]').addClass("success")
            }

            //عندما  تصبح الحقول محققة من قبل  jquery vlidation ارسل البيانات ل google  sheet
          if(Name.hasClass("success") 
            && phone.hasClass("success") 
            && address.hasClass("success")
            && $('[data-product-quantity]').hasClass("success") ){

            e.preventDefault();
            spinner.show();


            fetch(scriptURLC, {
                    mode: 'no-cors',
                    method: 'POST',
                    body: new FormData(serverlessForm)
                })
                .then(res => {

                    console.log(res);
                    spinner.hide();

                    
                    swal("تم ارسال طلبك بنجاح!",
                         "سنتواصل معك قريبا.احظى بتسوق ممتع!", "success");
                    modal.modal('hide');
                    serverlessForm.reset();
                    Name.removeClass("success") 
                    phone.removeClass("success") 
                    address.removeClass("success")
                    return true;
                })
                .catch(error => {

                    swal("حدث خطأ ما!", `ارجو معاودة المحاولة   لاحقا: ${error}`, "error");
                    // todo enable submit button

                })
          }
           
        });

ولم تعمل، فقمت باستخدام دالة addMethod التابعه لjquery validation ولم تعمل ايضا...

jQuery.validator.addMethod("orders", function (value, element) {
       var numberOfOrders= $('[data-product-quantity]').val();
       return this.optional(element) || numberOfOrders !=="0";

    },'لطفا اختيار العدد المطلوب من فرشاة ايمي')

كما انه بالشاشات الصغيرة عند تحديد العدد المطلوب يتم حذف المنتج تلقائيا فما السبب

رابط العمل على github --->  https://github.com/aishazaki/aishazaki-emibrush.github.io

وشكرا

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

السلام عليكم @Aisha Zaki

تفقد ال Github Repo الخاص بالمشروع وإختبرت المشروع لكن لا يوجد المشاكل التي ذكرتيها , عند محاولة إرسال الطلب بحقول فارغة لا يرسل يظهر رسالة بأن الحقل فارغ وكذلك بالنسبة للشاشات الصغيرة لم أواجه مشكلة حذف المنتج تلقائي عند تحديد الكمية أتوقع المشكلة لديك هي فقط من كاش المتصفح (الذاكرة المؤقتة) خاص ملفات ال .js تحفظ لمدة في المتصفحات عموماً لحل المشكلة جربي متصفح آخر وأتوقع ستعمل معك بدون مشاكل 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


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

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن