CRM ja andmeplatvormid

Vormivälja eeltäitmine tänase kuupäeva ja JavaScripti või JQueryga

Kuigi paljud lahendused pakuvad võimalust salvestada kuupäev iga vormikirje juurde, on mõnikord aegu, mil see pole võimalik. Julgustame oma kliente lisama oma saidile peidetud välja ja edastama selle teabe koos kirjega, et nad saaksid jälgida vormikirjete sisestamist. JavaScripti kasutades on see lihtne.

Vormivälja eeltäitmine tänase kuupäeva ja JavaScriptiga

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

Jagame esitatud HTML-i ja JavaScripti koodi samm-sammult lahti:

  1. <!DOCTYPE html> ja <html>: need on standardsed HTML-dokumendi deklaratsioonid, mis täpsustavad, et tegemist on HTML5-dokumendiga.
  2. <head>: seda jaotist kasutatakse tavaliselt dokumendi metaandmete (nt veebilehe pealkirja) lisamiseks, mis määratakse <title> element.
  3. <title>: see määrab veebilehe pealkirjaks „Kuupäeva eeltäitmine JavaScriptiga”.
  4. <body>: see on veebilehe peamine sisuala, kuhu paigutate nähtava sisu ja kasutajaliidese elemendid.
  5. <form>: vormielement, mis võib sisaldada sisestusvälju. Sel juhul kasutatakse seda peidetud sisestusvälja sisaldamiseks, mis täidetakse tänase kuupäevaga.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: see on peidetud sisestusväli. See ei ilmu lehel, kuid võib andmeid salvestada. Sellele antakse JavaScriptis tuvastamiseks ja kasutamiseks ID "hiddenDateField" ja nimi "hiddenDateField".
  7. <script>: see on JavaScripti skriptiploki avamärgend, kuhu saate kirjutada JavaScripti koodi.
  8. function getFormattedDate() { ... }: see määratleb JavaScripti funktsiooni getFormattedDate(). Selle funktsiooni sees:
    • See loob uue Date objekt, mis esindab praegust kuupäeva ja kellaaega kasutades const today = new Date();.
    • See vormindab kuupäeva soovitud vorminguga stringiks (kk/pp/aaaa), kasutades today.toLocaleDateString(). 'en-US' argument määrab vormingu lokaadi (Ameerika inglise keel) ja objekti koos year, monthja day atribuudid määrab kuupäeva vormingu.
  9. return formattedDate;: see rida tagastab vormindatud kuupäeva stringina.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: See koodirida:
    • sa kasutad document.getElementById('hiddenDateField') peidetud sisestusvälja valimiseks ID-ga "hiddenDateField".
    • Määrab value valitud sisestusvälja atribuut väärtusele, mille tagastas getFormattedDate() funktsiooni. See täidab peidetud välja tänase kuupäevaga määratud vormingus.

Lõpptulemus on see, et lehe laadimisel täidetakse peidetud sisestusväli ID-ga “hiddenDateField” tänase kuupäevaga vormingus kk/pp/aaaa ilma eesolevate nullideta, nagu on määratud getFormattedDate() funktsiooni.

Tänase kuupäeva ja jQueryga vormivälja eeltäitmine

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

See HTML- ja JavaScripti kood näitab, kuidas kasutada jQueryt peidetud sisestusvälja eeltäitmiseks tänase kuupäevaga, vormindatud kujul kk/pp/aaaa, ilma eesolevate nullideta. Jagame selle samm-sammult lahti:

  1. <!DOCTYPE html> ja <html>: need on standardsed HTML-dokumendi deklaratsioonid, mis näitavad, et tegemist on HTML5-dokumendiga.
  2. <head>: seda jaotist kasutatakse veebilehe metaandmete ja ressursside lisamiseks.
  3. <title>: määrab veebilehe pealkirjaks „Kuupäeva eeltäitmine jQuery ja JavaScripti kuupäevaobjektiga”.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: see rida sisaldab jQuery teeki, määrates selle allika sisuedastusvõrgust (CDN). See tagab, et jQuery teek on veebilehel kasutamiseks saadaval.
  5. <body>: see on veebilehe peamine sisuala, kuhu paigutate nähtava sisu ja kasutajaliidese elemendid.
  6. <form>: HTML-vormi element, mida kasutatakse sisestusväljade sisaldamiseks. Sel juhul kasutatakse seda peidetud sisestusvälja kapseldamiseks.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: peidetud sisestusväli, mis ei ole veebilehel nähtav. Sellele on määratud ID "hiddenDateField" ja nimi "hiddenDateField".
  8. <script>: see on JavaScripti skriptiploki avamärgend, kuhu saab kirjutada JavaScripti koodi.
  9. $(document).ready(function() { ... });: see on jQuery koodiplokk. See kasutab $(document).ready() funktsiooni, et tagada sisalduva koodi käitamine pärast lehe täielikku laadimist. Selle funktsiooni sees:
    • const today = new Date(); loob uue Date objekt, mis tähistab praegust kuupäeva ja kellaaega.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); vormindab kuupäeva soovitud vorminguga stringiks (kk/pp/aaaa), kasutades nuppu toLocaleDateString meetod.
  10. $('#hiddenDateField').val(formattedDate); valib jQuery abil peidetud sisestusvälja ID-ga “hiddenDateField” ja määrab selle value vormindatud kuupäevani. See täidab peidetud välja tõhusalt tänase kuupäevaga määratud vormingus.

JQuery kood lihtsustab peidetud sisestusvälja valimise ja muutmise protsessi võrreldes puhta JavaScriptiga. Lehe laadimisel täidetakse peidetud sisestusväljale tänane kuupäev vormingus kk/pp/aaaa ja eesolevaid nulle ei esine, nagu on määratud formattedDate muutuja.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja selle asutaja Martech Zone. Douglas on aidanud kümneid edukaid MarTechi idufirmasid, on aidanud Martechi omandamisel ja investeeringutel üle 5 miljardi dollari ulatuses läbi viia ning jätkab ettevõtete abistamist nende müügi- ja turundusstrateegiate rakendamisel ja automatiseerimisel. Douglas on rahvusvaheliselt tunnustatud digitaalse transformatsiooni ja MarTechi ekspert ja esineja. Douglas on ka Dummie juhendi ja ärijuhtimise raamatu autor.

seotud artiklid

Tagasi üles nupule
lähedal

Adblock tuvastatud

Martech Zone suudab teile seda sisu tasuta pakkuda, kuna teenime oma saidi rahaks reklaamitulu, sidusettevõtete linkide ja sponsorluse kaudu. Oleksime tänulikud, kui eemaldaksite meie saidi vaatamise ajal oma reklaamiblokeerija.