CRM i plataformes de dades

Com emplenar prèviament un camp de formulari amb la data d'avui i JavaScript o JQuery

Tot i que moltes solucions ofereixen l'oportunitat d'emmagatzemar la data amb cada entrada del formulari, hi ha altres moments en què no és una opció. Animem als nostres clients a afegir un camp ocult al seu lloc i passar aquesta informació juntament amb l'entrada perquè puguin fer un seguiment de quan s'introdueixen les entrades del formulari. Amb JavaScript, això és fàcil.

Com emplenar prèviament un camp de formulari amb la data d'avui i 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>

Desglossem el codi HTML i JavaScript proporcionat pas a pas:

  1. <!DOCTYPE html> i <html>: són declaracions de documents HTML estàndard que especifiquen que es tracta d'un document HTML5.
  2. <head>: aquesta secció s'utilitza normalment per incloure metadades sobre el document, com ara el títol de la pàgina web, que s'estableix mitjançant el <title> element.
  3. <title>: Això estableix el títol de la pàgina web en "Data de prepopulació amb JavaScript".
  4. <body>: Aquesta és l'àrea de contingut principal de la pàgina web on col·loqueu el contingut visible i els elements de la interfície d'usuari.
  5. <form>: un element de formulari que pot contenir camps d'entrada. En aquest cas, s'utilitza per contenir el camp d'entrada ocult que s'omplirà amb la data d'avui.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Aquest és un camp d'entrada ocult. No apareix a la pàgina, però pot emmagatzemar dades. Se li dóna un identificador de "hiddenDateField" i un nom de "hiddenDateField" per identificar-lo i utilitzar-lo a JavaScript.
  7. <script>: Aquesta és l'etiqueta d'obertura d'un bloc d'scripts JavaScript, on podeu escriure codi JavaScript.
  8. function getFormattedDate() { ... }: Això defineix una funció de JavaScript anomenada getFormattedDate(). Dins d'aquesta funció:
    • Crea un nou Date objecte que representa la data i l'hora actuals utilitzant const today = new Date();.
    • Formata la data en una cadena amb el format desitjat (mm/dd/aaaa). today.toLocaleDateString(). La 'en-US' argument especifica la configuració regional (anglès americà) per al format i l'objecte amb year, monthi day propietats defineix el format de la data.
  9. return formattedDate;: Aquesta línia retorna la data amb format com a cadena.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Aquesta línia de codi:
    • Usa document.getElementById('hiddenDateField') per seleccionar el camp d'entrada ocult amb l'ID "hiddenDateField".
    • Configura value propietat del camp d'entrada seleccionat al valor retornat per l' getFormattedDate() funció. Això omple el camp ocult amb la data d'avui en el format especificat.

El resultat final és que quan es carrega la pàgina, el camp d'entrada ocult amb l'identificador "hiddenDateField" s'omple amb la data d'avui en el format mm/dd/aaaa sense zeros inicials, tal com s'especifica a la getFormattedDate() funció.

Com emplenar prèviament un camp de formulari amb la data d'avui i 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>

Aquest codi HTML i JavaScript mostra com s'utilitza jQuery per emplenar prèviament un camp d'entrada ocult amb la data d'avui, amb el format mm/dd/aaaa, sense zeros inicials. Anem a desglossar-ho pas a pas:

  1. <!DOCTYPE html> i <html>: són declaracions estàndard de documents HTML que indiquen que es tracta d'un document HTML5.
  2. <head>: Aquesta secció s'utilitza per incloure metadades i recursos per a la pàgina web.
  3. <title>: estableix el títol de la pàgina web com a "Prepopulació de la data amb jQuery i JavaScript Data Object".
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: aquesta línia inclou la biblioteca jQuery especificant la seva font des d'una xarxa de lliurament de contingut (CDN). Assegura que la biblioteca jQuery estigui disponible per utilitzar-la a la pàgina web.
  5. <body>: Aquesta és l'àrea de contingut principal de la pàgina web on col·loqueu el contingut visible i els elements de la interfície d'usuari.
  6. <form>: un element de formulari HTML utilitzat per contenir camps d'entrada. En aquest cas, s'utilitza per encapsular el camp d'entrada ocult.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: un camp d'entrada ocult que no serà visible a la pàgina web. Se li assigna un identificador de "hiddenDateField" i un nom de "hiddenDateField".
  8. <script>: Aquesta és l'etiqueta d'obertura d'un bloc d'scripts JavaScript on podeu escriure codi JavaScript.
  9. $(document).ready(function() { ... });: Aquest és un bloc de codi jQuery. Fa servir el $(document).ready() funció per assegurar-se que el codi contingut s'executa després que la pàgina s'hagi carregat completament. Dins d'aquesta funció:
    • const today = new Date(); crea una nova Date objecte que representa la data i l'hora actuals.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formata la data en una cadena amb el format desitjat (mm/dd/aaaa) utilitzant el toLocaleDateString mètode.
  10. $('#hiddenDateField').val(formattedDate); selecciona el camp d'entrada ocult amb l'ID "hiddenDateField" mitjançant jQuery i estableix el seu value a la data formatada. D'aquesta manera, el camp ocult es completa amb la data d'avui en el format especificat.

El codi jQuery simplifica el procés de selecció i modificació del camp d'entrada ocult en comparació amb JavaScript pur. Quan es carrega la pàgina, el camp d'entrada ocult s'omple amb la data d'avui en el format mm/dd/aaaa i no hi ha zeros a l'inici, tal com s'especifica a la pàgina. formattedDate variable.

Douglas Karr

Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

Articles Relacionats

Torna al botó superior
a prop

Adblock detectat

Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.