أنظمة إدارة علاقات العملاء والبيانات

كيفية ملء حقل النموذج مسبقًا بتاريخ اليوم وJavaScript أو JQuery

في حين أن العديد من الحلول توفر الفرصة لتخزين التاريخ مع كل إدخال في النموذج، إلا أن هناك أوقاتًا أخرى لا يكون فيها هذا خيارًا. نحن نشجع عملائنا على إضافة حقل مخفي إلى موقعهم وتمرير هذه المعلومات مع الإدخال حتى يتمكنوا من تتبع وقت إدخال إدخالات النموذج. باستخدام جافا سكريبت، هذا أمر سهل.

كيفية ملء حقل النموذج مسبقًا بتاريخ اليوم وجافا سكريبت

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with JavaScript</title>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Function to get today's date in the desired format
        function getFormattedDate() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            return formattedDate;
        }

        // Use JavaScript to set the value of the hidden field to today's date
        document.getElementById('hiddenDateField').value = getFormattedDate();
    </script>
</body>
</html>

دعونا نحلل كود HTML وJavaScript المقدم خطوة بخطوة:

  1. <!DOCTYPE html> و <html>: هذه هي إعلانات مستندات HTML القياسية التي تحدد أن هذا مستند HTML5.
  2. <head>: يُستخدم هذا القسم عادةً لتضمين بيانات تعريفية حول المستند، مثل عنوان صفحة الويب، والتي يتم تعيينها باستخدام <title> جزء.
  3. <title>: يؤدي هذا إلى تعيين عنوان صفحة الويب على "التاريخ المسبق باستخدام JavaScript".
  4. <body>: هذه هي منطقة المحتوى الرئيسية لصفحة الويب حيث تضع المحتوى المرئي وعناصر واجهة المستخدم.
  5. <form>: عنصر نموذج يمكن أن يحتوي على حقول الإدخال. في هذه الحالة، يتم استخدامه لاحتواء حقل الإدخال المخفي الذي سيتم ملؤه بتاريخ اليوم.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: هذا حقل إدخال مخفي. لا يظهر على الصفحة ولكن يمكنه تخزين البيانات. يتم منحه معرف "hiddenDateField" واسم "hiddenDateField" لتحديد هويته واستخدامه في JavaScript.
  7. <script>: هذه هي العلامة الافتتاحية لكتلة البرنامج النصي لجافا سكريبت، حيث يمكنك كتابة كود جافا سكريبت.
  8. function getFormattedDate() { ... }: يحدد هذا وظيفة JavaScript تسمى getFormattedDate(). داخل هذه الوظيفة:
    • يخلق ملف Date كائن يمثل التاريخ والوقت الحاليين باستخدام const today = new Date();.
    • يقوم بتنسيق التاريخ في سلسلة بالتنسيق المطلوب (mm/dd/yyyy) باستخدام today.toLocaleDateString(). 'en-US' تحدد الوسيطة اللغة (الإنجليزية الأمريكية) للتنسيق، والكائن الذي به year, monthو day تحدد الخصائص تنسيق التاريخ.
  9. return formattedDate;: يقوم هذا السطر بإرجاع التاريخ المنسق كسلسلة.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: هذا السطر من التعليمات البرمجية:
    • استخدام document.getElementById('hiddenDateField') لتحديد حقل الإدخال المخفي بالمعرف "hiddenDateField".
    • يضبط value خاصية حقل الإدخال المحدد إلى القيمة التي يتم إرجاعها بواسطة getFormattedDate() وظيفة. يؤدي هذا إلى ملء الحقل المخفي بتاريخ اليوم بالتنسيق المحدد.

والنتيجة النهائية هي أنه عند تحميل الصفحة، يتم ملء حقل الإدخال المخفي بالمعرف "hiddenDateField" بتاريخ اليوم بالتنسيق mm/dd/yyyy بدون الأصفار البادئة، كما هو محدد في getFormattedDate() وظيفة.

كيفية ملء حقل النموذج مسبقًا بتاريخ اليوم وjQuery

<!DOCTYPE html>
<html>
<head>
    <title>Date Prepopulation with jQuery and JavaScript Date Object</title>
    <!-- Include jQuery from a CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form>
        <!-- Hidden field for the date -->
        <input type="hidden" id="hiddenDateField" name="hiddenDateField">
    </form>

    <script>
        // Use jQuery to set the value of the hidden field to today's date
        $(document).ready(function() {
            const today = new Date();
            const formattedDate = today.toLocaleDateString('en-US', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            });
            $('#hiddenDateField').val(formattedDate);
        });
    </script>
</body>
</html>

يوضح كود HTML وJavaScript هذا كيفية استخدام jQuery لملء حقل إدخال مخفي مسبقًا بتاريخ اليوم، بتنسيق mm/dd/yyyy، بدون أصفار بادئة. دعنا نقسمها خطوة بخطوة:

  1. <!DOCTYPE html> و <html>: هذه هي إعلانات مستندات HTML القياسية التي تشير إلى أن هذا مستند HTML5.
  2. <head>: يستخدم هذا القسم لتضمين البيانات الوصفية والموارد لصفحة الويب.
  3. <title>: يضبط عنوان صفحة الويب على "التعبئة المسبقة للتاريخ باستخدام كائن التاريخ jQuery وJavaScript".
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: يتضمن هذا السطر مكتبة jQuery بتحديد مصدرها من شبكة توصيل المحتوى (CDN). فهو يضمن أن مكتبة jQuery متاحة للاستخدام على صفحة الويب.
  5. <body>: هذه هي منطقة المحتوى الرئيسية لصفحة الويب حيث تضع المحتوى المرئي وعناصر واجهة المستخدم.
  6. <form>: عنصر نموذج HTML يستخدم لاحتواء حقول الإدخال. في هذه الحالة، يتم استخدامه لتغليف حقل الإدخال المخفي.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: حقل إدخال مخفي لن يكون مرئيًا على صفحة الويب. تم تعيين معرف "hiddenDateField" واسم "hiddenDateField".
  8. <script>: هذه هي العلامة الافتتاحية لكتلة برنامج JavaScript حيث يمكنك كتابة كود JavaScript.
  9. $(document).ready(function() { ... });: هذه كتلة كود jQuery. يستخدم $(document).ready() وظيفة للتأكد من أن التعليمات البرمجية المضمنة تعمل بعد تحميل الصفحة بالكامل. داخل هذه الوظيفة:
    • const today = new Date(); يخلق ملف Date كائن يمثل التاريخ والوقت الحاليين.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); تنسيق التاريخ في سلسلة بالتنسيق المطلوب (mm/dd/yyyy) باستخدام الملف toLocaleDateString الأسلوب.
  10. $('#hiddenDateField').val(formattedDate); تحديد حقل الإدخال المخفي بالمعرف "hiddenDateField" باستخدام jQuery وتعيينه value إلى التاريخ المنسق. يؤدي هذا إلى تعبئة الحقل المخفي مسبقًا بتاريخ اليوم بالتنسيق المحدد.

يعمل كود jQuery على تبسيط عملية تحديد وتعديل حقل الإدخال المخفي مقارنة بجافا سكريبت الخالص. عند تحميل الصفحة، يتم ملء حقل الإدخال المخفي بتاريخ اليوم بتنسيق mm/dd/yyyy، ولا توجد أصفار بادئة، كما هو محدد في formattedDate المتغير.

Douglas Karr

Douglas Karr هو CMO من أوبن إنسايتس ومؤسس Martech Zone. ساعد دوغلاس العشرات من الشركات الناشئة الناجحة في MarTech، وساعد في العناية الواجبة بأكثر من 5 مليارات دولار في عمليات الاستحواذ والاستثمارات في Martech، ويستمر في مساعدة الشركات في تنفيذ وأتمتة استراتيجيات المبيعات والتسويق الخاصة بها. دوغلاس هو أحد خبراء التحول الرقمي المعترف بهم عالميًا وخبير ومتحدث في MarTech. دوغلاس هو أيضًا مؤلف منشور لدليل Dummie وكتاب عن قيادة الأعمال.

مقالات ذات صلة

العودة إلى الزر العلوي
اغلاق

كشف Adblock

Martech Zone قادر على تزويدك بهذا المحتوى دون أي تكلفة لأننا نستثمر موقعنا من خلال عائدات الإعلانات ، والروابط التابعة ، والرعاية. سنكون ممتنين إذا قمت بإزالة مانع الإعلانات الخاص بك أثناء عرض موقعنا.