CRM un datu platformas

Kā iepriekš aizpildīt veidlapas lauku, izmantojot šodienas datumu un JavaScript vai JQuery

Lai gan daudzi risinājumi piedāvā iespēju saglabāt datumu katrā veidlapas ierakstā, citos gadījumos tas nav iespējams. Mēs mudinām savus klientus savai vietnei pievienot slēptu lauku un nodot šo informāciju kopā ar ierakstu, lai viņi varētu izsekot, kad tiek ievadīti veidlapas ieraksti. Izmantojot JavaScript, tas ir vienkārši.

Kā iepriekš aizpildīt veidlapas lauku, izmantojot šodienas datumu un 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>

Soli pa solim sadalīsim sniegto HTML un JavaScript kodu:

  1. <!DOCTYPE html> un <html>: šīs ir standarta HTML dokumentu deklarācijas, kas norāda, ka šis ir HTML5 dokuments.
  2. <head>: šī sadaļa parasti tiek izmantota, lai iekļautu metadatus par dokumentu, piemēram, tīmekļa lapas nosaukumu, kas tiek iestatīts, izmantojot <title> elements.
  3. <title>: tas iestata tīmekļa lapas nosaukumu uz “Datuma priekšpopulācija ar JavaScript”.
  4. <body>: Šis ir tīmekļa lapas galvenais satura apgabals, kurā ievietojat redzamo saturu un lietotāja interfeisa elementus.
  5. <form>: formas elements, kurā var būt ievades lauki. Šajā gadījumā tas tiek izmantots, lai ietvertu slēpto ievades lauku, kas tiks aizpildīts ar šodienas datumu.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Šis ir slēptais ievades lauks. Tas neparādās lapā, bet var saglabāt datus. Tam ir piešķirts ID “hiddenDateField” un nosaukums “hiddenDateField”, lai to identificētu un izmantotu JavaScript.
  7. <script>: Šis ir JavaScript skripta bloka sākuma tags, kurā varat rakstīt JavaScript kodu.
  8. function getFormattedDate() { ... }: Tas definē JavaScript funkciju, ko sauc getFormattedDate(). Šīs funkcijas iekšpusē:
    • Tas rada jaunu Date objektu, kas attēlo pašreizējo datumu un laiku, izmantojot const today = new Date();.
    • Tas formatē datumu virknē ar vēlamo formātu (mm/dd/gggg), izmantojot today.toLocaleDateString(). 'en-US' arguments norāda formatēšanas lokalizāciju (amerikāņu angļu valodu) un objektu ar year, month, un day rekvizīti nosaka datuma formātu.
  9. return formattedDate;: šī rinda atgriež formatēto datumu kā virkni.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Šī koda rindiņa:
    • Izmanto document.getElementById('hiddenDateField') lai atlasītu slēpto ievades lauku ar ID “hiddenDateField”.
    • Iestata value atlasītā ievades lauka rekvizītu uz vērtību, ko atgrieza getFormattedDate() funkciju. Tas aizpilda slēpto lauku ar šodienas datumu norādītajā formātā.

Gala rezultāts ir tāds, ka, ielādējot lapu, slēptais ievades lauks ar ID “hiddenDateField” tiek aizpildīts ar šodienas datumu formātā mm/dd/gggg bez nullēm sākumā, kā norādīts getFormattedDate() funkcija.

Kā iepriekš aizpildīt veidlapas lauku, izmantojot šodienas datumu un 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>

Šis HTML un JavaScript kods parāda, kā izmantot jQuery, lai iepriekš aizpildītu slēpto ievades lauku ar šodienas datumu, kas formatēts kā mm/dd/gggg, bez nullēm sākumā. Sadalīsim to soli pa solim:

  1. <!DOCTYPE html> un <html>: šīs ir standarta HTML dokumentu deklarācijas, kas norāda, ka šis ir HTML5 dokuments.
  2. <head>: šī sadaļa tiek izmantota, lai iekļautu tīmekļa lapas metadatus un resursus.
  3. <title>: iestata tīmekļa lapas nosaukumu uz “Datuma priekšpopulācija ar jQuery un JavaScript datuma objektu”.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: šajā rindā ir iekļauta jQuery bibliotēka, norādot tās avotu no satura piegādes tīkla (CDN). Tas nodrošina, ka jQuery bibliotēka ir pieejama lietošanai tīmekļa lapā.
  5. <body>: Šis ir tīmekļa lapas galvenais satura apgabals, kurā ievietojat redzamo saturu un lietotāja interfeisa elementus.
  6. <form>: HTML veidlapas elements, ko izmanto ievades lauku saturēšanai. Šajā gadījumā to izmanto, lai iekapsulētu slēpto ievades lauku.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: slēpts ievades lauks, kas nebūs redzams tīmekļa lapā. Tam ir piešķirts ID “hiddenDateField” un nosaukums “hiddenDateField”.
  8. <script>: Šis ir JavaScript skripta bloka sākuma tags, kurā varat rakstīt JavaScript kodu.
  9. $(document).ready(function() { ... });: Šis ir jQuery koda bloks. Tas izmanto $(document).ready() funkcija, lai nodrošinātu, ka ietvertais kods darbojas pēc lapas pilnīgas ielādes. Šīs funkcijas iekšpusē:
    • const today = new Date(); rada jaunu Date objekts, kas attēlo pašreizējo datumu un laiku.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); formatē datumu virknē vēlamajā formātā (mm/dd/gggg), izmantojot toLocaleDateString metode.
  10. $('#hiddenDateField').val(formattedDate); atlasa slēpto ievades lauku ar ID “hiddenDateField”, izmantojot jQuery un iestata tā value līdz formatētajam datumam. Tas efektīvi aizpilda slēpto lauku ar šodienas datumu norādītajā formātā.

jQuery kods vienkāršo slēptā ievades lauka atlases un modificēšanas procesu, salīdzinot ar tīro JavaScript. Kad lapa tiek ielādēta, slēptais ievades lauks tiek aizpildīts ar šodienas datumu formātā mm/dd/gggg, un nav nevienas sākuma nulles, kā norādīts formattedDate mainīgs.

Douglas Karr

Douglas Karr ir TKO no OpenINSIGHTS un dibinātājs Martech Zone. Duglass ir palīdzējis desmitiem veiksmīgu MarTech jaunuzņēmumu, ir palīdzējis veikt vairāk nekā 5 miljardu dolāru Martech iegādes un ieguldījumu uzticamības pārbaudi, kā arī turpina palīdzēt uzņēmumiem ieviest un automatizēt to pārdošanas un mārketinga stratēģijas. Douglas ir starptautiski atzīts digitālās transformācijas un MarTech eksperts un runātājs. Duglass ir arī publicēts Dummie rokasgrāmatas un biznesa vadības grāmatas autors.

Saistītie raksti

Atpakaļ uz augšu pogu
aizvērt

Reklāmu bloķēšana konstatēta

Martech Zone var nodrošināt jums šo saturu bez maksas, jo mēs gūstam peļņu no savas vietnes, izmantojot ieņēmumus no reklāmām, saistīto uzņēmumu saites un sponsorēšanu. Būsim pateicīgi, ja, apskatot mūsu vietni, noņemtu savu reklāmu bloķētāju.