แพลตฟอร์ม CRM และข้อมูล

วิธีเติมฟิลด์แบบฟอร์มล่วงหน้าด้วยวันที่วันนี้และ JavaScript หรือ JQuery

แม้ว่าโซลูชันต่างๆ จะให้โอกาสในการจัดเก็บวันที่พร้อมกับรายการแบบฟอร์มแต่ละรายการ แต่ก็มีบางครั้งที่ไม่มีตัวเลือกให้เลือก เราขอแนะนำให้ลูกค้าของเราเพิ่มฟิลด์ที่ซ่อนอยู่ในเว็บไซต์ของตน และส่งข้อมูลนี้ไปพร้อมกับรายการ เพื่อให้พวกเขาสามารถติดตามได้ว่าเมื่อใดที่รายการแบบฟอร์มถูกป้อน การใช้ JavaScript นี่เป็นเรื่องง่าย

วิธีเติมฟิลด์แบบฟอร์มล่วงหน้าด้วยวันที่วันนี้และ JavaScript

<!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>: นี่คือแท็กเปิดสำหรับบล็อกสคริปต์ JavaScript ซึ่งคุณสามารถเขียนโค้ด JavaScript ได้
  8. function getFormattedDate() { ... }: สิ่งนี้กำหนดฟังก์ชัน JavaScript ที่เรียกว่า getFormattedDate(). ภายในฟังก์ชันนี้:
    • มันสร้างสิ่งใหม่ Date วัตถุที่แสดงวันที่และเวลาปัจจุบันโดยใช้ const today = new Date();.
    • โดยจะจัดรูปแบบวันที่ให้เป็นสตริงโดยใช้รูปแบบที่ต้องการ (ดด/วว/ปปปป) today.toLocaleDateString(). 'en-US' อาร์กิวเมนต์ระบุสถานที่ (ภาษาอังกฤษแบบอเมริกัน) สำหรับการจัดรูปแบบและวัตถุด้วย year, monthและ day คุณสมบัติกำหนดรูปแบบวันที่
  9. return formattedDate;: บรรทัดนี้ส่งคืนวันที่ที่จัดรูปแบบเป็นสตริง
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: รหัสบรรทัดนี้:
    • ใช้ document.getElementById('hiddenDateField') เพื่อเลือกช่องป้อนข้อมูลที่ซ่อนอยู่ด้วย ID “hiddenDateField”
    • ตั้งค่า value คุณสมบัติของช่องป้อนข้อมูลที่เลือกให้เป็นค่าที่ส่งกลับโดย getFormattedDate() การทำงาน. ซึ่งจะเติมฟิลด์ที่ซ่อนไว้ด้วยวันที่ของวันนี้ในรูปแบบที่ระบุ

ผลลัพธ์ที่ได้คือเมื่อโหลดเพจ ช่องป้อนข้อมูลที่ซ่อนอยู่ซึ่งมี ID “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 Date Object”
  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">: ช่องป้อนข้อมูลที่ซ่อนอยู่ซึ่งจะไม่ปรากฏให้เห็นบนหน้าเว็บ โดยกำหนด ID เป็น “hiddenDateField” และชื่อ “hiddenDateField”
  8. <script>: นี่คือแท็กเปิดสำหรับบล็อกสคริปต์ JavaScript ที่คุณสามารถเขียนโค้ด JavaScript
  9. $(document).ready(function() { ... });: นี่คือบล็อกโค้ด jQuery มันใช้ $(document).ready() ฟังก์ชั่นเพื่อให้แน่ใจว่าโค้ดที่มีอยู่จะทำงานหลังจากโหลดเพจเต็มแล้ว ภายในฟังก์ชันนี้:
    • const today = new Date(); สร้างไฟล์ Date วัตถุที่แสดงวันที่และเวลาปัจจุบัน
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); จัดรูปแบบวันที่ให้เป็นสตริงด้วยรูปแบบที่ต้องการ (ดด/วว/ปปปป) โดยใช้ toLocaleDateString วิธี
  10. $('#hiddenDateField').val(formattedDate); เลือกช่องป้อนข้อมูลที่ซ่อนอยู่ด้วย ID “hiddenDateField” โดยใช้ jQuery และตั้งค่า value จนถึงวันที่จัดรูปแบบ สิ่งนี้จะเติมข้อมูลล่วงหน้าในช่องที่ซ่อนไว้ล่วงหน้าอย่างมีประสิทธิภาพด้วยวันที่วันนี้ในรูปแบบที่ระบุ

รหัส jQuery ช่วยให้กระบวนการเลือกและแก้ไขช่องป้อนข้อมูลที่ซ่อนอยู่ง่ายขึ้น เมื่อเทียบกับ JavaScript ล้วนๆ เมื่อโหลดเพจ ช่องป้อนข้อมูลที่ซ่อนอยู่จะถูกเติมด้วยวันที่ปัจจุบันในรูปแบบ ดด/วว/ปปปป และไม่มีเลขศูนย์นำหน้าตามที่ระบุไว้ใน formattedDate ตัวแปร

Douglas Karr

Douglas Karr เป็น CMO ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

บทความที่เกี่ยวข้อง

กลับไปด้านบนปุ่ม
ปิดหน้านี้

ตรวจพบการบล็อกโฆษณา

Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา