CRM et plateformes de données

Comment préremplir un champ de formulaire avec la date du jour et JavaScript ou JQuery

Bien que de nombreuses solutions offrent la possibilité de stocker la date avec chaque entrée de formulaire, il arrive parfois que ce ne soit pas une option. Nous encourageons nos clients à ajouter un champ masqué à leur site et à transmettre ces informations avec l'entrée afin qu'ils puissent suivre le moment où les entrées du formulaire sont saisies. En utilisant JavaScript, c'est simple.

Comment préremplir un champ de formulaire avec la date du jour et 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>

Décomposons étape par étape le code HTML et JavaScript fourni :

  1. <!DOCTYPE html> et <html>: Ce sont des déclarations de document HTML standard spécifiant qu'il s'agit d'un document HTML5.
  2. <head>: Cette section est généralement utilisée pour inclure des métadonnées sur le document, telles que le titre de la page Web, qui est défini à l'aide de l'option <title> .
  3. <title> : cela définit le titre de la page Web sur « Pré-remplissage des dates avec JavaScript ».
  4. <body>: Il s'agit de la zone de contenu principale de la page Web où vous placez le contenu visible et les éléments de l'interface utilisateur.
  5. <form>: Un élément de formulaire pouvant contenir des champs de saisie. Dans ce cas, il est utilisé pour contenir le champ de saisie masqué qui sera renseigné avec la date du jour.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Il s'agit d'un champ de saisie masqué. Il n'apparaît pas sur la page mais peut stocker des données. Il reçoit un identifiant «hiddenDateField» et un nom «hiddenDateField» pour l'identification et l'utilisation en JavaScript.
  7. <script>: Il s'agit de la balise d'ouverture d'un bloc de script JavaScript, dans lequel vous pouvez écrire du code JavaScript.
  8. function getFormattedDate() { ... }: Ceci définit une fonction JavaScript appelée getFormattedDate(). A l'intérieur de cette fonction :
    • Il crée un nouveau Date objet représentant la date et l'heure actuelles en utilisant const today = new Date();.
    • Il formate la date en chaîne au format souhaité (mm/jj/aaaa) en utilisant today.toLocaleDateString()L’ 'en-US' L'argument spécifie les paramètres régionaux (anglais américain) pour le formatage et l'objet avec year, monthet day Properties définit le format de date.
  9. return formattedDate;: Cette ligne renvoie la date formatée sous forme de chaîne.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Cette ligne de code :
    • Les usages document.getElementById('hiddenDateField') pour sélectionner le champ de saisie masqué avec l'ID «hiddenDateField».
    • Définit le value propriété du champ de saisie sélectionné à la valeur renvoyée par le getFormattedDate() fonction. Cela remplit le champ masqué avec la date du jour au format spécifié.

Le résultat final est que lorsque la page se charge, le champ de saisie masqué avec l'ID « hiddenDateField » est renseigné avec la date du jour au format mm/jj/aaaa sans zéros non significatifs, comme spécifié dans le getFormattedDate() la fonction.

Comment préremplir un champ de formulaire avec la date du jour et 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>

Ce code HTML et JavaScript montre comment utiliser jQuery pour préremplir un champ de saisie masqué avec la date du jour, au format mm/jj/aaaa, sans zéros non significatifs. Décomposons-le étape par étape :

  1. <!DOCTYPE html> et <html>: Ce sont des déclarations de document HTML standard indiquant qu'il s'agit d'un document HTML5.
  2. <head>: Cette section est utilisée pour inclure des métadonnées et des ressources pour la page Web.
  3. <title> : Définit le titre de la page Web sur « Pré-remplissage de la date avec jQuery et JavaScript Date Object ».
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Cette ligne inclut la bibliothèque jQuery en spécifiant sa source depuis un réseau de diffusion de contenu (CDN). Il garantit que la bibliothèque jQuery est disponible pour une utilisation sur la page Web.
  5. <body>: Il s'agit de la zone de contenu principale de la page Web où vous placez le contenu visible et les éléments de l'interface utilisateur.
  6. <form>: Un élément de formulaire HTML utilisé pour contenir des champs de saisie. Dans ce cas, il est utilisé pour encapsuler le champ de saisie masqué.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Un champ de saisie masqué qui ne sera pas visible sur la page Web. On lui attribue un identifiant «hiddenDateField» et un nom «hiddenDateField».
  8. <script>: Il s'agit de la balise d'ouverture d'un bloc de script JavaScript dans lequel vous pouvez écrire du code JavaScript.
  9. $(document).ready(function() { ... });: Ceci est un bloc de code jQuery. Il utilise le $(document).ready() fonction pour garantir que le code contenu s’exécute une fois la page complètement chargée. A l'intérieur de cette fonction :
    • const today = new Date(); crée un nouveau Date objet représentant la date et l’heure actuelles.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formate la date dans une chaîne au format souhaité (mm/jj/aaaa) à l'aide du toLocaleDateString méthode.
  10. $('#hiddenDateField').val(formattedDate); sélectionne le champ de saisie masqué avec l'ID «hiddenDateField» à l'aide de jQuery et définit son value à la date formatée. Cela préremplit effectivement le champ masqué avec la date du jour dans le format spécifié.

Le code jQuery simplifie le processus de sélection et de modification du champ de saisie masqué par rapport au JavaScript pur. Lorsque la page se charge, le champ de saisie masqué est renseigné avec la date du jour au format mm/jj/aaaa, et aucun zéro non significatif n'est présent, comme spécifié dans le formattedDate variable.

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.