CRM dan Platform Data

Cara Mengisi Bidang Formulir dengan Tanggal Hari Ini dan JavaScript atau JQuery

Meskipun banyak solusi menawarkan kesempatan untuk menyimpan tanggal pada setiap entri formulir, ada kalanya hal tersebut bukan merupakan pilihan. Kami mendorong klien kami untuk menambahkan bidang tersembunyi ke situs mereka dan meneruskan informasi ini bersama dengan entri sehingga mereka dapat melacak kapan entri formulir dimasukkan. Menggunakan JavaScript, ini mudah.

Cara Mengisi Bidang Formulir dengan Tanggal Hari Ini dan 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>

Mari kita uraikan kode HTML dan JavaScript yang disediakan langkah demi langkah:

  1. <!DOCTYPE html> dan <html>: Ini adalah deklarasi dokumen HTML standar yang menetapkan bahwa ini adalah dokumen HTML5.
  2. <head>: Bagian ini biasanya digunakan untuk memasukkan metadata tentang dokumen, seperti judul halaman web, yang diatur menggunakan <title> elemen.
  3. <title>: Ini menetapkan judul halaman web menjadi “Prapopulasi Tanggal dengan JavaScript.”
  4. <body>: Ini adalah area konten utama halaman web tempat Anda menempatkan konten yang terlihat dan elemen antarmuka pengguna.
  5. <form>: Elemen formulir yang dapat berisi kolom input. Dalam hal ini, ini digunakan untuk memuat kolom masukan tersembunyi yang akan diisi dengan tanggal hari ini.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ini adalah kolom masukan tersembunyi. Itu tidak muncul di halaman tetapi dapat menyimpan data. Itu diberi ID "hiddenDateField" dan nama "hiddenDateField" untuk identifikasi dan penggunaan dalam JavaScript.
  7. <script>: Ini adalah tag pembuka untuk blok skrip JavaScript, tempat Anda dapat menulis kode JavaScript.
  8. function getFormattedDate() { ... }: Ini mendefinisikan fungsi JavaScript yang disebut getFormattedDate(). Di dalam fungsi ini:
    • Ini menciptakan hal baru Date objek yang mewakili tanggal dan waktu saat ini menggunakan const today = new Date();.
    • Ini memformat tanggal menjadi string dengan format yang diinginkan (bb/dd/yyyy) menggunakan today.toLocaleDateString(). itu 'en-US' argumen menentukan lokal (Bahasa Inggris Amerika) untuk pemformatan, dan objek dengan year, month, dan day properti mendefinisikan format tanggal.
  9. return formattedDate;: Baris ini mengembalikan tanggal yang diformat sebagai string.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Baris kode ini:
    • penggunaan document.getElementById('hiddenDateField') untuk memilih kolom input tersembunyi dengan ID “hiddenDateField.”
    • Setel value properti bidang masukan yang dipilih dengan nilai yang dikembalikan oleh getFormattedDate() fungsi. Ini mengisi bidang tersembunyi dengan tanggal hari ini dalam format yang ditentukan.

Hasil akhirnya adalah ketika halaman dimuat, kolom input tersembunyi dengan ID “hiddenDateField” diisi dengan tanggal hari ini dalam format bb/dd/yyyy tanpa awalan nol, seperti yang ditentukan dalam getFormattedDate() fungsi.

Cara Mengisi Bidang Formulir dengan Tanggal Hari Ini dan 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>

Kode HTML dan JavaScript ini menunjukkan cara menggunakan jQuery untuk mengisi kolom input tersembunyi dengan tanggal hari ini, dengan format bb/dd/yyyy, tanpa awalan nol. Mari kita uraikan langkah demi langkah:

  1. <!DOCTYPE html> dan <html>: Ini adalah deklarasi dokumen HTML standar yang menunjukkan bahwa ini adalah dokumen HTML5.
  2. <head>: Bagian ini digunakan untuk memasukkan metadata dan sumber daya untuk halaman web.
  3. <title>: Menyetel judul halaman web menjadi “Prapopulasi Tanggal dengan jQuery dan Objek Tanggal JavaScript.”
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Baris ini menyertakan perpustakaan jQuery dengan menentukan sumbernya dari jaringan pengiriman konten (CDN). Ini memastikan bahwa perpustakaan jQuery tersedia untuk digunakan di halaman web.
  5. <body>: Ini adalah area konten utama halaman web tempat Anda menempatkan konten yang terlihat dan elemen antarmuka pengguna.
  6. <form>: Elemen formulir HTML yang digunakan untuk memuat kolom input. Dalam hal ini, ini digunakan untuk merangkum kolom masukan yang tersembunyi.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Bidang masukan tersembunyi yang tidak akan terlihat di halaman web. Ini diberi ID “hiddenDateField” dan nama “hiddenDateField.”
  8. <script>: Ini adalah tag pembuka untuk blok skrip JavaScript tempat Anda dapat menulis kode JavaScript.
  9. $(document).ready(function() { ... });: Ini adalah blok kode jQuery. Ini menggunakan $(document).ready() berfungsi untuk memastikan bahwa kode yang ada di dalamnya berjalan setelah halaman dimuat sepenuhnya. Di dalam fungsi ini:
    • const today = new Date(); menciptakan yang baru Date objek yang mewakili tanggal dan waktu saat ini.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); memformat tanggal menjadi string dengan format yang diinginkan (bb/dd/yyyy) menggunakan toLocaleDateString Metode.
  10. $('#hiddenDateField').val(formattedDate); memilih kolom input tersembunyi dengan ID "hiddenDateField" menggunakan jQuery dan menyetelnya value ke tanggal yang diformat. Ini secara efektif mengisi bidang tersembunyi dengan tanggal hari ini dalam format yang ditentukan.

Kode jQuery menyederhanakan proses memilih dan memodifikasi kolom input tersembunyi dibandingkan dengan JavaScript murni. Saat halaman dimuat, kolom masukan tersembunyi diisi dengan tanggal hari ini dalam format bb/hh/tttt, dan tidak ada angka nol di depan, seperti yang ditentukan dalam formattedDate variabel.

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.