CRM og dataplatforme

Sådan udfyldes et formularfelt med dagens dato og JavaScript eller JQuery

Mens mange løsninger giver mulighed for at gemme datoen med hver formularindtastning, er der andre tidspunkter, hvor det ikke er en mulighed. Vi opfordrer vores kunder til at tilføje et skjult felt til deres websted og videregive disse oplysninger sammen med indtastningen, så de kan spore, hvornår formularposter indtastes. Det er nemt at bruge JavaScript.

Sådan udfyldes et formularfelt med dagens dato og 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>

Lad os nedbryde den medfølgende HTML- og JavaScript-kode trin for trin:

  1. <!DOCTYPE html> , <html>: Dette er standard HTML-dokumenterklæringer, der angiver, at dette er et HTML5-dokument.
  2. <head>: Denne sektion bruges typisk til at inkludere metadata om dokumentet, såsom titlen på websiden, som indstilles ved hjælp af <title> element.
  3. <title>: Dette indstiller titlen på websiden til "Dato forudindfyldning med JavaScript."
  4. <body>: Dette er hovedindholdsområdet på websiden, hvor du placerer det synlige indhold og brugergrænsefladeelementer.
  5. <form>: Et formularelement, der kan indeholde inputfelter. I dette tilfælde bruges det til at indeholde det skjulte inputfelt, der vil blive udfyldt med dagens dato.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Dette er et skjult inputfelt. Det vises ikke på siden, men kan gemme data. Det er givet et ID på "hiddenDateField" og et navn på "hiddenDateField" til identifikation og brug i JavaScript.
  7. <script>: Dette er åbningskoden for en JavaScript-scriptblok, hvor du kan skrive JavaScript-kode.
  8. function getFormattedDate() { ... }: Dette definerer en JavaScript-funktion kaldet getFormattedDate(). Inde i denne funktion:
    • Det skaber en ny Date objekt, der repræsenterer den aktuelle dato og tid ved hjælp af const today = new Date();.
    • Den formaterer datoen til en streng med det ønskede format (mm/dd/åååå) vha today.toLocaleDateString(). Det 'en-US' argument angiver lokaliteten (amerikansk engelsk) for formatering og objektet med year, monthog day egenskaber definerer datoformatet.
  9. return formattedDate;: Denne linje returnerer den formaterede dato som en streng.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Denne kodelinje:
    • Du bruger document.getElementById('hiddenDateField') for at vælge det skjulte inputfelt med id'et "hiddenDateField."
    • Indstiller value egenskaben for det valgte inputfelt til den værdi, der returneres af getFormattedDate() fungere. Dette udfylder det skjulte felt med dagens dato i det angivne format.

Slutresultatet er, at når siden indlæses, udfyldes det skjulte inputfelt med ID "hiddenDateField" med dagens dato i formatet mm/dd/åååå uden indledende nuller, som angivet i getFormattedDate() funktion.

Sådan udfyldes et formularfelt med dagens dato og 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>

Denne HTML- og JavaScript-kode demonstrerer, hvordan man bruger jQuery til at udfylde et skjult inputfelt med dagens dato, formateret som mm/dd/åååå, uden indledende nuller. Lad os opdele det trin for trin:

  1. <!DOCTYPE html> , <html>: Dette er standard HTML-dokumenterklæringer, der angiver, at dette er et HTML5-dokument.
  2. <head>: Denne sektion bruges til at inkludere metadata og ressourcer til websiden.
  3. <title>: Indstiller titlen på websiden til "Date Prepopulation with jQuery and JavaScript Date Object."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Denne linje inkluderer jQuery-biblioteket ved at angive dets kilde fra et indholdsleveringsnetværk (CDN). Det sikrer, at jQuery-biblioteket er tilgængeligt til brug på websiden.
  5. <body>: Dette er hovedindholdsområdet på websiden, hvor du placerer det synlige indhold og brugergrænsefladeelementer.
  6. <form>: Et HTML-formularelement, der bruges til at indeholde inputfelter. I dette tilfælde bruges det til at indkapsle det skjulte inputfelt.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Et skjult inputfelt, der ikke vil være synligt på websiden. Det er tildelt et ID på "hiddenDateField" og et navn på "hiddenDateField."
  8. <script>: Dette er åbningskoden for en JavaScript-scriptblok, hvor du kan skrive JavaScript-kode.
  9. $(document).ready(function() { ... });: Dette er en jQuery-kodeblok. Den bruger $(document).ready() funktion for at sikre, at den indeholdte kode kører, efter at siden er fuldt indlæst. Inde i denne funktion:
    • const today = new Date(); skaber et nyt Date objekt, der repræsenterer den aktuelle dato og klokkeslæt.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formaterer datoen til en streng med det ønskede format (mm/dd/åååå) ved hjælp af toLocaleDateString fremgangsmåde.
  10. $('#hiddenDateField').val(formattedDate); vælger det skjulte inputfelt med ID'et "hiddenDateField" ved hjælp af jQuery og indstiller det value til den formaterede dato. Dette udfylder effektivt det skjulte felt med dagens dato i det angivne format.

jQuery-koden forenkler processen med at vælge og ændre det skjulte inputfelt sammenlignet med rent JavaScript. Når siden indlæses, udfyldes det skjulte inputfelt med dagens dato i formatet mm/dd/åååå, og der er ingen foranstillede nuller, som angivet i formattedDate variabel.

Douglas Karr

Douglas Karr er CMO for OpenINSIGHTS og grundlæggeren af Martech Zone. Douglas har hjulpet snesevis af succesfulde MarTech-startups, har hjulpet med due diligence på over $5 mia. i Martech-opkøb og -investeringer og fortsætter med at hjælpe virksomheder med at implementere og automatisere deres salgs- og marketingstrategier. Douglas er en internationalt anerkendt digital transformation og MarTech-ekspert og foredragsholder. Douglas er også udgivet forfatter til en Dummies guide og en bog om virksomhedsledelse.

Relaterede artikler

Tilbage til toppen knap
Luk

Adblock fundet

Martech Zone er i stand til at give dig dette indhold uden omkostninger, fordi vi tjener penge på vores websted gennem annonceindtægter, affilierede links og sponsorater. Vi ville sætte pris på, hvis du ville fjerne din annonceblokering, mens du ser vores websted.