CRM و سیستم عامل های داده

چگونه یک فیلد فرم را با تاریخ امروز و جاوا اسکریپت یا 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 و جاوا اسکریپت ارائه شده را مرحله به مرحله تجزیه کنیم:

  1. <!DOCTYPE html> و <html>: اینها اعلامیه های استاندارد HTML هستند که مشخص می کنند این یک سند HTML5 است.
  2. <head>: این بخش معمولاً برای گنجاندن ابرداده در مورد سند، مانند عنوان صفحه وب، که با استفاده از <title> عنصر
  3. <title>: عنوان صفحه وب را روی «تاریخ پیش جمعیت با جاوا اسکریپت» تنظیم می کند.
  4. <body>: این قسمت محتوای اصلی صفحه وب است که محتوای قابل مشاهده و عناصر رابط کاربری را در آن قرار می دهید.
  5. <form>: یک عنصر فرم که می تواند شامل فیلدهای ورودی باشد. در این مورد، از آن برای حاوی فیلد ورودی پنهان استفاده می شود که با تاریخ امروز پر می شود.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: این یک فیلد ورودی مخفی است. در صفحه ظاهر نمی شود اما می تواند داده ها را ذخیره کند. شناسه "hiddenDateField" و نام "hiddenDateField" برای شناسایی و استفاده در جاوا اسکریپت به آن داده شده است.
  7. <script>: این تگ باز برای بلوک اسکریپت جاوا اسکریپت است که می توانید کد جاوا اسکریپت را بنویسید.
  8. function getFormattedDate() { ... }: این یک تابع جاوا اسکریپت به نام تعریف می کند 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() تابع.

نحوه پر کردن فیلد فرم با تاریخ امروز و جی کوئری

<!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 و جاوا اسکریپت نحوه استفاده از jQuery را برای پر کردن یک فیلد ورودی مخفی با تاریخ امروز که به صورت mm/dd/yyyy قالب‌بندی شده است، بدون صفرهای ابتدایی نشان می‌دهد. بیایید آن را مرحله به مرحله تجزیه کنیم:

  1. <!DOCTYPE html> و <html>: اینها اعلامیه های استاندارد HTML هستند که نشان می دهد این یک سند HTML5 است.
  2. <head>: این بخش برای گنجاندن ابرداده و منابع برای صفحه وب استفاده می شود.
  3. <title>: عنوان صفحه وب را روی «پیش‌جمعیت تاریخ با شیء تاریخ jQuery و جاوا اسکریپت» تنظیم می‌کند.
  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>: این تگ آغازین برای بلوک اسکریپت جاوا اسکریپت است که می توانید کد جاوا اسکریپت را بنویسید.
  9. $(document).ready(function() { ... });: این یک بلوک کد جی کوئری است. از آن استفاده می کند $(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 از است OpenINSIGHTS و بنیانگذار Martech Zone. داگلاس به ده‌ها استارت‌آپ موفق MarTech کمک کرده است، به بررسی دقیق بیش از 5 میلیارد دلار در خرید و سرمایه‌گذاری Martech کمک کرده است، و همچنان به شرکت‌ها در پیاده‌سازی و خودکارسازی استراتژی‌های فروش و بازاریابی کمک می‌کند. داگلاس یک متخصص و سخنران تحول دیجیتال و MarTech است. داگلاس همچنین نویسنده کتاب راهنمای Dummie و کتاب رهبری تجاری است.

مقالات مرتبط

بازگشت به دکمه بالا
نزدیک

Adblock شناسایی شد

Martech Zone می تواند این محتوا را بدون هیچ هزینه ای در اختیار شما قرار دهد زیرا ما از طریق درآمد تبلیغاتی، پیوندهای وابسته و حمایت های مالی از سایت خود کسب درآمد می کنیم. اگر در حین مشاهده سایت ما، مسدود کننده تبلیغات خود را حذف کنید، خوشحال خواهیم شد.