CRM och dataplattformar

Hur man förfyller ett formulärfält med dagens datum och JavaScript eller JQuery

Medan många lösningar erbjuder möjligheten att lagra datumet med varje formulärinmatning, finns det andra tillfällen då det inte är ett alternativ. Vi uppmuntrar våra kunder att lägga till ett dolt fält på sin webbplats och skicka denna information tillsammans med posten så att de kan spåra när formulärposter skrivs in. Med JavaScript är detta enkelt.

Hur man förfyller ett formulärfält med dagens datum och 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>

Låt oss dela upp den medföljande HTML- och JavaScript-koden steg för steg:

  1. <!DOCTYPE html> och <html>: Dessa är standarddeklarationer för HTML-dokument som anger att detta är ett HTML5-dokument.
  2. <head>: Det här avsnittet används vanligtvis för att inkludera metadata om dokumentet, som titeln på webbsidan, som ställs in med <title> elementet.
  3. <title>: Detta ställer in titeln på webbsidan till "Datum Prepopulation with JavaScript."
  4. <body>: Detta är huvudinnehållsområdet på webbsidan där du placerar det synliga innehållet och användargränssnittselementen.
  5. <form>: Ett formulärelement som kan innehålla inmatningsfält. I det här fallet används det för att innehålla det dolda inmatningsfältet som kommer att fyllas i med dagens datum.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Detta är ett dolt inmatningsfält. Det visas inte på sidan men kan lagra data. Den har fått ett ID för "hiddenDateField" och ett namn på "hiddenDateField" för identifiering och användning i JavaScript.
  7. <script>: Detta är öppningstaggen för ett JavaScript-skriptblock, där du kan skriva JavaScript-kod.
  8. function getFormattedDate() { ... }: Detta definierar en JavaScript-funktion som kallas getFormattedDate(). Inuti denna funktion:
    • Det skapar ett nytt Date objekt som representerar aktuellt datum och tid med hjälp av const today = new Date();.
    • Den formaterar datumet till en sträng med önskat format (mm/dd/åååå) med hjälp av today.toLocaleDateString(). De 'en-US' argument anger lokalen (amerikansk engelska) för formatering och objektet med year, monthoch day egenskaper definierar datumformatet.
  9. return formattedDate;: Den här raden returnerar det formaterade datumet som en sträng.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Denna kodrad:
    • du använder document.getElementById('hiddenDateField') för att välja det dolda inmatningsfältet med ID:t "hiddenDateField."
    • Ställer in value egenskapen för det valda inmatningsfältet till värdet som returneras av getFormattedDate() fungera. Detta fyller det dolda fältet med dagens datum i det angivna formatet.

Slutresultatet är att när sidan laddas fylls det dolda inmatningsfältet med ID "hiddenDateField" i med dagens datum i formatet mm/dd/åååå utan inledande nollor, som specificerats i getFormattedDate() funktion.

Hur man förfyller ett formulärfält med dagens datum och 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>

Den här HTML- och JavaScript-koden visar hur man använder jQuery för att förfylla ett dolt inmatningsfält med dagens datum, formaterat som mm/dd/åååå, utan inledande nollor. Låt oss dela upp det steg för steg:

  1. <!DOCTYPE html> och <html>: Dessa är standarddeklarationer för HTML-dokument som anger att detta är ett HTML5-dokument.
  2. <head>: Det här avsnittet används för att inkludera metadata och resurser för webbsidan.
  3. <title>: Ställer in webbsidans titel till "Date Prepopulation with jQuery and JavaScript Date Object."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Den här raden inkluderar jQuery-biblioteket genom att ange dess källa från ett innehållsleveransnätverk (CDN). Det säkerställer att jQuery-biblioteket är tillgängligt för användning på webbsidan.
  5. <body>: Detta är huvudinnehållsområdet på webbsidan där du placerar det synliga innehållet och användargränssnittselementen.
  6. <form>: Ett HTML-formulärelement som används för att innehålla inmatningsfält. I det här fallet används den för att kapsla in det dolda inmatningsfältet.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ett dolt inmatningsfält som inte kommer att vara synligt på webbsidan. Den har tilldelats ett ID för "hiddenDateField" och namnet "hiddenDateField."
  8. <script>: Detta är öppningstaggen för ett JavaScript-skriptblock där du kan skriva JavaScript-kod.
  9. $(document).ready(function() { ... });: Detta är ett jQuery-kodblock. Den använder $(document).ready() funktion för att säkerställa att den inneslutna koden körs efter att sidan har laddats helt. Inuti denna funktion:
    • const today = new Date(); skapar en ny Date objekt som representerar aktuellt datum och tid.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formaterar datumet till en sträng med önskat format (mm/dd/åååå) med hjälp av toLocaleDateString metod.
  10. $('#hiddenDateField').val(formattedDate); väljer det dolda inmatningsfältet med ID "hiddenDateField" med jQuery och ställer in dess value till det formaterade datumet. Detta fyller effektivt i det dolda fältet med dagens datum i det angivna formatet.

jQuery-koden förenklar processen att välja och ändra det dolda inmatningsfältet jämfört med rent JavaScript. När sidan laddas fylls det dolda inmatningsfältet i med dagens datum i formatet mm/dd/åååå, och inga inledande nollor finns, enligt vad som anges i formattedDate variabel.

Douglas Karr

Douglas Karr är CMO för Öppna INSIGHTS och grundaren av Martech Zone. Douglas har hjälpt dussintals framgångsrika MarTech-startups, har hjälpt till med due diligence på över $5 miljarder i Martech-förvärv och investeringar, och fortsätter att hjälpa företag att implementera och automatisera sina försäljnings- och marknadsföringsstrategier. Douglas är en internationellt erkänd digital transformations- och MarTech-expert och talare. Douglas är också en publicerad författare till en Dummies guide och en bok om företagsledarskap.

Relaterade artiklar

Tillbaka till toppen knappen
Stänga

Adblock upptäckt

Martech Zone kan ge dig detta innehåll utan kostnad eftersom vi tjänar pengar på vår webbplats genom annonsintäkter, affiliate-länkar och sponsring. Vi skulle uppskatta om du tar bort din annonsblockerare när du tittar på vår webbplats.