CRM ja tietoalustat

Lomakekentän esitäyttö tämän päivän päivämäärällä ja JavaScriptillä tai JQueryllä

Vaikka monet ratkaisut tarjoavat mahdollisuuden tallentaa päivämäärä jokaisen lomakemerkinnän kanssa, toisinaan se ei ole vaihtoehto. Kannustamme asiakkaitamme lisäämään piilotetun kentän sivustoonsa ja välittämään nämä tiedot merkinnän mukana, jotta he voivat seurata, milloin lomakemerkintöjä syötetään. JavaScriptiä käyttämällä tämä on helppoa.

Lomakekentän esitäyttö tämän päivän päivämäärällä ja JavaScriptillä

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

Puretaan toimitettu HTML- ja JavaScript-koodi vaihe vaiheelta:

  1. <!DOCTYPE html> ja <html>: Nämä ovat tavallisia HTML-asiakirjamäärityksiä, jotka määrittelevät, että tämä on HTML5-asiakirja.
  2. <head>: Tätä osiota käytetään yleensä sisällyttämään asiakirjan metatiedot, kuten verkkosivun otsikko, joka asetetaan <title> elementti.
  3. <title>: Tämä asettaa verkkosivun otsikoksi "Päivämäärän esitäyttö JavaScriptillä".
  4. <body>: Tämä on verkkosivun pääsisältöalue, johon sijoitat näkyvän sisällön ja käyttöliittymäelementit.
  5. <form>: Lomakeelementti, joka voi sisältää syöttökenttiä. Tässä tapauksessa sitä käytetään sisältämään piilotetun syöttökentän, joka täytetään tämän päivän päivämäärällä.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Tämä on piilotettu syöttökenttä. Se ei näy sivulla, mutta voi tallentaa tietoja. Sille on annettu tunnus "hiddenDateField" ja nimi "hiddenDateField" tunnistamista ja käyttöä varten JavaScriptissä.
  7. <script>: Tämä on JavaScript-komentosarjalohkon avaustunniste, johon voit kirjoittaa JavaScript-koodia.
  8. function getFormattedDate() { ... }: Tämä määrittää JavaScript-funktion nimeltä getFormattedDate(). Tämän toiminnon sisällä:
    • Se luo uuden Date objekti, joka edustaa nykyistä päivämäärää ja aikaa käyttäen const today = new Date();.
    • Se muotoilee päivämäärän merkkijonoksi halutussa muodossa (kk/pp/vvvv) käyttämällä today.toLocaleDateString(). 'en-US' argumentti määrittää muotoilun alueen (amerikkalainen englanti) ja objektin kanssa year, monthja day ominaisuudet määrittää päivämäärän muodon.
  9. return formattedDate;: Tämä rivi palauttaa muotoillun päivämäärän merkkijonona.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Tämä koodirivi:
    • käytät document.getElementById('hiddenDateField') valitaksesi piilotetun syöttökentän tunnuksella "hiddenDateField".
    • Asettaa value valitun syöttökentän ominaisuuden palauttamaan arvoon getFormattedDate() toiminto. Tämä täyttää piilotetun kentän tämän päivän päivämäärällä määritetyssä muodossa.

Lopputuloksena on, että kun sivu latautuu, piilotettu syöttökenttä, jonka tunnus on "hiddenDateField", täytetään tämän päivän päivämäärällä muodossa kk/pp/vvvv ilman etunollia, kuten getFormattedDate() toiminto.

Lomakekentän esitäyttö tämän päivän päivämäärällä ja jQuerylla

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

Tämä HTML- ja JavaScript-koodi näyttää, kuinka jQueryn avulla täytetään piilotettu syöttökenttä tämän päivän päivämäärällä, muotoon kk/pp/vvvv ilman etunollia. Jaetaan se vaihe vaiheelta:

  1. <!DOCTYPE html> ja <html>: Nämä ovat tavallisia HTML-asiakirjamäärityksiä, jotka osoittavat, että tämä on HTML5-asiakirja.
  2. <head>: Tätä osiota käytetään verkkosivun metatietojen ja resurssien sisällyttämiseen.
  3. <title>: Asettaa verkkosivun otsikoksi "Päivämäärän esitäyttö jQuerylla ja JavaScript-päivämääräobjektilla".
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Tämä rivi sisältää jQuery-kirjaston määrittämällä sen lähteen sisällönjakeluverkosta (CDN). Se varmistaa, että jQuery-kirjasto on käytettävissä verkkosivulla.
  5. <body>: Tämä on verkkosivun pääsisältöalue, johon sijoitat näkyvän sisällön ja käyttöliittymäelementit.
  6. <form>: HTML-lomakeelementti, jota käytetään sisältämään syöttökenttiä. Tässä tapauksessa sitä käytetään piilotetun syöttökentän kapseloimiseen.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Piilotettu syöttökenttä, joka ei näy verkkosivulla. Sille on määritetty tunnus "hiddenDateField" ja nimi "hiddenDateField".
  8. <script>: Tämä on JavaScript-komentosarjalohkon avaustunniste, johon voit kirjoittaa JavaScript-koodia.
  9. $(document).ready(function() { ... });: Tämä on jQuery-koodilohko. Se käyttää $(document).ready() -toiminto varmistaaksesi, että sisältämä koodi suoritetaan sivun latautumisen jälkeen. Tämän toiminnon sisällä:
    • const today = new Date(); luo uuden Date nykyistä päivämäärää ja aikaa edustava objekti.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); muotoilee päivämäärän merkkijonoksi halutussa muodossa (kk/pp/vvvv) käyttämällä toLocaleDateString menetelmällä.
  10. $('#hiddenDateField').val(formattedDate); valitsee piilotetun syöttökentän tunnuksella "hiddenDateField" jQuerylla ja asettaa sen value muotoiltuun päivämäärään. Tämä käytännössä täyttää piilotetun kentän tämän päivän päivämäärällä määritetyssä muodossa.

jQuery-koodi yksinkertaistaa piilotetun syöttökentän valintaa ja muokkaamista puhtaaseen JavaScriptiin verrattuna. Kun sivu latautuu, piilotettu syöttökenttä täytetään tämän päivän päivämäärällä muodossa kk/pp/vvvv, eikä etunollia ole, kuten formattedDate muuttuja.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja perustaja Martech Zone. Douglas on auttanut kymmeniä menestyneitä MarTech-startuppeja, auttanut yli 5 miljardin dollarin due diligence -tarkastuksessa Martechin hankinnoissa ja investoinneissa ja avustaa edelleen yrityksiä niiden myynti- ja markkinointistrategioiden toteuttamisessa ja automatisoinnissa. Douglas on kansainvälisesti tunnustettu digitaalisen transformaation ja MarTechin asiantuntija ja puhuja. Douglas on myös julkaissut Dummie's-oppaan ja yritysjohtajuuskirjan.

Aiheeseen liittyvät artikkelit

Takaisin alkuun -painiketta
lähellä

Adblock havaittu

Martech Zone pystyy tarjoamaan sinulle tämän sisällön veloituksetta, koska ansaitsemme sivustomme mainostulojen, kumppanilinkkien ja sponsoroinnin kautta. Olisimme kiitollisia, jos poistaisit mainosten esto-ohjelman, kun katselet sivustoamme.