CRM și platforme de date

Cum să prepopulați un câmp de formular cu data de astăzi și JavaScript sau JQuery

În timp ce multe soluții oferă posibilitatea de a stoca data cu fiecare intrare de formular, există alte momente când nu este o opțiune. Încurajăm clienții noștri să adauge un câmp ascuns pe site-ul lor și să transmită aceste informații împreună cu intrarea, astfel încât să poată urmări când sunt introduse intrările din formular. Folosind JavaScript, acest lucru este ușor.

Cum să prepopulați un câmp de formular cu data de astăzi și 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>

Să defalcăm codul HTML și JavaScript furnizat pas cu pas:

  1. <!DOCTYPE html> și <html>: Acestea sunt declarații standard de document HTML care specifică că acesta este un document HTML5.
  2. <head>: Această secțiune este de obicei folosită pentru a include metadate despre document, cum ar fi titlul paginii web, care este setat folosind <title> element.
  3. <title>: Aceasta setează titlul paginii web la „Data prepopulării cu JavaScript”.
  4. <body>: Aceasta este zona principală de conținut a paginii web în care plasați conținutul vizibil și elementele interfeței cu utilizatorul.
  5. <form>: un element de formular care poate conține câmpuri de intrare. În acest caz, este folosit pentru a conține câmpul de intrare ascuns care va fi populat cu data de astăzi.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Acesta este un câmp de intrare ascuns. Nu apare pe pagină, dar poate stoca date. I se dă un ID „hiddenDateField” și un nume „hiddenDateField” pentru identificare și utilizare în JavaScript.
  7. <script>: Aceasta este eticheta de deschidere pentru un bloc de script JavaScript, unde puteți scrie cod JavaScript.
  8. function getFormattedDate() { ... }: Aceasta definește o funcție JavaScript numită getFormattedDate(). În cadrul acestei funcții:
    • Ea creează un nou Date obiect reprezentând data și ora curente folosind const today = new Date();.
    • Formatează data într-un șir cu formatul dorit (ll/zz/aaaa) folosind today.toLocaleDateString(). 'en-US' argument specifică localul (engleza americană) pentru formatare și obiectul cu year, month, și day proprietăți definește formatul datei.
  9. return formattedDate;: Această linie returnează data formatată ca șir.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Această linie de cod:
    • Utilizeaza document.getElementById('hiddenDateField') pentru a selecta câmpul de intrare ascuns cu ID-ul „hiddenDateField”.
    • Setează value proprietatea câmpului de intrare selectat la valoarea returnată de getFormattedDate() funcţie. Aceasta completează câmpul ascuns cu data de astăzi în formatul specificat.

Rezultatul final este că atunci când pagina se încarcă, câmpul de intrare ascuns cu ID-ul „hiddenDateField” este populat cu data de astăzi în formatul mm/zz/aaaa fără zerouri de început, așa cum se specifică în getFormattedDate() Funcția.

Cum să prepopulați un câmp de formular cu data de astăzi și 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>

Acest cod HTML și JavaScript demonstrează cum să utilizați jQuery pentru a prepopula un câmp de intrare ascuns cu data de astăzi, formatată ca mm/zz/aaaa, fără zerouri de început. Să o descompunem pas cu pas:

  1. <!DOCTYPE html> și <html>: Acestea sunt declarații standard de document HTML care indică faptul că acesta este un document HTML5.
  2. <head>: Această secțiune este folosită pentru a include metadate și resurse pentru pagina web.
  3. <title>: setează titlul paginii web la „Prepopularea dată cu jQuery și obiectul data JavaScript”.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Această linie include biblioteca jQuery prin specificarea sursei acesteia dintr-o rețea de livrare de conținut (CDN). Se asigură că biblioteca jQuery este disponibilă pentru utilizare pe pagina web.
  5. <body>: Aceasta este zona principală de conținut a paginii web în care plasați conținutul vizibil și elementele interfeței cu utilizatorul.
  6. <form>: un element de formular HTML folosit pentru a conține câmpuri de intrare. În acest caz, este folosit pentru a încapsula câmpul de intrare ascuns.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: un câmp de introducere ascuns care nu va fi vizibil pe pagina web. I se atribuie un ID „hiddenDateField” și un nume „hiddenDateField”.
  8. <script>: Aceasta este eticheta de deschidere pentru un bloc de script JavaScript în care puteți scrie cod JavaScript.
  9. $(document).ready(function() { ... });: Acesta este un bloc de cod jQuery. Acesta folosește $(document).ready() funcția pentru a se asigura că codul conținut rulează după ce pagina s-a încărcat complet. În cadrul acestei funcții:
    • const today = new Date(); creează un nou Date obiect reprezentând data și ora curente.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formatează data într-un șir cu formatul dorit (ll/zz/aaaa) folosind toLocaleDateString metodă.
  10. $('#hiddenDateField').val(formattedDate); selectează câmpul de intrare ascuns cu ID-ul „hiddenDateField” folosind jQuery și își setează value la data formatată. Acest lucru prepopulează efectiv câmpul ascuns cu data de astăzi în formatul specificat.

Codul jQuery simplifică procesul de selectare și modificare a câmpului de intrare ascuns în comparație cu JavaScript pur. Când pagina se încarcă, câmpul de introducere ascuns este completat cu data de astăzi în formatul mm/zz/aaaa și nu sunt prezente zerouri la început, așa cum se specifică în formattedDate variabilă.

Douglas Karr

Douglas Karr este CMO al OpenINSIGHTS și fondatorul Martech Zone. Douglas a ajutat zeci de startup-uri de succes MarTech, a ajutat la due diligence de peste 5 miliarde de dolari în achiziții și investiții Martech și continuă să asiste companiile în implementarea și automatizarea strategiilor lor de vânzări și marketing. Douglas este un expert în transformare digitală recunoscut la nivel internațional și expert și vorbitor MarTech. Douglas este, de asemenea, un autor publicat al unui ghid pentru Dummie și al unei cărți de conducere în afaceri.

Articole pe aceeaşi temă

Înapoi la butonul de sus
Închide

Blocarea reclamelor a fost detectată

Martech Zone este în măsură să vă furnizeze acest conținut fără costuri, deoarece monetizăm site-ul nostru prin venituri din reclame, linkuri afiliate și sponsorizări. Am aprecia dacă ați elimina dispozitivul de blocare a reclamelor pe măsură ce vizualizați site-ul nostru.