CRM ir duomenų platformos

Kaip iš anksto užpildyti formos lauką naudojant šiandienos datą ir „JavaScript“ arba „JQuery“.

Nors daugelis sprendimų suteikia galimybę išsaugoti datą kiekviename formos įraše, kartais tai nėra parinktis. Raginame savo klientus į savo svetainę įtraukti paslėptą lauką ir perduoti šią informaciją kartu su įrašu, kad jie galėtų stebėti, kada įvedami formos įrašai. Naudojant JavaScript, tai paprasta.

Kaip iš anksto užpildyti formos lauką naudojant šiandienos datą ir „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>

Žingsnis po žingsnio išskaidykime pateiktą HTML ir JavaScript kodą:

  1. <!DOCTYPE html> ir <html>: Tai yra standartinės HTML dokumento deklaracijos, nurodančios, kad tai yra HTML5 dokumentas.
  2. <head>: ši skiltis paprastai naudojama metaduomenims apie dokumentą įtraukti, pvz., tinklalapio pavadinimui, kuris nustatomas naudojant <title> elementas.
  3. <title>: Tai nustato tinklalapio pavadinimą į „Išankstinis datos užpildymas naudojant JavaScript“.
  4. <body>: Tai yra pagrindinė tinklalapio turinio sritis, kurioje pateikiate matomą turinį ir vartotojo sąsajos elementus.
  5. <form>: formos elementas, kuriame gali būti įvesties laukų. Šiuo atveju jame yra paslėptas įvesties laukas, kuris bus užpildytas šios dienos data.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Tai paslėptas įvesties laukas. Jis nerodomas puslapyje, bet gali saugoti duomenis. Jam suteiktas ID „hiddenDateField“ ir pavadinimas „hiddenDateField“, kad būtų galima identifikuoti ir naudoti „JavaScript“.
  7. <script>: Tai yra „JavaScript“ scenarijaus bloko pradžios žyma, kurioje galite rašyti „JavaScript“ kodą.
  8. function getFormattedDate() { ... }: Tai apibrėžia JavaScript funkciją, vadinamą getFormattedDate(). Šios funkcijos viduje:
    • Tai sukuria naują Date objektas, vaizduojantis dabartinę datą ir laiką naudojant const today = new Date();.
    • Jis suformatuoja datą į eilutę norimu formatu (mm/dd/yyyy). today.toLocaleDateString(), 'en-US' argumentas nurodo formatavimo lokalę (amerikiečių anglų k.) ir objektą su year, month, ir day ypatybės apibrėžia datos formatą.
  9. return formattedDate;: ši eilutė grąžina suformatuotą datą kaip eilutę.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Ši kodo eilutė:
    • Naudoja document.getElementById('hiddenDateField') norėdami pasirinkti paslėptą įvesties lauką su ID „hiddenDateField“.
    • Nustato value pasirinkto įvesties lauko savybę į vertę, kurią grąžino getFormattedDate() funkcija. Taip paslėptas laukas užpildomas šios dienos data nurodytu formatu.

Galutinis rezultatas yra toks, kad kai puslapis įkeliamas, paslėptas įvesties laukas su ID „hiddenDateField“ užpildomas šios dienos data formatu mm/dd/yyyy be nulių priekyje, kaip nurodyta getFormattedDate() funkcija.

Kaip iš anksto užpildyti formos lauką naudojant šiandienos datą ir „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>

Šis HTML ir „JavaScript“ kodas parodo, kaip naudoti „jQuery“ paslėptame įvesties lauke iš anksto užpildyti šios dienos data, suformatuota kaip mm/dd/yyyy, be nulių priekyje. Išskaidykime jį žingsnis po žingsnio:

  1. <!DOCTYPE html> ir <html>: tai yra standartinės HTML dokumento deklaracijos, nurodančios, kad tai yra HTML5 dokumentas.
  2. <head>: ši skiltis naudojama tinklalapio metaduomenims ir ištekliams įtraukti.
  3. <title>: nustato tinklalapio pavadinimą į „Išankstinis datos užpildymas naudojant „jQuery“ ir „JavaScript“ datos objektą.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Šioje eilutėje yra „jQuery“ biblioteka, nurodant jos šaltinį iš turinio pristatymo tinklo (CDN). Tai užtikrina, kad jQuery biblioteką galima naudoti tinklalapyje.
  5. <body>: Tai yra pagrindinė tinklalapio turinio sritis, kurioje pateikiate matomą turinį ir vartotojo sąsajos elementus.
  6. <form>: HTML formos elementas, naudojamas įvesties laukams laikyti. Šiuo atveju jis naudojamas paslėptam įvesties laukui įterpti.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: paslėptas įvesties laukas, kuris nebus matomas tinklalapyje. Jai priskirtas ID „hiddenDateField“ ir pavadinimas „hiddenDateField“.
  8. <script>: tai yra „JavaScript“ scenarijaus bloko, kuriame galite rašyti „JavaScript“ kodą, pradžios žyma.
  9. $(document).ready(function() { ... });: Tai jQuery kodo blokas. Jis naudoja $(document).ready() funkcija, užtikrinanti, kad esantis kodas būtų paleistas, kai puslapis bus visiškai įkeltas. Šios funkcijos viduje:
    • const today = new Date(); sukuria naują Date objektas, vaizduojantis dabartinę datą ir laiką.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formatuoja datą į eilutę norimu formatu (mm/dd/yyyy), naudodama toLocaleDateString metodas.
  10. $('#hiddenDateField').val(formattedDate); pasirenka paslėptą įvesties lauką su ID „hiddenDateField“, naudodamas „jQuery“ ir nustato jo value iki suformatuotos datos. Tai efektyviai iš anksto užpildo paslėptą lauką šios dienos data nurodytu formatu.

„jQuery“ kodas supaprastina paslėpto įvesties lauko pasirinkimo ir modifikavimo procesą, palyginti su grynu „JavaScript“. Kai puslapis įkeliamas, paslėptas įvesties laukas užpildomas šios dienos data formatu mm/dd/yyyy, o priešakinių nulių nėra, kaip nurodyta formattedDate kintamasis.

Douglas Karr

Douglas Karr yra BRO OpenINSIGHTS ir įkūrėjas Martech Zone. Douglas padėjo daugybei sėkmingų MarTech pradedančiųjų įmonių, padėjo atlikti daugiau nei 5 mlrd. Douglas yra tarptautiniu mastu pripažintas skaitmeninės transformacijos ir MarTech ekspertas bei pranešėjas. Douglasas taip pat yra paskelbtas Dummie vadovo ir verslo lyderystės knygos autorius.

Susiję straipsniai

Atgal į viršų mygtukas
arti

Aptiktas skelbimų blokas

Martech Zone gali pateikti jums šį turinį nemokamai, nes gauname pajamų iš savo svetainės per pajamas iš skelbimų, filialų nuorodas ir rėmimą. Būtume dėkingi, jei peržiūrėdami mūsų svetainę pašalintumėte skelbimų blokavimo priemonę.