CRM a dátové platformy

Ako vopred vyplniť pole formulára s dnešným dátumom a JavaScriptom alebo JQuery

Zatiaľ čo mnohé riešenia ponúkajú možnosť uložiť dátum pri každom zadaní formulára, v iných prípadoch to nie je možné. Odporúčame našim klientom, aby na svoje stránky pridali skryté pole a odovzdali tieto informácie spolu so záznamom, aby mohli sledovať, kedy sú zadané položky formulára. Pomocou JavaScriptu je to jednoduché.

Ako vopred vyplniť pole formulára s dnešným dátumom a JavaScriptom

<!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>

Poďme krok za krokom rozobrať poskytnutý kód HTML a JavaScript:

  1. <!DOCTYPE html> a <html>: Toto sú štandardné deklarácie dokumentu HTML, ktoré uvádzajú, že ide o dokument HTML5.
  2. <head>: Táto sekcia sa zvyčajne používa na zahrnutie metadát o dokumente, ako je napríklad názov webovej stránky, ktorý sa nastavuje pomocou <title> prvok.
  3. <title>: Týmto sa nastaví názov webovej stránky na „Predbežné vyplnenie dátumu pomocou JavaScriptu“.
  4. <body>: Toto je hlavná obsahová oblasť webovej stránky, kde umiestňujete viditeľný obsah a prvky používateľského rozhrania.
  5. <form>: Prvok formulára, ktorý môže obsahovať vstupné polia. V tomto prípade sa používa na to, aby obsahovalo skryté vstupné pole, ktoré bude vyplnené dnešným dátumom.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Toto je skryté vstupné pole. Nezobrazuje sa na stránke, ale môže ukladať údaje. Je mu pridelené ID „hiddenDateField“ a názov „hiddenDateField“ na identifikáciu a použitie v JavaScripte.
  7. <script>: Toto je úvodná značka pre blok skriptu JavaScript, do ktorého môžete napísať kód JavaScript.
  8. function getFormattedDate() { ... }: Toto definuje funkciu JavaScriptu s názvom getFormattedDate(). Vo vnútri tejto funkcie:
    • Vytvára nový Date objekt predstavujúci aktuálny dátum a čas pomocou const today = new Date();.
    • Formátuje dátum do reťazca s požadovaným formátom (mm/dd/rrrr) pomocou today.toLocaleDateString(), 'en-US' argument určuje miestne nastavenie (americká angličtina) pre formátovanie a objekt s year, montha day vlastnosti definuje formát dátumu.
  9. return formattedDate;: Tento riadok vráti formátovaný dátum ako reťazec.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Tento riadok kódu:
    • použitie document.getElementById('hiddenDateField') vyberte skryté vstupné pole s ID „hiddenDateField“.
    • Nastaví value vlastnosti vybratého vstupného poľa na hodnotu vrátenú parametrom getFormattedDate() funkciu. Toto vyplní skryté pole dnešným dátumom v zadanom formáte.

Konečným výsledkom je, že pri načítaní stránky sa skryté vstupné pole s ID „hiddenDateField“ vyplní dnešným dátumom vo formáte mm/dd/rrrr bez úvodných núl, ako je uvedené v getFormattedDate() funkcie.

Ako vopred vyplniť pole formulára s dnešným dátumom a 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>

Tento kód HTML a JavaScript ukazuje, ako použiť jQuery na predvyplnenie skrytého vstupného poľa dnešným dátumom vo formáte mm/dd/rrrr bez úvodných núl. Poďme si to rozobrať krok za krokom:

  1. <!DOCTYPE html> a <html>: Toto sú štandardné deklarácie dokumentu HTML, ktoré označujú, že ide o dokument HTML5.
  2. <head>: Táto sekcia sa používa na zahrnutie metadát a zdrojov pre webovú stránku.
  3. <title>: Nastaví názov webovej stránky na „Predvyplnenie dátumu pomocou jQuery a objektu JavaScript Date Object“.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Tento riadok obsahuje knižnicu jQuery uvedením jej zdroja zo siete na doručovanie obsahu (CDN). Zabezpečuje, že knižnica jQuery je dostupná na použitie na webovej stránke.
  5. <body>: Toto je hlavná obsahová oblasť webovej stránky, kde umiestňujete viditeľný obsah a prvky používateľského rozhrania.
  6. <form>: Prvok formulára HTML, ktorý obsahuje vstupné polia. V tomto prípade sa používa na zapuzdrenie skrytého vstupného poľa.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Skryté vstupné pole, ktoré nebude viditeľné na webovej stránke. Je mu priradené ID „hiddenDateField“ a názov „hiddenDateField“.
  8. <script>: Toto je úvodná značka pre blok skriptu JavaScript, do ktorého môžete napísať kód JavaScript.
  9. $(document).ready(function() { ... });: Toto je blok kódu jQuery. Používa sa $(document).ready() funkcia, ktorá zabezpečí, že obsiahnutý kód sa spustí po úplnom načítaní stránky. Vo vnútri tejto funkcie:
    • const today = new Date(); vytvára nový Date objekt predstavujúci aktuálny dátum a čas.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); naformátuje dátum do reťazca s požadovaným formátom (mm/dd/rrrr) pomocou toLocaleDateString metóda.
  10. $('#hiddenDateField').val(formattedDate); vyberie skryté vstupné pole s ID „hiddenDateField“ pomocou jQuery a nastaví ho value k naformátovanému dátumu. Toto efektívne predvyplní skryté pole dnešným dátumom v zadanom formáte.

Kód jQuery zjednodušuje proces výberu a úpravy skrytého vstupného poľa v porovnaní s čistým JavaScriptom. Keď sa stránka načíta, skryté vstupné pole sa vyplní dnešným dátumom vo formáte mm/dd/rrrr a nie sú prítomné žiadne úvodné nuly, ako je uvedené v formattedDate variabilné.

Douglas Karr

Douglas Karr je CMO OpenINSIGHTS a zakladateľ spoločnosti Martech Zone. Douglas pomohol desiatkam úspešných startupov MarTech, asistoval pri due diligence v hodnote viac ako 5 miliárd dolárov v akvizíciách a investíciách Martech a naďalej pomáha spoločnostiam pri implementácii a automatizácii ich predajných a marketingových stratégií. Douglas je medzinárodne uznávaný odborník na digitálnu transformáciu a MarTech a rečník. Douglas je tiež publikovaným autorom príručky Dummie a knihy obchodného vedenia.

súvisiace články

Tlačidlo späť nahor
Zavrieť

Zistený blok reklám

Martech Zone vám tento obsah môže poskytnúť bezplatne, pretože naše stránky speňažujeme prostredníctvom príjmov z reklám, pridružených odkazov a sponzorstiev. Ocenili by sme, keby ste pri prezeraní našej stránky odstránili blokovanie reklám.