CRM- en dataplatforms

Hoe u een formulierveld vooraf kunt invullen met de datum van vandaag en JavaScript of JQuery

Hoewel veel oplossingen de mogelijkheid bieden om de datum bij elke formulierinvoer op te slaan, zijn er andere momenten waarop dit geen optie is. We moedigen onze klanten aan om een ​​verborgen veld aan hun site toe te voegen en deze informatie samen met de invoer door te geven, zodat ze kunnen volgen wanneer formulierinvoer wordt ingevoerd. Met JavaScript is dit eenvoudig.

Hoe u een formulierveld vooraf kunt invullen met de datum van vandaag en 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>

Laten we de meegeleverde HTML- en JavaScript-code stap voor stap opsplitsen:

  1. <!DOCTYPE html> en <html>: Dit zijn standaard HTML-documentdeclaraties waarin wordt aangegeven dat dit een HTML5-document is.
  2. <head>: deze sectie wordt doorgaans gebruikt om metagegevens over het document op te nemen, zoals de titel van de webpagina, die is ingesteld met behulp van de <title> element.
  3. <title>: Hiermee wordt de titel van de webpagina ingesteld op 'Datumvoorbevolking met JavaScript'.
  4. <body>: dit is het hoofdinhoudsgebied van de webpagina waar u de zichtbare inhoud en gebruikersinterface-elementen plaatst.
  5. <form>: Een formulierelement dat invoervelden kan bevatten. In dit geval wordt het gebruikt om het verborgen invoerveld te bevatten dat wordt gevuld met de datum van vandaag.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Dit is een verborgen invoerveld. Het verschijnt niet op de pagina, maar kan gegevens opslaan. Het heeft de ID “hiddenDateField” en de naam “hiddenDateField” gekregen voor identificatie en gebruik in JavaScript.
  7. <script>: Dit is de openingstag voor een JavaScript-scriptblok, waarin u JavaScript-code kunt schrijven.
  8. function getFormattedDate() { ... }: Dit definieert een JavaScript-functie genaamd getFormattedDate(). Binnen deze functie:
    • Het creëert een nieuwe Date object dat de huidige datum en tijd vertegenwoordigt met behulp van const today = new Date();.
    • Het formatteert de datum in een string met het gewenste formaat (mm/dd/jjjj) met behulp van today.toLocaleDateString(). De 'en-US' argument specificeert de landinstelling (Amerikaans Engels) voor de opmaak, en het object waarmee year, month en day eigenschappen definieert het datumformaat.
  9. return formattedDate;: Deze regel retourneert de opgemaakte datum als een tekenreeks.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Deze regel code:
    • u gebruikt document.getElementById('hiddenDateField') om het verborgen invoerveld met de ID ‘hiddenDateField’ te selecteren.
    • Stelt de value eigenschap van het geselecteerde invoerveld naar de waarde die wordt geretourneerd door de getFormattedDate() functie. Hierdoor wordt het verborgen veld gevuld met de datum van vandaag in het opgegeven formaat.

Het eindresultaat is dat wanneer de pagina wordt geladen, het verborgen invoerveld met ID “hiddenDateField” wordt gevuld met de datum van vandaag in het formaat mm/dd/jjjj zonder voorafgaande nullen, zoals gespecificeerd in het getFormattedDate() functie.

Hoe u een formulierveld vooraf kunt invullen met de datum van vandaag en 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>

Deze HTML- en JavaScript-code laat zien hoe u jQuery kunt gebruiken om een ​​verborgen invoerveld vooraf in te vullen met de datum van vandaag, opgemaakt als mm/dd/jjjj, zonder voorafgaande nullen. Laten we het stap voor stap opsplitsen:

  1. <!DOCTYPE html> en <html>: Dit zijn standaard HTML-documentdeclaraties die aangeven dat dit een HTML5-document is.
  2. <head>: deze sectie wordt gebruikt voor het opnemen van metagegevens en bronnen voor de webpagina.
  3. <title>: Stelt de titel van de webpagina in op "Datumvoorbevolking met jQuery en JavaScript Date Object."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: deze regel bevat de jQuery-bibliotheek door de bron ervan op te geven via een Content Delivery Network (CDN). Het zorgt ervoor dat de jQuery-bibliotheek beschikbaar is voor gebruik op de webpagina.
  5. <body>: dit is het hoofdinhoudsgebied van de webpagina waar u de zichtbare inhoud en gebruikersinterface-elementen plaatst.
  6. <form>: Een HTML-formulierelement dat wordt gebruikt om invoervelden te bevatten. In dit geval wordt het gebruikt om het verborgen invoerveld in te kapselen.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Een verborgen invoerveld dat niet zichtbaar is op de webpagina. Er is een ID 'hiddenDateField' en de naam 'hiddenDateField' aan toegewezen.
  8. <script>: Dit is de openingstag voor een JavaScript-scriptblok waarin u JavaScript-code kunt schrijven.
  9. $(document).ready(function() { ... });: Dit is een jQuery-codeblok. Het maakt gebruik van de $(document).ready() functie om ervoor te zorgen dat de ingesloten code wordt uitgevoerd nadat de pagina volledig is geladen. Binnen deze functie:
    • const today = new Date(); creëert een nieuw Date object dat de huidige datum en tijd vertegenwoordigt.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formatteert de datum in een string met het gewenste formaat (mm/dd/jjjj) met behulp van de toLocaleDateString methode.
  10. $('#hiddenDateField').val(formattedDate); selecteert het verborgen invoerveld met de ID “hiddenDateField” met behulp van jQuery en stelt het in value naar de geformatteerde datum. Hierdoor wordt het verborgen veld effectief vooraf ingevuld met de datum van vandaag in het opgegeven formaat.

De jQuery-code vereenvoudigt het proces van het selecteren en wijzigen van het verborgen invoerveld in vergelijking met puur JavaScript. Wanneer de pagina wordt geladen, wordt het verborgen invoerveld gevuld met de datum van vandaag in de notatie mm/dd/jjjj en zijn er geen voorloopnullen aanwezig, zoals gespecificeerd in de formattedDate variabel.

Douglas Karr

Douglas Karr is CMO van INZICHTEN openen en de oprichter van de Martech Zone. Douglas heeft tientallen succesvolle MarTech-startups geholpen, heeft geholpen bij het due diligence-onderzoek van meer dan $ 5 miljard aan Martech-overnames en -investeringen, en blijft bedrijven helpen bij het implementeren en automatiseren van hun verkoop- en marketingstrategieën. Douglas is een internationaal erkend expert en spreker op het gebied van digitale transformatie en MarTech. Douglas is ook een gepubliceerde auteur van een Dummie's-gids en een boek over zakelijk leiderschap.

Gerelateerde artikelen

Terug naar boven knop
Sluiten

Adblock gedetecteerd

Martech Zone kan u deze inhoud gratis aanbieden omdat we inkomsten genereren met onze site via advertentie-inkomsten, gelieerde links en sponsoring. We zouden het op prijs stellen als u uw adblocker zou verwijderen terwijl u onze site bekijkt.