CRM i podatkovne platforme

Kako unaprijed popuniti polje obrasca s današnjim datumom i JavaScriptom ili JQueryjem

Iako mnoga rješenja nude mogućnost pohranjivanja datuma sa svakim unosom u obrazac, postoje slučajevi kada to nije opcija. Potičemo naše klijente da dodaju skriveno polje na svoje web mjesto i proslijede ove podatke zajedno s unosom kako bi mogli pratiti kada se unose obrasci. Koristeći JavaScript, ovo je jednostavno.

Kako unaprijed popuniti polje obrasca s današnjim datumom i 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>

Raščlanimo navedeni HTML i JavaScript kod korak po korak:

  1. <!DOCTYPE html> i <html>: Ovo su standardne deklaracije HTML dokumenta koje navode da je ovo HTML5 dokument.
  2. <head>: Ovaj se odjeljak obično koristi za uključivanje metapodataka o dokumentu, kao što je naslov web stranice, koji se postavlja pomoću <title> element.
  3. <title>: Ovo postavlja naslov web-stranice na "Pretpopulacija datuma s JavaScriptom."
  4. <body>: Ovo je područje glavnog sadržaja web-stranice na koje postavljate vidljivi sadržaj i elemente korisničkog sučelja.
  5. <form>: Element obrasca koji može sadržavati polja za unos. U ovom slučaju koristi se za sadržavanje skrivenog polja za unos koje će biti popunjeno današnjim datumom.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ovo je skriveno polje za unos. Ne pojavljuje se na stranici, ali može pohraniti podatke. Dodijeljen mu je ID "hiddenDateField" i naziv "hiddenDateField" za identifikaciju i upotrebu u JavaScriptu.
  7. <script>: Ovo je početna oznaka za blok JavaScript skripte, gdje možete pisati JavaScript kod.
  8. function getFormattedDate() { ... }: Ovo definira JavaScript funkciju koja se zove getFormattedDate(). Unutar ove funkcije:
    • Stvara novi Date objekt koji predstavlja trenutni datum i vrijeme pomoću const today = new Date();.
    • On formatira datum u niz u željenom formatu (mm/dd/gggg). today.toLocaleDateString(), 'en-US' argument navodi lokalizaciju (američki engleski) za oblikovanje, a objekt sa year, monthi day svojstva definira format datuma.
  9. return formattedDate;: Ovaj redak vraća formatirani datum kao niz.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Ovaj redak koda:
    • Koristi document.getElementById('hiddenDateField') za odabir skrivenog polja za unos s ID-om "hiddenDateField."
    • Postavlja value svojstvo odabranog polja za unos na vrijednost koju vraća getFormattedDate() funkcija. Time se skriveno polje popunjava današnjim datumom u navedenom formatu.

Krajnji rezultat je da kada se stranica učita, skriveno polje za unos s ID-om "hiddenDateField" popunjava se današnjim datumom u formatu mm/dd/gggg bez vodećih nula, kao što je navedeno u getFormattedDate() funkcija.

Kako unaprijed popuniti polje obrasca s današnjim datumom i jQueryjem

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

Ovaj HTML i JavaScript kôd demonstrira kako koristiti jQuery za prethodno popunjavanje skrivenog polja za unos današnjim datumom, formatiranim kao mm/dd/gggg, bez nula na početku. Razdvojimo korak po korak:

  1. <!DOCTYPE html> i <html>: Ovo su standardne deklaracije HTML dokumenta koje pokazuju da je ovo HTML5 dokument.
  2. <head>: Ovaj se odjeljak koristi za uključivanje metapodataka i resursa za web stranicu.
  3. <title>: Postavlja naslov web-stranice na "Pretpopulacija datuma s jQuery i JavaScript objektom datuma."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Ovaj redak uključuje jQuery biblioteku navodeći njezin izvor iz mreže za isporuku sadržaja (CDN). Osigurava da je biblioteka jQuery dostupna za korištenje na web stranici.
  5. <body>: Ovo je područje glavnog sadržaja web-stranice na koje postavljate vidljivi sadržaj i elemente korisničkog sučelja.
  6. <form>: Element HTML obrasca koji se koristi za sadržavanje polja za unos. U ovom slučaju, koristi se za kapsuliranje skrivenog polja za unos.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: skriveno polje za unos koje neće biti vidljivo na web stranici. Dodijeljen mu je ID "hiddenDateField" i naziv "hiddenDateField".
  8. <script>: Ovo je početna oznaka za blok JavaScript skripte gdje možete pisati JavaScript kod.
  9. $(document).ready(function() { ... });: Ovo je jQuery blok koda. Koristi se $(document).ready() kako bi se osiguralo pokretanje sadržanog koda nakon što se stranica u potpunosti učita. Unutar ove funkcije:
    • const today = new Date(); stvara novi Date objekt koji predstavlja trenutni datum i vrijeme.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); oblikuje datum u niz sa željenim formatom (mm/dd/gggg) pomoću toLocaleDateString metoda.
  10. $('#hiddenDateField').val(formattedDate); odabire skriveno polje za unos s ID-om “hiddenDateField” koristeći jQuery i postavlja svoje value na formatirani datum. Ovo efektivno unaprijed popunjava skriveno polje današnjim datumom u navedenom formatu.

jQuery kôd pojednostavljuje postupak odabira i izmjene skrivenog polja za unos u usporedbi s čistim JavaScriptom. Kada se stranica učita, skriveno polje za unos popunjava se današnjim datumom u mm/dd/gggg formatu i nema vodećih nula, kao što je navedeno u formattedDate promjenjiva.

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desecima uspješnih MarTech startupa, pomogao je u due diligence-u od preko 5 milijardi USD u Martech akvizicijama i ulaganjima te nastavlja pomagati tvrtkama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak i govornik za digitalnu transformaciju i MarTech. Douglas je također objavljeni autor Dummie's guide i knjige o poslovnom vodstvu.

Vezani članci

Natrag na vrh
Blizu

Otkriven je Adblock

Martech Zone može vam pružiti ovaj sadržaj bez ikakvih troškova jer svoju web stranicu unovčavamo putem prihoda od oglasa, pridruženih veza i sponzorstava. Cijenili bismo kada biste uklonili program za blokiranje oglasa dok pregledavate našu stranicu.