CRM ແລະແພລະຕະຟອມຂໍ້ມູນ

ວິທີການຕື່ມຂໍ້ມູນໃສ່ແບບຟອມທີ່ມີວັນທີຂອງມື້ນີ້ແລະ JavaScript ຫຼື JQuery

ໃນຂະນະທີ່ການແກ້ໄຂຈໍານວນຫຼາຍສະເຫນີໂອກາດທີ່ຈະເກັບຮັກສາວັນທີທີ່ມີການປ້ອນແບບຟອມແຕ່ລະຄົນ, ມີເວລາອື່ນໆທີ່ມັນບໍ່ແມ່ນທາງເລືອກ. ພວກເຮົາຊຸກຍູ້ໃຫ້ລູກຄ້າຂອງພວກເຮົາເພີ່ມພາກສະຫນາມທີ່ເຊື່ອງໄວ້ໃນເວັບໄຊທ໌ຂອງພວກເຂົາແລະຜ່ານຂໍ້ມູນນີ້ພ້ອມກັບການເຂົ້າເພື່ອໃຫ້ພວກເຂົາສາມາດຕິດຕາມເມື່ອການປ້ອນແບບຟອມ. ການນໍາໃຊ້ JavaScript, ນີ້ແມ່ນງ່າຍ.

ວິທີການຕື່ມຂໍ້ມູນໃສ່ຊ່ອງຂໍ້ມູນດ້ວຍວັນທີ ແລະ 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>: ເຫຼົ່ານີ້ແມ່ນການປະກາດເອກະສານ HTML ມາດຕະຖານທີ່ລະບຸວ່ານີ້ແມ່ນເອກະສານ HTML5.
  2. <head>: ສ່ວນນີ້ປົກກະຕິແລ້ວແມ່ນໃຊ້ເພື່ອລວມເອົາ metadata ກ່ຽວກັບເອກະສານ, ເຊັ່ນ: ຫົວຂໍ້ຂອງຫນ້າເວັບ, ເຊິ່ງຖືກກໍານົດໂດຍໃຊ້ <title> ອົງປະກອບ.
  3. <title>: ນີ້ກໍານົດຫົວຂໍ້ຂອງຫນ້າເວັບເປັນ "ວັນທີ Prepopulation ກັບ JavaScript."
  4. <body>: ນີ້ແມ່ນພື້ນທີ່ເນື້ອຫາຕົ້ນຕໍຂອງຫນ້າເວັບທີ່ທ່ານວາງເນື້ອຫາທີ່ເບິ່ງເຫັນແລະອົງປະກອບການໂຕ້ຕອບຜູ້ໃຊ້.
  5. <form>: ອົງປະກອບແບບຟອມທີ່ສາມາດມີຊ່ອງໃສ່ຂໍ້ມູນ. ໃນ​ກໍ​ລະ​ນີ​ນີ້, ມັນ​ໄດ້​ຖືກ​ນໍາ​ໃຊ້​ເພື່ອ​ປະ​ກອບ​ມີ​ຊ່ອງ​ໃສ່​ການ​ປ້ອນ​ຂໍ້​ມູນ​ທີ່​ເຊື່ອງ​ໄວ້​ທີ່​ຈະ​ໄດ້​ຮັບ​ການ​ປະ​ກອບ​ດ້ວຍ​ວັນ​ທີ​ຂອງ​ມື້​ນີ້​.
  6. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: ນີ້ແມ່ນຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້. ມັນບໍ່ປາກົດຢູ່ໃນຫນ້າແຕ່ສາມາດເກັບຂໍ້ມູນໄດ້. ມັນໄດ້ຖືກມອບໃຫ້ ID ຂອງ "hiddenDateField" ແລະຊື່ຂອງ "hiddenDateField" ສໍາລັບການກໍານົດແລະນໍາໃຊ້ໃນ JavaScript.
  7. <script>: ນີ້ແມ່ນໂຄດຄໍາສັ່ງເປີດສໍາລັບບລັອກ script JavaScript, ບ່ອນທີ່ທ່ານສາມາດຂຽນລະຫັດ JavaScript.
  8. function getFormattedDate() { ... }: ນີ້ກໍານົດຫນ້າທີ່ JavaScript ທີ່ເອີ້ນວ່າ getFormattedDate(). ພາຍໃນຟັງຊັນນີ້:
    • ມັນສ້າງໃຫມ່ Date ວັດຖຸທີ່ເປັນຕົວແທນຂອງວັນທີແລະເວລາໃນປະຈຸບັນໂດຍໃຊ້ const today = new Date();.
    • ມັນຈັດຮູບແບບວັນທີເຂົ້າໄປໃນສະຕຣິງທີ່ມີຮູບແບບທີ່ຕ້ອງການ (mm/dd/yyyy) ໂດຍໃຊ້ today.toLocaleDateString(). ໄດ້ 'en-US' argument ລະບຸທ້ອງຖິ່ນ (ພາສາອັງກິດອາເມຣິກາ) ສໍາລັບການຈັດຮູບແບບ, ແລະວັດຖຸທີ່ມີ year, month, ແລະ day ຄຸນສົມບັດກໍານົດຮູບແບບວັນທີ.
  9. return formattedDate;: ເສັ້ນນີ້ສົ່ງຄືນວັນທີທີ່ມີຮູບແບບເປັນສະຕຣິງ.
  10. document.getElementById('hiddenDateField').value = getFormattedDate();: ລະ​ຫັດ​ນີ້​:
    • ການນໍາໃຊ້ document.getElementById('hiddenDateField') ເພື່ອເລືອກຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້ດ້ວຍ ID “hiddenDateField.”
    • ກໍານົດ value ຄຸນ​ສົມ​ບັດ​ຂອງ​ຊ່ອງ​ໃສ່​ການ​ປ້ອນ​ຂໍ້​ມູນ​ທີ່​ເລືອກ​ທີ່​ຈະ​ໄດ້​ຮັບ​ຜົນ​ຕອບ​ແທນ​ໂດຍ​ getFormattedDate() ຫນ້າທີ່. ອັນນີ້ຕື່ມຂໍ້ມູນໃສ່ຊ່ອງຂໍ້ມູນທີ່ເຊື່ອງໄວ້ດ້ວຍວັນທີຂອງມື້ນີ້ໃນຮູບແບບທີ່ລະບຸ.

ຜົນໄດ້ຮັບທີ່ສຸດແມ່ນວ່າໃນເວລາທີ່ຫນ້າໂຫຼດ, ຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້ທີ່ມີ ID “hiddenDateField” ຈະຖືກຕື່ມຂໍ້ມູນໃສ່ກັບວັນທີຂອງມື້ນີ້ໃນຮູບແບບ mm/dd/yyyy ໂດຍບໍ່ມີສູນນໍາຫນ້າ, ຕາມທີ່ລະບຸໄວ້ໃນ getFormattedDate() function

ວິທີການຕື່ມຂໍ້ມູນໃສ່ຊ່ອງຂໍ້ມູນດ້ວຍວັນທີ ແລະ 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 ນີ້ສະແດງໃຫ້ເຫັນວິທີການໃຊ້ jQuery ເພື່ອຕື່ມຂໍ້ມູນໃສ່ຊ່ອງຂໍ້ມູນທີ່ເຊື່ອງໄວ້ກັບວັນທີຂອງມື້ນີ້, ຈັດຮູບແບບເປັນ mm/dd/yyyy, ໂດຍບໍ່ມີສູນນຳໜ້າ. ໃຫ້ແບ່ງມັນລົງເປັນຂັ້ນຕອນ:

  1. <!DOCTYPE html> ແລະ <html>: ເຫຼົ່ານີ້ແມ່ນການປະກາດເອກະສານ HTML ມາດຕະຖານທີ່ຊີ້ໃຫ້ເຫັນວ່ານີ້ແມ່ນເອກະສານ HTML5.
  2. <head>: ພາກສ່ວນນີ້ຖືກນໍາໃຊ້ສໍາລັບການລວມເອົາ metadata ແລະຊັບພະຍາກອນສໍາລັບຫນ້າເວັບ.
  3. <title>: ຕັ້ງຊື່ຂອງໜ້າເວັບເປັນ “Date Prepopulation with jQuery ແລະ JavaScript Date Object.”
  4. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>: ເສັ້ນນີ້ປະກອບມີຫ້ອງສະຫມຸດ jQuery ໂດຍການລະບຸແຫຼ່ງຂອງມັນຈາກເຄືອຂ່າຍການຈັດສົ່ງເນື້ອຫາ (CDN). ມັນຮັບປະກັນວ່າຫ້ອງສະຫມຸດ jQuery ສາມາດໃຊ້ໄດ້ໃນຫນ້າເວັບ.
  5. <body>: ນີ້ແມ່ນພື້ນທີ່ເນື້ອຫາຕົ້ນຕໍຂອງຫນ້າເວັບທີ່ທ່ານວາງເນື້ອຫາທີ່ເບິ່ງເຫັນແລະອົງປະກອບການໂຕ້ຕອບຜູ້ໃຊ້.
  6. <form>: ອົງປະກອບແບບຟອມ HTML ທີ່ໃຊ້ເພື່ອບັນຈຸຊ່ອງໃສ່ຂໍ້ມູນ. ໃນ​ກໍ​ລະ​ນີ​ນີ້​, ມັນ​ໄດ້​ຖືກ​ນໍາ​ໃຊ້​ເພື່ອ encapsulate ຊ່ອງ​ຂໍ້​ມູນ​ທີ່​ເຊື່ອງ​ໄວ້​.
  7. <input type="hidden" id="hiddenDateField" name="hiddenDateField">: ຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້ທີ່ຈະບໍ່ເຫັນຢູ່ໃນຫນ້າເວັບ. ມັນໄດ້ຖືກມອບຫມາຍ ID ຂອງ "hiddenDateField" ແລະຊື່ຂອງ "hiddenDateField."
  8. <script>: ນີ້ແມ່ນໂຄດຄໍາສັ່ງເປີດສໍາລັບບລັອກ 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); ເລືອກຊ່ອງປ້ອນຂໍ້ມູນທີ່ເຊື່ອງໄວ້ດ້ວຍ ID “hiddenDateField” ໂດຍໃຊ້ jQuery ແລະຕັ້ງຄ່າຂອງມັນ value ຮອດວັນທີທີ່ມີຮູບແບບ. ນີ້ປະສິດທິຜົນ prepopulates ພາກສະຫນາມທີ່ເຊື່ອງໄວ້ກັບວັນທີຂອງມື້ນີ້ໃນຮູບແບບທີ່ກໍານົດໄວ້.

ລະຫັດ jQuery ເຮັດໃຫ້ຂະບວນການເລືອກ ແລະແກ້ໄຂຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້ເມື່ອປຽບທຽບກັບ JavaScript ທີ່ບໍລິສຸດ. ເມື່ອໜ້າເວັບໂຫຼດ, ຊ່ອງປ້ອນຂໍ້ມູນທີ່ເຊື່ອງໄວ້ຈະຖືກໃສ່ກັບວັນທີຂອງມື້ນີ້ໃນຮູບແບບ mm/dd/yyyy, ແລະບໍ່ມີສູນນຳໜ້າ, ຕາມທີ່ລະບຸໄວ້ໃນ formattedDate ຕົວແປ.

Douglas Karr

Douglas Karr ແມ່ນ CMO ຂອງ OpenINSIGHTS ແລະຜູ້ກໍ່ຕັ້ງຂອງ Martech Zone. Douglas ໄດ້ຊ່ວຍເຫຼືອຜູ້ເລີ່ມຕົ້ນ MarTech ຫຼາຍໆຄົນທີ່ປະສົບຜົນສໍາເລັດ, ໄດ້ຊ່ວຍເຫຼືອໃນຄວາມພາກພຽນອັນເນື່ອງມາຈາກຫຼາຍກວ່າ $ 5 ຕື້ໃນການຊື້ແລະການລົງທຶນ Martech, ແລະສືບຕໍ່ຊ່ວຍເຫຼືອບໍລິສັດໃນການປະຕິບັດແລະອັດຕະໂນມັດຍຸດທະສາດການຂາຍແລະການຕະຫຼາດຂອງພວກເຂົາ. Douglas ແມ່ນການຫັນເປັນດິຈິຕອນທີ່ໄດ້ຮັບການຍອມຮັບໃນລະດັບສາກົນແລະຜູ້ຊ່ຽວຊານ MarTech ແລະລໍາໂພງ. Douglas ຍັງເປັນຜູ້ຂຽນທີ່ພິມເຜີຍແຜ່ຂອງຄູ່ມືຂອງ Dummie ແລະຫນັງສືຜູ້ນໍາທາງທຸລະກິດ.

ບົດຄວາມທີ່ກ່ຽວຂ້ອງ

ກັບໄປດ້ານເທິງສຸດ
ປິດ

ກວດພົບ Adblock

Martech Zone ສາມາດສະໜອງເນື້ອຫານີ້ໃຫ້ກັບເຈົ້າໄດ້ໂດຍບໍ່ເສຍຄ່າໃຊ້ຈ່າຍໃດໆ ເພາະວ່າພວກເຮົາສ້າງລາຍໄດ້ຈາກເວັບໄຊຂອງພວກເຮົາຜ່ານລາຍໄດ້ໂຄສະນາ, ລິ້ງເຊື່ອມໂຍງ ແລະສະປອນເຊີ. ພວກ​ເຮົາ​ຈະ​ຮູ້​ສຶກ​ດີ​ຖ້າ​ຫາກ​ວ່າ​ທ່ານ​ຈະ​ເອົາ​ຕົວ​ບລັອກ​ການ​ໂຄ​ສະ​ນາ​ຂອງ​ທ່ານ​ທີ່​ທ່ານ​ເບິ່ງ​ເວັບ​ໄຊ​ຂອງ​ພວກ​ເຮົາ.