CRM i platforme podataka

Kako unaprijed popuniti polje obrasca današnjim datumom i JavaScript ili JQuery

Dok mnoga rješenja nude mogućnost pohranjivanja datuma uz svaki unos obrasca, postoje drugi slučajevi kada to nije opcija. Podstičemo naše klijente da dodaju skriveno polje na svoju stranicu i proslijede ove informacije zajedno s unosom kako bi mogli pratiti kada se unose u obrazac. Koristeći JavaScript, ovo je lako.

Kako unaprijed popuniti polje obrasca današnjim datumom i JavaScript-om

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

Hajdemo korak po korak raščlaniti ponuđeni HTML i JavaScript kod:

  1. <!DOCTYPE html> i <html>: Ovo su standardne deklaracije HTML dokumenta koje navode da je ovo HTML5 dokument.
  2. <head>: Ovaj odjeljak se 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 “Prepopulacija datuma s JavaScript-om”.
  4. <body>: Ovo je glavni dio sadržaja web stranice gdje 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 da sadrži skriveno polje 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. Dat mu je ID "hiddenDateField" i ime "hiddenDateField" za identifikaciju i upotrebu u JavaScript-u.
  7. <script>: Ovo je početna oznaka za blok JavaScript skripte, gdje možete napisati JavaScript kod.
  8. function getFormattedDate() { ... }: Ovo definira JavaScript funkciju pod nazivom getFormattedDate(). Unutar ove funkcije:
    • To stvara novo Date objekt koji predstavlja trenutni datum i vrijeme koristeći const today = new Date();.
    • Formatira datum u niz sa željenim formatom (mm/dd/gggg) koristeći today.toLocaleDateString(). The 'en-US' argument specificira lokalizaciju (američki engleski) za formatiranje i objekt s year, month, I day svojstva definira format datuma.
  9. return formattedDate;: Ovaj red vraća formatirani datum kao niz.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Ova linija koda:
    • upotreba document.getElementById('hiddenDateField') da odaberete skriveno polje za unos sa ID-om “hiddenDateField”.
    • Postavlja value svojstvo odabranog polja za unos na vrijednost koju vraća getFormattedDate() funkcija. Ovo popunjava skriveno polje današnjim datumom u navedenom formatu.

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

Kako unaprijed popuniti polje obrasca današnjim datumom i jQuery-jem

<!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 kod pokazuje kako koristiti jQuery za prethodno popunjavanje skrivenog polja za unos današnjim datumom, formatiranim kao mm/dd/gggg, bez vodećih nula. Razložimo korak po korak:

  1. <!DOCTYPE html> i <html>: Ovo su standardne deklaracije HTML dokumenta koje ukazuju da je ovo HTML5 dokument.
  2. <head>: Ovaj odjeljak se koristi za uključivanje metapodataka i resursa za web stranicu.
  3. <title>: Postavlja naslov web stranice na "Prepopulacija datuma s jQuery i JavaScript objektom datuma."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Ova linija uključuje jQuery biblioteku specificirajući njen izvor iz mreže za isporuku sadržaja (CDN). Osigurava da je jQuery biblioteka dostupna za korištenje na web stranici.
  5. <body>: Ovo je glavni dio sadržaja web stranice gdje postavljate vidljivi sadržaj i elemente korisničkog sučelja.
  6. <form>: HTML element obrasca koji se koristi da sadrži 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 napisati JavaScript kod.
  9. $(document).ready(function() { ... });: Ovo je blok jQuery koda. Koristi se $(document).ready() funkcija da osigura da se sadržani kod pokrene nakon što se stranica potpuno 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', { ... }); formatira datum u niz sa željenim formatom (mm/dd/gggg) koristeći toLocaleDateString metoda.
  10. $('#hiddenDateField').val(formattedDate); odabire skriveno polje za unos sa ID-om “hiddenDateField” koristeći jQuery i postavlja value do formatiranog datuma. Ovo efektivno unapred popunjava skriveno polje današnjim datumom u navedenom formatu.

jQuery kod pojednostavljuje proces odabira i modifikacije skrivenog polja za unos u poređenju sa č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 promenljiva.

Douglas Karr

Douglas Karr je CMO of OpenINSIGHTS i osnivač Martech Zone. Douglas je pomogao desetinama uspješnih MarTech startupova, pomogao je u dubinskom pregledu od preko 5 milijardi dolara u Martechovim akvizicijama i investicijama, te nastavlja da pomaže kompanijama u implementaciji i automatizaciji njihovih prodajnih i marketinških strategija. Douglas je međunarodno priznati stručnjak za digitalnu transformaciju i MarTech stručnjak i govornik. Douglas je također objavljeni autor Dummie's vodiča i knjige o poslovnom liderstvu.

Vezani članci

Nazad na vrh dugmeta
blizu

Adblock otkriven

Martech Zone je u mogućnosti da vam pruži ovaj sadržaj bez ikakvih troškova jer mi unovčavamo našu stranicu putem prihoda od oglasa, partnerskih veza i sponzorstava. Bili bismo zahvalni ako biste uklonili svoj blokator oglasa dok gledate našu web stranicu.