CRM és adatplatformok

Hogyan lehet előre kitölteni egy űrlapmezőt a mai dátummal és JavaScripttel vagy JQuery-vel

Míg sok megoldás lehetőséget kínál a dátum tárolására minden űrlapbejegyzésnél, máskor ez nem lehetséges. Arra biztatjuk ügyfeleinket, hogy adjanak hozzá egy rejtett mezőt webhelyükhöz, és adják át ezt az információt a bejegyzéssel együtt, hogy nyomon tudják követni az űrlapbejegyzések beírását. JavaScript használatával ez egyszerű.

Hogyan lehet előre kitölteni egy űrlapmezőt a mai dátummal és JavaScripttel

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

Lépésről lépésre bontsuk fel a megadott HTML és JavaScript kódot:

  1. <!DOCTYPE html> és a <html>: Ezek szabványos HTML-dokumentum-deklarációk, amelyek meghatározzák, hogy ez egy HTML5-dokumentum.
  2. <head>: Ez a rész általában a dokumentum metaadatainak megadására szolgál, például a weboldal címére, amelyet a <title> elem.
  3. <title>: Ezzel a weboldal címét a következőre állítja: „Dátum előre feltöltése JavaScripttel”.
  4. <body>: Ez a weboldal fő tartalmi területe, ahol elhelyezheti a látható tartalmat és a felhasználói felület elemeit.
  5. <form>: Olyan űrlapelem, amely beviteli mezőket tartalmazhat. Ebben az esetben ez a rejtett beviteli mezőt tartalmazza, amely a mai dátummal lesz feltöltve.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ez egy rejtett beviteli mező. Nem jelenik meg az oldalon, de adatokat tárolhat. A JavaScriptben való azonosítás és használat érdekében „hiddenDateField” azonosítót és „hiddenDateField” nevet kapott.
  7. <script>: Ez egy JavaScript szkriptblokk nyitócímkéje, ahová JavaScript kódot írhat.
  8. function getFormattedDate() { ... }: Ez egy úgynevezett JavaScript függvényt határoz meg getFormattedDate(). Ezen a funkción belül:
    • Újat hoz létre Date objektum, amely az aktuális dátumot és időt reprezentálja const today = new Date();.
    • A dátumot a kívánt formátumú (hh/nn/éééé) karakterláncba formálja a segítségével today.toLocaleDateString() Az 'en-US' Az argumentum megadja a formázáshoz szükséges területi beállítást (amerikai angol), és az objektumot year, monthés day tulajdonság határozza meg a dátumformátumot.
  9. return formattedDate;: Ez a sor karakterláncként adja vissza a formázott dátumot.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Ez a kódsor:
    • Felhasználás document.getElementById('hiddenDateField') a „hiddenDateField” azonosítójú rejtett beviteli mező kiválasztásához.
    • Beállítja a value a kiválasztott beviteli mező tulajdonságát a visszaadott értékre getFormattedDate() funkció. Ez feltölti a rejtett mezőt a mai dátummal a megadott formátumban.

A végeredmény az, hogy az oldal betöltésekor a „hiddenDateField” azonosítójú rejtett beviteli mező a mai dátummal lesz feltöltve a következő formátumban: mm/nn/yyyy, kezdő nullák nélkül, amint azt a getFormattedDate() funkciót.

Hogyan lehet előre kitölteni egy űrlapmezőt a mai dátummal és a jQuery-vel

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

Ez a HTML- és JavaScript-kód bemutatja, hogyan lehet a jQuery használatával előre kitölteni egy rejtett beviteli mezőt a mai dátummal, éééé.hh/nn formátumban, kezdő nullák nélkül. Bontsuk le lépésről lépésre:

  1. <!DOCTYPE html> és a <html>: Ezek szabványos HTML-dokumentum-deklarációk, amelyek jelzik, hogy ez egy HTML5-dokumentum.
  2. <head>: Ez a rész a weboldal metaadatainak és erőforrásainak megadására szolgál.
  3. <title>: Beállítja a weboldal címét „Dátum előpopuláció jQuery és JavaScript dátumobjektum segítségével”.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Ez a sor tartalmazza a jQuery könyvtárat a tartalomszolgáltató hálózatból (CDN) származó forrás megadásával. Ez biztosítja, hogy a jQuery könyvtár elérhető legyen a weboldalon.
  5. <body>: Ez a weboldal fő tartalmi területe, ahol elhelyezheti a látható tartalmat és a felhasználói felület elemeit.
  6. <form>: HTML űrlapelem, amely beviteli mezőket tartalmaz. Ebben az esetben a rejtett beviteli mező beágyazására szolgál.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Rejtett beviteli mező, amely nem lesz látható a weboldalon. Hozzá van rendelve egy „hiddenDateField” azonosító és „hiddenDateField” név.
  8. <script>: Ez egy JavaScript szkriptblokk nyitócímkéje, amelybe JavaScript kódot írhat.
  9. $(document).ready(function() { ... });: Ez egy jQuery kódblokk. Használja a $(document).ready() funkció biztosítja, hogy a benne lévő kód az oldal teljes betöltése után lefusson. Ezen a funkción belül:
    • const today = new Date(); újat hoz létre Date objektum, amely az aktuális dátumot és időt reprezentálja.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); a dátumot a kívánt formátumú (hh/nn/éééé) karakterláncba formálja a segítségével toLocaleDateString módszer.
  10. $('#hiddenDateField').val(formattedDate); kiválasztja a „hiddenDateField” azonosítójú rejtett beviteli mezőt a jQuery segítségével, és beállítja value a formázott dátumig. Ez gyakorlatilag előre kitölti a rejtett mezőt a mai dátummal a megadott formátumban.

A jQuery kód leegyszerűsíti a rejtett beviteli mező kiválasztásának és módosításának folyamatát a tiszta JavaScript-hez képest. Amikor az oldal betöltődik, a rejtett beviteli mező a mai dátummal van feltöltve éééé/hh/nn formátumban, és nincsenek benne kezdő nullák, amint azt a formattedDate változót.

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.