CRM, ഡാറ്റ പ്ലാറ്റ്ഫോമുകൾ

ഇന്നത്തെ തീയതിയും JavaScript അല്ലെങ്കിൽ JQuery ഉപയോഗിച്ച് ഒരു ഫോം ഫീൽഡ് എങ്ങനെ പ്രീപോപ്പുലേറ്റ് ചെയ്യാം

ഓരോ ഫോം എൻട്രിയ്‌ക്കൊപ്പവും തീയതി സംഭരിക്കുന്നതിന് നിരവധി പരിഹാരങ്ങൾ അവസരം നൽകുമ്പോൾ, അത് ഒരു ഓപ്ഷനല്ലാത്ത മറ്റ് സമയങ്ങളുണ്ട്. ഞങ്ങളുടെ ക്ലയന്റുകളെ അവരുടെ സൈറ്റിലേക്ക് ഒരു മറഞ്ഞിരിക്കുന്ന ഫീൽഡ് ചേർക്കാനും എൻട്രിയ്‌ക്കൊപ്പം ഈ വിവരങ്ങൾ കൈമാറാനും ഞങ്ങൾ പ്രോത്സാഹിപ്പിക്കുന്നു, അതുവഴി ഫോം എൻട്രികൾ നൽകുമ്പോൾ അവർക്ക് ട്രാക്കുചെയ്യാനാകും. 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>

നൽകിയിരിക്കുന്ന HTML, JavaScript കോഡ് ഘട്ടം ഘട്ടമായി നമുക്ക് തകർക്കാം:

  1. <!DOCTYPE html> ഒപ്പം <html>: ഇതൊരു HTML5 പ്രമാണമാണെന്ന് വ്യക്തമാക്കുന്ന സ്റ്റാൻഡേർഡ് HTML പ്രമാണ പ്രഖ്യാപനങ്ങളാണ്.
  2. <head>: ഈ വിഭാഗം സാധാരണയായി ഡോക്യുമെന്റിനെക്കുറിച്ചുള്ള മെറ്റാഡാറ്റ ഉൾപ്പെടുത്താൻ ഉപയോഗിക്കുന്നു, അതായത് വെബ്‌പേജിന്റെ തലക്കെട്ട്, ഇത് ഉപയോഗിച്ച് സജ്ജീകരിച്ചിരിക്കുന്നു <title> ഘടകം.
  3. <title>: ഇത് വെബ്‌പേജിന്റെ ശീർഷകം "ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ചുള്ള തീയതി പ്രീപോപ്പുലേഷൻ" ആയി സജ്ജീകരിക്കുന്നു.
  4. <body>: ദൃശ്യമായ ഉള്ളടക്കവും ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകങ്ങളും നിങ്ങൾ സ്ഥാപിക്കുന്ന വെബ്‌പേജിന്റെ പ്രധാന ഉള്ളടക്ക മേഖലയാണിത്.
  5. <form>: ഇൻപുട്ട് ഫീൽഡുകൾ അടങ്ങിയിരിക്കാവുന്ന ഒരു ഫോം ഘടകം. ഈ സാഹചര്യത്തിൽ, ഇന്നത്തെ തീയതിയിൽ നിറയുന്ന മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് ഉൾക്കൊള്ളാൻ ഇത് ഉപയോഗിക്കുന്നു.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: ഇതൊരു മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡാണ്. ഇത് പേജിൽ ദൃശ്യമാകില്ല, പക്ഷേ ഡാറ്റ സംഭരിക്കാൻ കഴിയും. JavaScript-ൽ തിരിച്ചറിയുന്നതിനും ഉപയോഗിക്കുന്നതിനുമായി ഇതിന് “hiddenDateField” എന്ന ഐഡിയും “hiddenDateField” എന്ന പേരും നൽകിയിരിക്കുന്നു.
  7. <script>: നിങ്ങൾക്ക് JavaScript കോഡ് എഴുതാൻ കഴിയുന്ന ഒരു JavaScript സ്‌ക്രിപ്റ്റ് ബ്ലോക്കിനായുള്ള ഓപ്പണിംഗ് ടാഗാണിത്.
  8. function getFormattedDate() { ... }: ഇത് ഒരു JavaScript ഫംഗ്‌ഷൻ നിർവചിക്കുന്നു getFormattedDate(). ഈ പ്രവർത്തനത്തിനുള്ളിൽ:
    • അത് പുതിയത് സൃഷ്ടിക്കുന്നു Date നിലവിലെ തീയതിയും ഉപയോഗിക്കുന്ന സമയവും പ്രതിനിധീകരിക്കുന്ന ഒബ്ജക്റ്റ് const today = new Date();.
    • ഇത് ആവശ്യമുള്ള ഫോർമാറ്റ് (mm/dd/yyyy) ഉപയോഗിച്ച് ഒരു സ്ട്രിംഗിലേക്ക് തീയതി ഫോർമാറ്റ് ചെയ്യുന്നു today.toLocaleDateString(). ദി 'en-US' ആർഗ്യുമെന്റ് ഫോർമാറ്റിംഗിനുള്ള ലൊക്കേലും (അമേരിക്കൻ ഇംഗ്ലീഷ്) ഉം ഒബ്ജക്റ്റും വ്യക്തമാക്കുന്നു year, month, ഒപ്പം day പ്രോപ്പർട്ടികൾ തീയതി ഫോർമാറ്റ് നിർവചിക്കുന്നു.
  9. return formattedDate;: ഈ വരി ഫോർമാറ്റ് ചെയ്ത തീയതി ഒരു സ്ട്രിംഗായി നൽകുന്നു.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: കോഡിന്റെ ഈ വരി:
    • ഉപയോഗങ്ങൾ document.getElementById('hiddenDateField') "hiddenDateField" എന്ന ഐഡി ഉപയോഗിച്ച് മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് തിരഞ്ഞെടുക്കാൻ.
    • സജ്ജമാക്കുന്നു value തിരഞ്ഞെടുത്ത ഇൻപുട്ട് ഫീൽഡിന്റെ പ്രോപ്പർട്ടി നൽകിയ മൂല്യത്തിലേക്ക് getFormattedDate() പ്രവർത്തനം. ഇത് നിർദ്ദിഷ്‌ട ഫോർമാറ്റിൽ ഇന്നത്തെ തീയതിയ്‌ക്കൊപ്പം മറഞ്ഞിരിക്കുന്ന ഫീൽഡ് പോപ്പുലേറ്റ് ചെയ്യുന്നു.

അവസാന ഫലം, പേജ് ലോഡുചെയ്യുമ്പോൾ, "hiddenDateField" എന്ന ഐഡിയുള്ള മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് ഇന്നത്തെ തീയതിയിൽ mm/dd/yyyy ഫോർമാറ്റിൽ മുൻനിര പൂജ്യങ്ങളില്ലാതെ, ഇതിൽ വ്യക്തമാക്കിയിരിക്കുന്നു. getFormattedDate() പ്രവർത്തനം.

ഇന്നത്തെ തീയതിയും 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>

ഈ HTML, JavaScript കോഡ്, മുൻനിര പൂജ്യങ്ങളില്ലാതെ, mm/dd/yyyy ആയി ഫോർമാറ്റ് ചെയ്‌ത ഇന്നത്തെ തീയതിയിൽ ഒരു മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് പ്രീപോപ്പുലേറ്റ് ചെയ്യാൻ jQuery എങ്ങനെ ഉപയോഗിക്കാമെന്ന് കാണിക്കുന്നു. നമുക്ക് ഇത് ഘട്ടം ഘട്ടമായി വിഭജിക്കാം:

  1. <!DOCTYPE html> ഒപ്പം <html>: ഇതൊരു HTML5 പ്രമാണമാണെന്ന് സൂചിപ്പിക്കുന്ന സ്റ്റാൻഡേർഡ് HTML പ്രമാണ പ്രഖ്യാപനങ്ങളാണ്.
  2. <head>: വെബ്‌പേജിനുള്ള മെറ്റാഡാറ്റയും ഉറവിടങ്ങളും ഉൾപ്പെടുത്തുന്നതിന് ഈ വിഭാഗം ഉപയോഗിക്കുന്നു.
  3. <title>: വെബ്‌പേജിന്റെ ശീർഷകം “jQuery, JavaScript തീയതി ഒബ്‌ജക്റ്റ് എന്നിവയ്‌ക്കൊപ്പം തീയതി പ്രീപോപ്പുലേഷൻ” ആയി സജ്ജീകരിക്കുന്നു.
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: ഒരു ഉള്ളടക്ക ഡെലിവറി നെറ്റ്‌വർക്കിൽ (CDN) നിന്ന് അതിന്റെ ഉറവിടം വ്യക്തമാക്കിക്കൊണ്ട് ഈ വരിയിൽ jQuery ലൈബ്രറി ഉൾപ്പെടുന്നു. വെബ്‌പേജിൽ ഉപയോഗിക്കുന്നതിന് jQuery ലൈബ്രറി ലഭ്യമാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു.
  5. <body>: ദൃശ്യമായ ഉള്ളടക്കവും ഉപയോക്തൃ ഇന്റർഫേസ് ഘടകങ്ങളും നിങ്ങൾ സ്ഥാപിക്കുന്ന വെബ്‌പേജിന്റെ പ്രധാന ഉള്ളടക്ക മേഖലയാണിത്.
  6. <form>: ഇൻപുട്ട് ഫീൽഡുകൾ ഉൾക്കൊള്ളാൻ ഉപയോഗിക്കുന്ന ഒരു HTML ഫോം ഘടകം. ഈ സാഹചര്യത്തിൽ, മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് എൻകാപ്സുലേറ്റ് ചെയ്യാൻ ഇത് ഉപയോഗിക്കുന്നു.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: വെബ്‌പേജിൽ ദൃശ്യമാകാത്ത മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ്. ഇതിന് "hiddenDateField" എന്നതിന്റെ ഒരു ഐഡിയും "hiddenDateField" എന്ന പേരും നൽകിയിരിക്കുന്നു.
  8. <script>: നിങ്ങൾക്ക് JavaScript കോഡ് എഴുതാൻ കഴിയുന്ന ഒരു JavaScript സ്ക്രിപ്റ്റ് ബ്ലോക്കിനായുള്ള ഓപ്പണിംഗ് ടാഗാണിത്.
  9. $(document).ready(function() { ... });: ഇതൊരു jQuery കോഡ് ബ്ലോക്കാണ്. ഇത് ഉപയോഗിക്കുന്നു $(document).ready() പേജ് പൂർണ്ണമായി ലോഡുചെയ്‌തതിനുശേഷം അടങ്ങിയിരിക്കുന്ന കോഡ് പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നതിനുള്ള പ്രവർത്തനം. ഈ പ്രവർത്തനത്തിനുള്ളിൽ:
    • const today = new Date(); ഒരു പുതിയ സൃഷ്ടിക്കുന്നു Date നിലവിലെ തീയതിയും സമയവും പ്രതിനിധീകരിക്കുന്ന ഒബ്ജക്റ്റ്.
    • const formattedDate = today.toLocaleDateString('en-US', { ... }); ആവശ്യമുള്ള ഫോർമാറ്റിൽ (mm/dd/yyyy) ഉപയോഗിച്ച് തീയതി ഒരു സ്ട്രിംഗിലേക്ക് ഫോർമാറ്റ് ചെയ്യുന്നു toLocaleDateString രീതി.
  10. $('#hiddenDateField').val(formattedDate); jQuery ഉപയോഗിച്ച് "hiddenDateField" എന്ന ഐഡി ഉപയോഗിച്ച് മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് തിരഞ്ഞെടുത്ത് അത് സജ്ജമാക്കുന്നു value ഫോർമാറ്റ് ചെയ്ത തീയതിയിലേക്ക്. ഇത് നിർദ്ദിഷ്‌ട ഫോർമാറ്റിൽ ഇന്നത്തെ തീയതിയ്‌ക്കൊപ്പം മറഞ്ഞിരിക്കുന്ന ഫീൽഡിനെ ഫലപ്രദമായി മുൻ‌കൂട്ടി ചേർക്കുന്നു.

ശുദ്ധമായ ജാവാസ്ക്രിപ്റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് തിരഞ്ഞെടുക്കുന്നതിനും പരിഷ്ക്കരിക്കുന്നതിനുമുള്ള പ്രക്രിയ jQuery കോഡ് ലളിതമാക്കുന്നു. പേജ് ലോഡ് ചെയ്യുമ്പോൾ, മറഞ്ഞിരിക്കുന്ന ഇൻപുട്ട് ഫീൽഡ് ഇന്നത്തെ തീയതിയിൽ mm/dd/yyyy ഫോർമാറ്റിൽ പോപ്പുലേറ്റ് ചെയ്യപ്പെടും, കൂടാതെ ഇതിൽ വ്യക്തമാക്കിയിരിക്കുന്നതുപോലെ മുൻനിര പൂജ്യങ്ങളൊന്നും നിലവിലില്ല. formattedDate വേരിയബിൾ.

Douglas Karr

Douglas Karr യുടെ CMO ആണ് ഓപ്പൺ ഇൻസൈറ്റുകൾ യുടെ സ്ഥാപകനും Martech Zone. വിജയകരമായ ഡസൻ കണക്കിന് മാർടെക് സ്റ്റാർട്ടപ്പുകളെ ഡഗ്ലസ് സഹായിച്ചിട്ടുണ്ട്, മാർടെക് ഏറ്റെടുക്കലുകളിലും നിക്ഷേപങ്ങളിലും $5 ബില്ലിൽ കൂടുതൽ ശ്രദ്ധ ചെലുത്തുന്നതിൽ സഹായിച്ചിട്ടുണ്ട്, കൂടാതെ കമ്പനികളുടെ വിൽപ്പന, വിപണന തന്ത്രങ്ങൾ നടപ്പിലാക്കുന്നതിലും ഓട്ടോമേറ്റ് ചെയ്യുന്നതിലും കമ്പനികളെ തുടർന്നും സഹായിക്കുന്നു. അന്താരാഷ്ട്രതലത്തിൽ അംഗീകൃത ഡിജിറ്റൽ പരിവർത്തനവും മാർടെക് വിദഗ്ധനും സ്പീക്കറുമാണ് ഡഗ്ലസ്. ഡമ്മിയുടെ ഗൈഡിന്റെയും ബിസിനസ് ലീഡർഷിപ്പ് പുസ്തകത്തിന്റെയും പ്രസിദ്ധീകരിച്ച എഴുത്തുകാരൻ കൂടിയാണ് ഡഗ്ലസ്.

ബന്ധപ്പെട്ട ലേഖനങ്ങൾ

മുകളിലേയ്ക്ക് മടങ്ങുക ബട്ടൺ
അടയ്ക്കുക

ആഡ്ബ്ലോക്ക് കണ്ടെത്തി

Martech Zone പരസ്യ വരുമാനം, അനുബന്ധ ലിങ്കുകൾ, സ്പോൺസർഷിപ്പുകൾ എന്നിവയിലൂടെ ഞങ്ങൾ ഞങ്ങളുടെ സൈറ്റിൽ നിന്ന് ധനസമ്പാദനം നടത്തുന്നതിനാൽ ഈ ഉള്ളടക്കം നിങ്ങൾക്ക് ഒരു ചെലവും കൂടാതെ നൽകാൻ കഴിയും. നിങ്ങൾ ഞങ്ങളുടെ സൈറ്റ് കാണുമ്പോൾ നിങ്ങളുടെ പരസ്യ ബ്ലോക്കർ നീക്കം ചെയ്താൽ ഞങ്ങൾ അഭിനന്ദിക്കുന്നു.