CRM lan Platform Data

Cara Prepopulate Bidang Formulir Kanthi Tanggal Saiki lan JavaScript utawa JQuery

Nalika akeh solusi menehi kesempatan kanggo nyimpen tanggal karo saben entri formulir, ana wektu liyane sing ora dadi pilihan. Kita kasurung klien kita kanggo nambah kolom didhelikake kanggo situs lan pass informasi iki bebarengan karo entri supaya padha bisa nglacak nalika formulir entri sing ngetik. Nggunakake JavaScript, iki gampang.

Carane Prepopulate Lapangan Formulir Kanthi Tanggal Dina lan 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>

Ayo dipecah kode HTML lan JavaScript sing diwenehake kanthi langkah:

  1. <!DOCTYPE html> lan <html>: Iki minangka deklarasi dokumen HTML standar sing nemtokake manawa iki minangka dokumen HTML5.
  2. <head>: Bagean iki biasane digunakake kanggo nyakup metadata babagan dokumen, kayata judhul kaca web, sing disetel nggunakake <title> unsur.
  3. <title>: Iki nyetel judhul kaca web dadi "Prepopulasi Tanggal karo JavaScript."
  4. <body>: Iki minangka area isi utama kaca web ing ngendi sampeyan nyelehake konten sing katon lan unsur antarmuka pangguna.
  5. <form>: Unsur wangun sing bisa ngemot kolom input. Ing kasus iki, digunakake kanggo ngemot kolom input sing didhelikake sing bakal diisi karo tanggal saiki.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Iki minangka kolom input sing didhelikake. Ora katon ing kaca nanging bisa nyimpen data. Iki diwenehi ID "hiddenDateField" lan jeneng "hiddenDateField" kanggo identifikasi lan digunakake ing JavaScript.
  7. <script>: Iki minangka tag pambuka kanggo blok skrip JavaScript, ing ngendi sampeyan bisa nulis kode JavaScript.
  8. function getFormattedDate() { ... }: Iki nemtokake fungsi JavaScript disebut getFormattedDate(). Ing njero fungsi iki:
    • Iku nggawe anyar Date obyek sing makili tanggal lan wektu saiki nggunakake const today = new Date();.
    • Format tanggal dadi senar kanthi format sing dikarepake (mm/dd/yyyy) nggunakake today.toLocaleDateString(). The 'en-US' argumen nemtokake lokal (American English) kanggo format, lan obyek karo year, month, Lan day properti nemtokake format tanggal.
  9. return formattedDate;: Baris iki ngasilake tanggal sing diformat minangka senar.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Kode baris iki:
    • ulah document.getElementById('hiddenDateField') kanggo milih kolom input sing didhelikake kanthi ID "hiddenDateField."
    • Mranata ing value properti saka kolom input sing dipilih kanggo nilai bali dening getFormattedDate() fungsi. Iki ngisi kolom sing didhelikake karo tanggal dina iki ing format sing ditemtokake.

Asil pungkasan yaiku nalika kaca dimuat, kolom input sing didhelikake kanthi ID "hiddenDateField" diisi karo tanggal saiki ing format mm/dd/yyyy tanpa nol ngarep, kaya sing kasebut ing getFormattedDate() fungsi.

Carane Prepopulate Field Formulir Kanthi Tanggal Dina lan 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 lan JavaScript iki nduduhake carane nggunakake jQuery kanggo prepopulate kolom input didhelikake karo tanggal dina, format minangka mm / dd / yyyy, tanpa nul anjog. Ayo kita break mudhun langkah demi langkah:

  1. <!DOCTYPE html> lan <html>: Iki minangka deklarasi dokumen HTML standar sing nuduhake yen iki minangka dokumen HTML5.
  2. <head>: Bagean iki digunakake kanggo nyakup metadata lan sumber daya kanggo kaca web.
  3. <title>: Nyetel judhul kaca web dadi "Prepopulasi Tanggal karo Objek Tanggal jQuery lan JavaScript."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Baris iki kalebu perpustakaan jQuery kanthi nemtokake sumber saka jaringan pangiriman isi (CDN). Mesthekake yen perpustakaan jQuery kasedhiya kanggo digunakake ing kaca web.
  5. <body>: Iki minangka area isi utama kaca web ing ngendi sampeyan nyelehake konten sing katon lan unsur antarmuka pangguna.
  6. <form>: Unsur wangun HTML sing digunakake kanggo ngemot kolom input. Ing kasus iki, digunakake kanggo encapsulate kolom input sing didhelikake.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Kolom input sing didhelikake sing ora katon ing kaca web. Iki diwenehi ID "hiddenDateField" lan jeneng "hiddenDateField."
  8. <script>: Iki minangka tag pambuka kanggo blok skrip JavaScript ing ngendi sampeyan bisa nulis kode JavaScript.
  9. $(document).ready(function() { ... });: Iki minangka blok kode jQuery. Iku nggunakake ing $(document).ready() fungsi kanggo mesthekake yen kode sing ana mlaku sawise kaca wis kebak dimuat. Ing njero fungsi iki:
    • const today = new Date(); nggawe anyar Date obyek sing makili tanggal lan wektu saiki.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); format tanggal dadi string karo format sing dikarepake (mm/dd/yyyy) nggunakake toLocaleDateString cara.
  10. $('#hiddenDateField').val(formattedDate); milih lapangan input didhelikake karo ID "hiddenDateField" nggunakake jQuery lan nyetel sawijining value menyang tanggal format. Iki èfèktif prepopulates kolom didhelikake karo tanggal dina ing format tartamtu.

Kode jQuery nyederhanakake proses milih lan ngowahi lapangan input sing didhelikake dibandhingake JavaScript murni. Nalika kaca dimuat, kolom input sing didhelikake diisi karo tanggal dina iki ing format mm/dd/yyyy, lan ora ana nol utama, kaya sing kasebut ing formattedDate variabel.

Douglas Karr

Douglas Karr punika CMO saka OpenINSIGHTS lan pangadeg ing Martech Zone. Douglas wis mbantu Welasan wiwitan MarTech sukses, wis mbantu ing amarga rajin liwat $ 5 bil ing pitukon lan investasi Martech, lan terus kanggo ngewangi perusahaan ing ngleksanakake lan ngotomatisasi dodolan lan strategi marketing. Douglas minangka transformasi digital sing diakoni sacara internasional lan pakar lan speaker MarTech. Douglas uga dadi penulis buku pandhuan Dummie lan buku kepemimpinan bisnis.

Artikel web

Bali menyang ndhuwur tombol
Cedhak

Adblock Dideteksi

Martech Zone bisa nyedhiyakake konten iki tanpa biaya amarga kita monetisasi situs liwat revenue iklan, pranala afiliasi, lan sponsor. Kita bakal ngormati yen sampeyan bakal mbusak blocker iklan nalika ndeleng situs kita.