CRM- und Datenplattformen

So füllen Sie ein Formularfeld vorab mit dem heutigen Datum und JavaScript oder JQuery aus

Während viele Lösungen die Möglichkeit bieten, das Datum bei jedem Formulareintrag zu speichern, gibt es auch Fälle, in denen dies nicht möglich ist. Wir empfehlen unseren Kunden, ihrer Website ein verstecktes Feld hinzuzufügen und diese Informationen zusammen mit dem Eintrag weiterzugeben, damit sie verfolgen können, wann Formulareinträge eingegeben werden. Mit JavaScript ist dies einfach.

So füllen Sie ein Formularfeld mit dem heutigen Datum und JavaScript vorab aus

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

Lassen Sie uns den bereitgestellten HTML- und JavaScript-Code Schritt für Schritt aufschlüsseln:

  1. <!DOCTYPE html> und <html>: Dies sind Standard-HTML-Dokumentdeklarationen, die angeben, dass es sich um ein HTML5-Dokument handelt.
  2. <head>: Dieser Abschnitt wird normalerweise verwendet, um Metadaten über das Dokument aufzunehmen, z. B. den Titel der Webseite, der mithilfe von festgelegt wird <title> Element.
  3. <title>: Dadurch wird der Titel der Webseite auf „Datumsvorausfüllung mit JavaScript“ gesetzt.
  4. <body>: Dies ist der Hauptinhaltsbereich der Webseite, in dem Sie die sichtbaren Inhalte und Elemente der Benutzeroberfläche platzieren.
  5. <form>: Ein Formularelement, das Eingabefelder enthalten kann. In diesem Fall wird es verwendet, um das ausgeblendete Eingabefeld zu enthalten, das mit dem heutigen Datum gefüllt wird.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Dies ist ein verstecktes Eingabefeld. Es erscheint nicht auf der Seite, kann aber Daten speichern. Zur Identifizierung und Verwendung in JavaScript erhält es die ID „hiddenDateField“ und den Namen „hiddenDateField“.
  7. <script>: Dies ist das Eröffnungstag für einen JavaScript-Skriptblock, in den Sie JavaScript-Code schreiben können.
  8. function getFormattedDate() { ... }: Dies definiert eine aufgerufene JavaScript-Funktion getFormattedDate(). Innerhalb dieser Funktion:
    • Es entsteht ein Neues Date Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstellt const today = new Date();.
    • Es formatiert das Datum in eine Zeichenfolge mit dem gewünschten Format (mm/tt/jjjj). today.toLocaleDateString()dem „Vermischten Geschmack“. Seine 'en-US' Das Argument gibt das Gebietsschema (amerikanisches Englisch) für die Formatierung und das Objekt mit an year, month und day Eigenschaften definiert das Datumsformat.
  9. return formattedDate;: Diese Zeile gibt das formatierte Datum als Zeichenfolge zurück.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Diese Codezeile:
    • Verwendung document.getElementById('hiddenDateField') um das ausgeblendete Eingabefeld mit der ID „hiddenDateField“ auszuwählen.
    • Stellt das ein value Eigenschaft des ausgewählten Eingabefelds auf den von zurückgegebenen Wert getFormattedDate() Funktion. Dadurch wird das ausgeblendete Feld mit dem heutigen Datum im angegebenen Format gefüllt.

Das Endergebnis ist, dass beim Laden der Seite das ausgeblendete Eingabefeld mit der ID „hiddenDateField“ mit dem heutigen Datum im Format MM/TT/JJJJ ohne führende Nullen gefüllt wird, wie in angegeben getFormattedDate() Funktion.

So füllen Sie ein Formularfeld mit dem heutigen Datum und jQuery vorab aus

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

Dieser HTML- und JavaScript-Code zeigt, wie Sie mit jQuery ein ausgeblendetes Eingabefeld mit dem heutigen Datum im Format MM/TT/JJJJ ohne führende Nullen vorab ausfüllen. Lassen Sie es uns Schritt für Schritt aufschlüsseln:

  1. <!DOCTYPE html> und <html>: Dies sind Standard-HTML-Dokumentdeklarationen, die angeben, dass es sich um ein HTML5-Dokument handelt.
  2. <head>: Dieser Abschnitt wird zum Einfügen von Metadaten und Ressourcen für die Webseite verwendet.
  3. <title>: Setzt den Titel der Webseite auf „Datumsvorausfüllung mit jQuery und JavaScript-Datumsobjekt“.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Diese Zeile schließt die jQuery-Bibliothek ein, indem ihre Quelle aus einem Content Delivery Network (CDN) angegeben wird. Es stellt sicher, dass die jQuery-Bibliothek zur Verwendung auf der Webseite verfügbar ist.
  5. <body>: Dies ist der Hauptinhaltsbereich der Webseite, in dem Sie die sichtbaren Inhalte und Elemente der Benutzeroberfläche platzieren.
  6. <form>: Ein HTML-Formularelement, das zur Aufnahme von Eingabefeldern verwendet wird. In diesem Fall wird es verwendet, um das ausgeblendete Eingabefeld zu kapseln.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ein verstecktes Eingabefeld, das auf der Webseite nicht sichtbar ist. Ihm wird die ID „hiddenDateField“ und der Name „hiddenDateField“ zugewiesen.
  8. <script>: Dies ist das Eröffnungstag für einen JavaScript-Skriptblock, in den Sie JavaScript-Code schreiben können.
  9. $(document).ready(function() { ... });: Dies ist ein jQuery-Codeblock. Es nutzt die $(document).ready() Funktion, um sicherzustellen, dass der enthaltene Code ausgeführt wird, nachdem die Seite vollständig geladen wurde. Innerhalb dieser Funktion:
    • const today = new Date(); schafft eine neue Date Objekt, das das aktuelle Datum und die aktuelle Uhrzeit darstellt.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); Formatiert das Datum mithilfe von in eine Zeichenfolge mit dem gewünschten Format (MM/TT/JJJJ). toLocaleDateString Methode.
  10. $('#hiddenDateField').val(formattedDate); wählt mit jQuery das versteckte Eingabefeld mit der ID „hiddenDateField“ aus und setzt es value auf das formatierte Datum. Dadurch wird das ausgeblendete Feld effektiv mit dem heutigen Datum im angegebenen Format vorab ausgefüllt.

Der jQuery-Code vereinfacht die Auswahl und Änderung des ausgeblendeten Eingabefelds im Vergleich zu reinem JavaScript. Wenn die Seite geladen wird, wird das ausgeblendete Eingabefeld mit dem heutigen Datum im Format MM/TT/JJJJ gefüllt und es sind keine führenden Nullen vorhanden, wie in angegeben formattedDate variabel.

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.