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">:這是一個隱藏的輸入欄位。 它不會出現在頁面上,但可以儲存資料。 它的 ID 為“hiddenDateField”,名稱為“hiddenDateField”,以便在 JavaScript 中識別和使用。
  7. <script>:這是 JavaScript 腳本區塊的開始標記,您可以在其中編寫 JavaScript 程式碼。
  8. function getFormattedDate() { ... }:這定義了一個名為的 JavaScript 函數 getFormattedDate()。 在這個函數內部:
    • 它創造了一個新的 Date 表示當前日期和時間的對象 const today = new Date();.
    • 它將日期格式化為具有所需格式(mm/dd/yyyy)的字串,使用 today.toLocaleDateString()。 “ 'en-US' 參數指定用於格式化的區域設定(美式英語),以及帶有 year, monthday 屬性定義日期格式。
  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 日期物件進行日期預先填入」。
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>:此行透過指定來自內容分發網路 (CDN) 的來源來包含 jQuery 函式庫。 它確保 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', { ... }); 使用以下命令將日期格式化為所需格式 (mm/dd/yyyy) 的字串 toLocaleDateString 方法。
  10. $('#hiddenDateField').val(formattedDate); 使用 jQuery 選擇 ID 為「hiddenDateField」的隱藏輸入欄位並設定其 value 到格式化日期。 這可以有效地用指定格式的今天日期預先填入隱藏欄位。

與純 JavaScript 相比,jQuery 程式碼簡化了選擇和修改隱藏輸入欄位的過程。 載入頁面時,隱藏的輸入欄位將以 mm/dd/yyyy 格式填入今天的日期,並且不存在前導零,如 formattedDate 變量。

Douglas Karr

Douglas Karr 是 CMO 的 開放洞察 和創始人 Martech Zone。 道格拉斯幫助了數十家成功的 MarTech 新創公司,協助進行了超過 5 億美元的 MarTech 收購和投資盡職調查,並繼續協助公司實施和自動化其銷售和行銷策略。 道格拉斯是國際公認的數位轉型和 MarTech 專家和演講者。 道格拉斯也是一本傻瓜指南和一本商業領導書的出版作者。

相關文章

返回頂部按鈕
關閉

檢測到Adblock

Martech Zone 我們能夠免費為您提供這些內容,因為我們通過廣告收入、聯屬鏈接和讚助從我們的網站中獲利。 如果您在瀏覽我們的網站時刪除廣告攔截器,我們將不勝感激。