CRM na Jukwaa la Takwimu

Jinsi ya Kujaza Sehemu ya Fomu na Tarehe ya Leo na JavaScript au JQuery

Ingawa suluhisho nyingi hutoa fursa ya kuhifadhi tarehe na kila ingizo la fomu, kuna nyakati zingine ambapo sio chaguo. Tunawahimiza wateja wetu kuongeza sehemu iliyofichwa kwenye tovuti yao na kupitisha maelezo haya pamoja na ingizo ili waweze kufuatilia maingizo ya fomu yanapoingizwa. Kwa kutumia JavaScript, hii ni rahisi.

Jinsi ya Kujaza Sehemu ya Fomu na Tarehe ya Leo na 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>

Wacha tuchambue nambari ya HTML na JavaScript iliyotolewa hatua kwa hatua:

  1. <!DOCTYPE html> na <html>: Haya ni matamko ya kawaida ya hati ya HTML yanayobainisha kuwa hii ni hati ya HTML5.
  2. <head>: Sehemu hii kwa kawaida hutumiwa kujumuisha metadata kuhusu hati, kama vile kichwa cha ukurasa wa tovuti, ambacho huwekwa kwa kutumia <title> kipengee.
  3. <title>: Hii inaweka kichwa cha ukurasa wa tovuti kuwa "Tarehe Prepopulation with JavaScript."
  4. <body>: Hili ndilo eneo kuu la maudhui ya ukurasa wa tovuti ambapo unaweka maudhui yanayoonekana na vipengele vya kiolesura cha mtumiaji.
  5. <form>: Kipengele cha fomu ambacho kinaweza kuwa na sehemu za ingizo. Katika hali hii, inatumika kuwa na uga fiche wa ingizo ambao utajazwa na tarehe ya leo.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Hii ni sehemu iliyofichwa ya ingizo. Haionekani kwenye ukurasa lakini inaweza kuhifadhi data. Imepewa kitambulisho cha "hiddenDateField" na jina la "hiddenDateField" kwa ajili ya kitambulisho na matumizi katika JavaScript.
  7. <script>: Hii ni tagi ya ufunguzi wa kizuizi cha hati ya JavaScript, ambapo unaweza kuandika msimbo wa JavaScript.
  8. function getFormattedDate() { ... }: Hii inafafanua kazi ya JavaScript inayoitwa getFormattedDate(). Ndani ya kipengele hiki:
    • Inaunda mpya Date kitu kinachowakilisha tarehe na wakati wa sasa wa kutumia const today = new Date();.
    • Inapanga tarehe kuwa mfuatano na umbizo linalotakikana (mm/dd/yyyy) kwa kutumia today.toLocaleDateString(). The 'en-US' hoja inabainisha eneo (Kiingereza cha Kimarekani) cha umbizo, na kitu na year, month, na day sifa hufafanua muundo wa tarehe.
  9. return formattedDate;: Mstari huu unarudisha tarehe iliyoumbizwa kama mfuatano.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: Mstari huu wa kanuni:
    • matumizi document.getElementById('hiddenDateField') ili kuchagua sehemu ya ingizo iliyofichwa na kitambulisho "hiddenDateField."
    • Inaweka value mali ya sehemu iliyochaguliwa ya ingizo kwa thamani iliyorejeshwa na getFormattedDate() kazi. Hii inajaza sehemu iliyofichwa kwa tarehe ya leo katika umbizo maalum.

Matokeo ya mwisho ni kwamba ukurasa unapopakia, sehemu iliyofichwa ya ingizo yenye kitambulisho “hiddenDateField” inajazwa na tarehe ya leo katika umbizo mm/dd/yyyy bila sufuri zinazotangulia, kama ilivyobainishwa katika getFormattedDate() kazi.

Jinsi ya Kujaza Sehemu ya Fomu Na Tarehe ya Leo na 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>

Msimbo huu wa HTML na JavaScript unaonyesha jinsi ya kutumia jQuery kujaza sehemu ya ingizo iliyofichwa na tarehe ya leo, iliyoumbizwa kama mm/dd/yyyy, bila sufuri nyingi. Wacha tuichambue hatua kwa hatua:

  1. <!DOCTYPE html> na <html>: Haya ni matamko ya kawaida ya hati ya HTML yanayoonyesha kuwa hii ni hati ya HTML5.
  2. <head>: Sehemu hii inatumika kujumuisha metadata na nyenzo za ukurasa wa tovuti.
  3. <title>: Huweka kichwa cha ukurasa wa tovuti kuwa "Tarehe Prepopulation with jQuery na JavaScript Date Object."
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: Laini hii inajumuisha maktaba ya jQuery kwa kubainisha chanzo chake kutoka kwa mtandao wa utoaji maudhui (CDN). Inahakikisha kwamba maktaba ya jQuery inapatikana kwa matumizi kwenye ukurasa wa tovuti.
  5. <body>: Hili ndilo eneo kuu la maudhui ya ukurasa wa tovuti ambapo unaweka maudhui yanayoonekana na vipengele vya kiolesura cha mtumiaji.
  6. <form>: Kipengele cha fomu ya HTML kinachotumika kujumuisha sehemu za ingizo. Katika kesi hii, inatumika kujumuisha sehemu iliyofichwa ya ingizo.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: Sehemu iliyofichwa ya ingizo ambayo haitaonekana kwenye ukurasa wa wavuti. Imekabidhiwa kitambulisho cha “hiddenDateField” na jina la “hiddenDateField.”
  8. <script>: Hii ni tagi ya ufunguzi wa kizuizi cha hati ya JavaScript ambapo unaweza kuandika msimbo wa JavaScript.
  9. $(document).ready(function() { ... });: Hiki ni kizuizi cha msimbo wa jQuery. Inatumia $(document).ready() kazi ili kuhakikisha kwamba msimbo uliomo unafanya kazi baada ya ukurasa kupakiwa kikamilifu. Ndani ya kipengele hiki:
    • const today = new Date(); huunda mpya Date kitu kinachowakilisha tarehe na wakati wa sasa.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); hupanga tarehe kuwa mfuatano na umbizo linalotakikana (mm/dd/yyyy) kwa kutumia toLocaleDateString mbinu.
  10. $('#hiddenDateField').val(formattedDate); huchagua sehemu ya ingizo iliyofichwa na kitambulisho "hiddenDateField" kwa kutumia jQuery na kuweka yake value hadi tarehe iliyoumbizwa. Hii inajaza kwa ufanisi sehemu iliyofichwa na tarehe ya leo katika umbizo maalum.

Nambari ya jQuery hurahisisha mchakato wa kuchagua na kurekebisha sehemu iliyofichwa ya ingizo ikilinganishwa na JavaScript safi. Wakati ukurasa unapopakia, sehemu iliyofichwa ya ingizo hujazwa na tarehe ya leo katika umbizo la mm/dd/yyyy, na hakuna sufuri zinazoongoza, kama ilivyobainishwa katika formattedDate kutofautiana.

Douglas Karr

Douglas Karr ni CMO ya Fungua MAELEZO na mwanzilishi wa Martech Zone. Douglas amesaidia kampuni nyingi za kuanzisha MarTech zilizofaulu, amesaidia katika bidii inayofaa ya zaidi ya $5 bil katika ununuzi na uwekezaji wa Martech, na anaendelea kusaidia kampuni katika kutekeleza na kuelekeza mikakati yao ya uuzaji na uuzaji kiotomatiki. Douglas ni mtaalamu wa mabadiliko ya kidijitali anayetambulika kimataifa na mtaalam wa MarTech na spika. Douglas pia ni mwandishi aliyechapishwa wa mwongozo wa Dummie na kitabu cha uongozi wa biashara.

Related Articles

Rudi kwenye kifungo cha juu
karibu

Adblock Imegunduliwa

Martech Zone inaweza kukupa maudhui haya bila gharama kwa sababu tunachuma mapato ya tovuti yetu kupitia mapato ya matangazo, viungo vya washirika na ufadhili. Tutashukuru ikiwa ungeondoa kizuizi chako cha matangazo unapotazama tovuti yetu.