ວິທີການຕື່ມຂໍ້ມູນໃສ່ແບບຟອມທີ່ມີວັນທີຂອງມື້ນີ້ແລະ 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 ທີ່ສະຫນອງໃຫ້ໂດຍຂັ້ນຕອນ:
<!DOCTYPE html>
ແລະ<html>
: ເຫຼົ່ານີ້ແມ່ນການປະກາດເອກະສານ HTML ມາດຕະຖານທີ່ລະບຸວ່ານີ້ແມ່ນເອກະສານ HTML5.<head>
: ສ່ວນນີ້ປົກກະຕິແລ້ວແມ່ນໃຊ້ເພື່ອລວມເອົາ metadata ກ່ຽວກັບເອກະສານ, ເຊັ່ນ: ຫົວຂໍ້ຂອງຫນ້າເວັບ, ເຊິ່ງຖືກກໍານົດໂດຍໃຊ້<title>
ອົງປະກອບ.<title>
: ນີ້ກໍານົດຫົວຂໍ້ຂອງຫນ້າເວັບເປັນ "ວັນທີ Prepopulation ກັບ JavaScript."<body>
: ນີ້ແມ່ນພື້ນທີ່ເນື້ອຫາຕົ້ນຕໍຂອງຫນ້າເວັບທີ່ທ່ານວາງເນື້ອຫາທີ່ເບິ່ງເຫັນແລະອົງປະກອບການໂຕ້ຕອບຜູ້ໃຊ້.<form>
: ອົງປະກອບແບບຟອມທີ່ສາມາດມີຊ່ອງໃສ່ຂໍ້ມູນ. ໃນກໍລະນີນີ້, ມັນໄດ້ຖືກນໍາໃຊ້ເພື່ອປະກອບມີຊ່ອງໃສ່ການປ້ອນຂໍ້ມູນທີ່ເຊື່ອງໄວ້ທີ່ຈະໄດ້ຮັບການປະກອບດ້ວຍວັນທີຂອງມື້ນີ້.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: ນີ້ແມ່ນຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້. ມັນບໍ່ປາກົດຢູ່ໃນຫນ້າແຕ່ສາມາດເກັບຂໍ້ມູນໄດ້. ມັນໄດ້ຖືກມອບໃຫ້ ID ຂອງ "hiddenDateField" ແລະຊື່ຂອງ "hiddenDateField" ສໍາລັບການກໍານົດແລະນໍາໃຊ້ໃນ JavaScript.<script>
: ນີ້ແມ່ນໂຄດຄໍາສັ່ງເປີດສໍາລັບບລັອກ script JavaScript, ບ່ອນທີ່ທ່ານສາມາດຂຽນລະຫັດ JavaScript.function getFormattedDate() { ... }
: ນີ້ກໍານົດຫນ້າທີ່ JavaScript ທີ່ເອີ້ນວ່າgetFormattedDate()
. ພາຍໃນຟັງຊັນນີ້:- ມັນສ້າງໃຫມ່
Date
ວັດຖຸທີ່ເປັນຕົວແທນຂອງວັນທີແລະເວລາໃນປະຈຸບັນໂດຍໃຊ້const today = new Date();
. - ມັນຈັດຮູບແບບວັນທີເຂົ້າໄປໃນສະຕຣິງທີ່ມີຮູບແບບທີ່ຕ້ອງການ (mm/dd/yyyy) ໂດຍໃຊ້
today.toLocaleDateString()
. ໄດ້'en-US'
argument ລະບຸທ້ອງຖິ່ນ (ພາສາອັງກິດອາເມຣິກາ) ສໍາລັບການຈັດຮູບແບບ, ແລະວັດຖຸທີ່ມີyear
,month
, ແລະday
ຄຸນສົມບັດກໍານົດຮູບແບບວັນທີ.
- ມັນສ້າງໃຫມ່
return formattedDate;
: ເສັ້ນນີ້ສົ່ງຄືນວັນທີທີ່ມີຮູບແບບເປັນສະຕຣິງ.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, ໂດຍບໍ່ມີສູນນຳໜ້າ. ໃຫ້ແບ່ງມັນລົງເປັນຂັ້ນຕອນ:
<!DOCTYPE html>
ແລະ<html>
: ເຫຼົ່ານີ້ແມ່ນການປະກາດເອກະສານ HTML ມາດຕະຖານທີ່ຊີ້ໃຫ້ເຫັນວ່ານີ້ແມ່ນເອກະສານ HTML5.<head>
: ພາກສ່ວນນີ້ຖືກນໍາໃຊ້ສໍາລັບການລວມເອົາ metadata ແລະຊັບພະຍາກອນສໍາລັບຫນ້າເວັບ.<title>
: ຕັ້ງຊື່ຂອງໜ້າເວັບເປັນ “Date Prepopulation with jQuery ແລະ JavaScript Date Object.”<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: ເສັ້ນນີ້ປະກອບມີຫ້ອງສະຫມຸດ jQuery ໂດຍການລະບຸແຫຼ່ງຂອງມັນຈາກເຄືອຂ່າຍການຈັດສົ່ງເນື້ອຫາ (CDN). ມັນຮັບປະກັນວ່າຫ້ອງສະຫມຸດ jQuery ສາມາດໃຊ້ໄດ້ໃນຫນ້າເວັບ.<body>
: ນີ້ແມ່ນພື້ນທີ່ເນື້ອຫາຕົ້ນຕໍຂອງຫນ້າເວັບທີ່ທ່ານວາງເນື້ອຫາທີ່ເບິ່ງເຫັນແລະອົງປະກອບການໂຕ້ຕອບຜູ້ໃຊ້.<form>
: ອົງປະກອບແບບຟອມ HTML ທີ່ໃຊ້ເພື່ອບັນຈຸຊ່ອງໃສ່ຂໍ້ມູນ. ໃນກໍລະນີນີ້, ມັນໄດ້ຖືກນໍາໃຊ້ເພື່ອ encapsulate ຊ່ອງຂໍ້ມູນທີ່ເຊື່ອງໄວ້.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: ຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້ທີ່ຈະບໍ່ເຫັນຢູ່ໃນຫນ້າເວັບ. ມັນໄດ້ຖືກມອບຫມາຍ ID ຂອງ "hiddenDateField" ແລະຊື່ຂອງ "hiddenDateField."<script>
: ນີ້ແມ່ນໂຄດຄໍາສັ່ງເປີດສໍາລັບບລັອກ script JavaScript ບ່ອນທີ່ທ່ານສາມາດຂຽນລະຫັດ JavaScript.$(document).ready(function() { ... });
: ນີ້ແມ່ນບລັອກລະຫັດ jQuery. ມັນໃຊ້$(document).ready()
ຟັງຊັນເພື່ອຮັບປະກັນວ່າລະຫັດທີ່ບັນຈຸເຮັດວຽກຫຼັງຈາກຫນ້າເວັບໄດ້ໂຫລດຢ່າງເຕັມທີ່. ພາຍໃນຟັງຊັນນີ້:const today = new Date();
ສ້າງໃຫມ່Date
ວັດຖຸທີ່ເປັນຕົວແທນຂອງວັນທີແລະເວລາໃນປະຈຸບັນ.const formattedDate = today.toLocaleDateString('en-US', { ... });
ຈັດຮູບແບບວັນທີເຂົ້າໄປໃນສະຕຣິງທີ່ມີຮູບແບບທີ່ຕ້ອງການ (mm/dd/yyyy) ໂດຍໃຊ້toLocaleDateString
ວິທີການ.
$('#hiddenDateField').val(formattedDate);
ເລືອກຊ່ອງປ້ອນຂໍ້ມູນທີ່ເຊື່ອງໄວ້ດ້ວຍ ID “hiddenDateField” ໂດຍໃຊ້ jQuery ແລະຕັ້ງຄ່າຂອງມັນvalue
ຮອດວັນທີທີ່ມີຮູບແບບ. ນີ້ປະສິດທິຜົນ prepopulates ພາກສະຫນາມທີ່ເຊື່ອງໄວ້ກັບວັນທີຂອງມື້ນີ້ໃນຮູບແບບທີ່ກໍານົດໄວ້.
ລະຫັດ jQuery ເຮັດໃຫ້ຂະບວນການເລືອກ ແລະແກ້ໄຂຊ່ອງໃສ່ຂໍ້ມູນທີ່ເຊື່ອງໄວ້ເມື່ອປຽບທຽບກັບ JavaScript ທີ່ບໍລິສຸດ. ເມື່ອໜ້າເວັບໂຫຼດ, ຊ່ອງປ້ອນຂໍ້ມູນທີ່ເຊື່ອງໄວ້ຈະຖືກໃສ່ກັບວັນທີຂອງມື້ນີ້ໃນຮູບແບບ mm/dd/yyyy, ແລະບໍ່ມີສູນນຳໜ້າ, ຕາມທີ່ລະບຸໄວ້ໃນ formattedDate
ຕົວແປ.