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

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

Aisha Zaki

السؤال

السلام عليكم

احاول جمع وارسال البيانات من نموذج بصفحة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

وشكرا

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

Recommended Posts

  • 1

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

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

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...