CRM at Mga Platform ng Data

Paano Mag-prepopulate ng Field ng Form Gamit ang Petsa at JavaScript o JQuery Ngayon

Bagama't maraming solusyon ang nag-aalok ng pagkakataong iimbak ang petsa sa bawat entry ng form, may iba pang mga pagkakataon na hindi ito opsyon. Hinihikayat namin ang aming mga kliyente na magdagdag ng isang nakatagong field sa kanilang site at ipasa ang impormasyong ito kasama ng entry upang masubaybayan nila kung kailan ipinasok ang mga entry sa form. Gamit ang JavaScript, madali ito.

Paano I-prepopulate ang Isang Form Field Gamit ang Petsa at JavaScript Ngayon

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

Hatiin natin ang ibinigay na HTML at JavaScript code nang hakbang-hakbang:

  1. <!DOCTYPE html> at <html>: Ito ay mga karaniwang HTML na deklarasyon ng dokumento na tumutukoy na ito ay isang HTML5 na dokumento.
  2. <head>: Ang seksyong ito ay karaniwang ginagamit upang isama ang metadata tungkol sa dokumento, tulad ng pamagat ng webpage, na nakatakda gamit ang <title> elemento.
  3. <title>: Itinatakda nito ang pamagat ng webpage sa “Petsa ng Prepopulation na may JavaScript.”
  4. <body>: Ito ang pangunahing bahagi ng nilalaman ng webpage kung saan mo inilalagay ang nakikitang nilalaman at mga elemento ng user interface.
  5. <form>: Isang elemento ng form na maaaring maglaman ng mga input field. Sa kasong ito, ginagamit ito upang maglaman ng nakatagong input field na mapupunan ng petsa ngayon.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Ito ay isang nakatagong input field. Hindi ito lumalabas sa page ngunit maaaring mag-imbak ng data. Ito ay binibigyan ng ID ng “hiddenDateField” at pangalan ng “hiddenDateField” para sa pagkakakilanlan at paggamit sa JavaScript.
  7. <script>: Ito ang pambungad na tag para sa JavaScript script block, kung saan maaari kang magsulat ng JavaScript code.
  8. function getFormattedDate() { ... }: Tinutukoy nito ang isang function ng JavaScript na tinatawag getFormattedDate(). Sa loob ng function na ito:
    • Lumilikha ito ng bago Date bagay na kumakatawan sa kasalukuyang petsa at oras gamit const today = new Date();.
    • Pino-format nito ang petsa sa isang string gamit ang gustong format (mm/dd/yyyy). today.toLocaleDateString(). ang 'en-US' Tinutukoy ng argumento ang locale (American English) para sa pag-format, at ang object na may year, month, at day Tinutukoy ng mga katangian ang format ng petsa.
  9. return formattedDate;: Ibinabalik ng linyang ito ang na-format na petsa bilang isang string.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Ang linyang ito ng code:
    • Gumagamit document.getElementById('hiddenDateField') upang piliin ang nakatagong input field na may ID na "hiddenDateField."
    • Itinatakda ang value property ng napiling input field sa value na ibinalik ng getFormattedDate() function. Pino-populate nito ang nakatagong field ng petsa ngayon sa tinukoy na format.

Ang resulta ay kapag nag-load ang page, ang nakatagong input field na may ID na “hiddenDateField” ay mapupuno ng petsa ngayon sa format na mm/dd/yyyy nang walang mga zero na nangunguna, gaya ng tinukoy sa getFormattedDate() function.

Paano Mag-prepopulate ng Field ng Form na May Petsa at jQuery Ngayon

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

Ang HTML at JavaScript code na ito ay nagpapakita kung paano gamitin ang jQuery upang i-prepopulate ang isang nakatagong input field na may petsa ngayon, na naka-format bilang mm/dd/yyyy, nang walang mga nangunguna na zero. Hatiin natin ito nang hakbang-hakbang:

  1. <!DOCTYPE html> at <html>: Ito ay karaniwang mga deklarasyon ng HTML na dokumento na nagsasaad na ito ay isang HTML5 na dokumento.
  2. <head>: Ginagamit ang seksyong ito para sa pagsasama ng metadata at mga mapagkukunan para sa webpage.
  3. <title>: Itinatakda ang pamagat ng webpage sa “Prepopulation ng Petsa na may jQuery at JavaScript Date Object.”
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Kasama sa linyang ito ang library ng jQuery sa pamamagitan ng pagtukoy sa pinagmulan nito mula sa isang content delivery network (CDN). Tinitiyak nito na ang library ng jQuery ay magagamit para magamit sa webpage.
  5. <body>: Ito ang pangunahing bahagi ng nilalaman ng webpage kung saan mo inilalagay ang nakikitang nilalaman at mga elemento ng user interface.
  6. <form>: Isang HTML form na elemento na ginamit upang maglaman ng mga input field. Sa kasong ito, ginagamit ito upang i-encapsulate ang nakatagong input field.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Isang nakatagong input field na hindi makikita sa webpage. Nagtalaga ito ng ID ng “hiddenDateField” at pangalan ng “hiddenDateField.”
  8. <script>: Ito ang pambungad na tag para sa JavaScript script block kung saan maaari kang magsulat ng JavaScript code.
  9. $(document).ready(function() { ... });: Ito ay isang jQuery code block. Ginagamit nito ang $(document).ready() function upang matiyak na ang nilalamang code ay tatakbo pagkatapos na ganap na ma-load ang pahina. Sa loob ng function na ito:
    • const today = new Date(); lumilikha ng bago Date bagay na kumakatawan sa kasalukuyang petsa at oras.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); format ang petsa sa isang string na may gustong format (mm/dd/yyyy) gamit ang toLocaleDateString pamamaraan.
  10. $('#hiddenDateField').val(formattedDate); pinipili ang nakatagong input field na may ID na "hiddenDateField" gamit ang jQuery at itinatakda ito value sa na-format na petsa. Mabisa nitong inilalagay ang nakatagong field sa petsa ngayon sa tinukoy na format.

Pinapasimple ng jQuery code ang proseso ng pagpili at pagbabago sa nakatagong input field kumpara sa purong JavaScript. Kapag nag-load ang page, ang nakatagong input field ay mapupunan ng petsa ngayon sa mm/dd/yyyy na format, at walang mga nangungunang zero na naroroon, gaya ng tinukoy sa formattedDate variable

Douglas Karr

Douglas Karr ay CMO ng OpenINSIGHTS at ang nagtatag ng Martech Zone. Nakatulong si Douglas sa dose-dosenang matagumpay na mga startup ng MarTech, tumulong sa angkop na pagsusumikap ng higit sa $5 bil sa mga pagkuha at pamumuhunan ng Martech, at patuloy na tinutulungan ang mga kumpanya sa pagpapatupad at pag-automate ng kanilang mga diskarte sa pagbebenta at marketing. Si Douglas ay isang kinikilalang internasyonal na digital na pagbabago at eksperto at tagapagsalita ng MarTech. Si Douglas ay isa ring nai-publish na may-akda ng isang Dummie's guide at isang business leadership book.

Kaugnay na Artikulo

Bumalik sa tuktok na pindutan
Pagsasara

Natukoy ang Adblock

Martech Zone ay kayang ibigay sa iyo ang nilalamang ito nang walang bayad dahil pinagkakakitaan namin ang aming site sa pamamagitan ng kita ng ad, mga link na kaakibat, at mga sponsorship. Ikinalulugod namin kung aalisin mo ang iyong ad blocker habang tinitingnan mo ang aming site.