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>: これらは、これが HTML5 ドキュメントであることを指定する標準の HTML ドキュメント宣言です。
  2. <head>: このセクションは通常、Web ページのタイトルなどのドキュメントに関するメタデータを含めるために使用されます。メタデータは、 <title> 要素。
  3. <title>: これにより、Web ページのタイトルが「JavaScript による日付の事前入力」に設定されます。
  4. <body>: これは、表示されるコンテンツとユーザー インターフェイス要素を配置する Web ページのメイン コンテンツ領域です。
  5. <form>: 入力フィールドを含めることができるフォーム要素。 この場合、今日の日付が入力される非表示の入力フィールドを含めるために使用されます。
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: これは非表示の入力フィールドです。 ページには表示されませんが、データを保存できます。 JavaScript での識別と使用のために、「hiddenDateField」という ID と「hiddenDateField」という名前が付けられています。
  7. <script>: これは、JavaScript コードを記述できる JavaScript スクリプト ブロックの開始タグです。
  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') 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>: これらは、これが HTML5 ドキュメントであることを示す標準の HTML ドキュメント宣言です。
  2. <head>: このセクションは、Web ページのメタデータとリソースを含めるために使用されます。
  3. <title>: Web ページのタイトルを「jQuery と JavaScript 日付オブジェクトによる日付の事前入力」に設定します。
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: この行には、コンテンツ配信ネットワーク (CDN) からのソースを指定することで jQuery ライブラリが含まれています。 これにより、jQuery ライブラリが Web ページで確実に使用できるようになります。
  5. <body>: これは、表示されるコンテンツとユーザー インターフェイス要素を配置する Web ページのメイン コンテンツ領域です。
  6. <form>: 入力フィールドを含めるために使用される HTML フォーム要素。 この場合、非表示の入力フィールドをカプセル化するために使用されます。
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Web ページに表示されない非表示の入力フィールド。 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 フォーマットされた日付に。 これにより、非表示フィールドに指定された形式で今日の日付が事前に設定されます。

jQuery コードを使用すると、純粋な JavaScript と比較して、非表示の入力フィールドの選択と変更のプロセスが簡素化されます。 ページが読み込まれると、非表示の入力フィールドに mm/dd/yyyy 形式で今日の日付が入力され、先頭のゼロは存在しません。 formattedDate 変数に保存します.

Douglas Karr

Douglas Karr のCMOです オープンインサイト の創設者であり、 Martech Zone。 ダグラスは、マーテックのスタートアップ企業数十社の成功を支援し、マーテックの買収と投資における 5 億ドルを超えるデューデリジェンスを支援し、企業の販売戦略とマーケティング戦略の実装と自動化を支援し続けています。 ダグラスは、国際的に認められたデジタル変革と MarTech の専門家兼講演者です。 ダグラスは、ダミーズ ガイドやビジネス リーダーシップに関する書籍の著者でもあります。

関連記事

先頭へ戻るボタンに
閉じる

Adblockが検出されました

Martech Zone は、広告収入、アフィリエイト リンク、スポンサーシップを通じてサイトを収益化しているため、このコンテンツを無料で提供できます。 当サイトをご覧になる際は、広告ブロッカーを削除していただければ幸いです。