Si të parapopulloni një fushë formulari me datën e sotme dhe JavaScript ose JQuery
Ndërsa shumë zgjidhje ofrojnë mundësinë për të ruajtur datën me çdo hyrje të formularit, ka raste të tjera kur nuk është një opsion. Ne inkurajojmë klientët tanë të shtojnë një fushë të fshehur në faqen e tyre dhe të kalojnë këtë informacion së bashku me hyrjen në mënyrë që ata të mund të gjurmojnë kur futen hyrjet e formularit. Duke përdorur JavaScript, kjo është e lehtë.
Si të parapopulloni një fushë formulari me datën e sotme dhe 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>
Le të zbërthejmë hap pas hapi kodin e dhënë HTML dhe JavaScript:
<!DOCTYPE html>
<html>
: Këto janë deklarata standarde të dokumentit HTML që specifikojnë se ky është një dokument HTML5.<head>
: Ky seksion zakonisht përdoret për të përfshirë meta të dhëna rreth dokumentit, si p.sh. titulli i faqes së internetit, i cili vendoset duke përdorur<title>
elementi.<title>
: Kjo vendos titullin e faqes së internetit në "Data parapopullimi me JavaScript".<body>
: Kjo është zona kryesore e përmbajtjes së faqes së internetit ku vendosni përmbajtjen e dukshme dhe elementët e ndërfaqes së përdoruesit.<form>
: Një element i formës që mund të përmbajë fusha hyrëse. Në këtë rast, përdoret për të përmbajtur fushën e fshehur të hyrjes që do të plotësohet me datën e sotme.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Kjo është një fushë e fshehur e hyrjes. Nuk shfaqet në faqe, por mund të ruajë të dhëna. I jepet një ID e "hiddenDateField" dhe një emër "hiddenDateField" për identifikim dhe përdorim në JavaScript.<script>
: Ky është etiketa hapëse për një bllok skripti JavaScript, ku mund të shkruani kodin JavaScript.function getFormattedDate() { ... }
: Kjo përcakton një funksion JavaScript të quajturgetFormattedDate()
. Brenda këtij funksioni:- Krijon një të re
Date
objekt që përfaqëson datën dhe kohën aktuale duke përdorurconst today = new Date();
. - Ai e formaton datën në një varg me formatin e dëshiruar (mm/dd/vvvv) duke përdorur
today.toLocaleDateString()
.'en-US'
argumenti specifikon vendndodhjen (anglisht amerikane) për formatimin dhe objektin meyear
,month
dheday
vetitë përcaktojnë formatin e datës.
- Krijon një të re
return formattedDate;
: Ky rresht kthen datën e formatuar si varg.document.getElementById('hiddenDateField').value = getFormattedDate();
: Kjo linjë kodi:- Përdor
document.getElementById('hiddenDateField')
për të zgjedhur fushën e fshehur të hyrjes me ID "hiddenDateField". - Vendos
value
vetia e fushës hyrëse të zgjedhur në vlerën e kthyer ngagetFormattedDate()
funksionin. Kjo e plotëson fushën e fshehur me datën e sotme në formatin e specifikuar.
- Përdor
Rezultati përfundimtar është se kur ngarkohet faqja, fusha e fshehtë e hyrjes me ID "hiddenDateField" plotësohet me datën e sotme në formatin mm/dd/vvvv pa zero kryesore, siç specifikohet në getFormattedDate()
funksion.
Si të parapopulloni një fushë formulari me datën e sotme dhe 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>
Ky kod HTML dhe JavaScript demonstron se si të përdoret jQuery për të parapopulluar një fushë të fshehur të hyrjes me datën e sotme, të formatuar si mm/dd/vvvv, pa zero kryesore. Le ta zbërthejmë hap pas hapi:
<!DOCTYPE html>
<html>
: Këto janë deklarata standarde të dokumentit HTML që tregojnë se ky është një dokument HTML5.<head>
: Ky seksion përdoret për përfshirjen e meta të dhënave dhe burimeve për faqen e internetit.<title>
: Cakton titullin e faqes së internetit në "Date Prepopulation with jQuery and JavaScript Date Object".<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Kjo linjë përfshin bibliotekën jQuery duke specifikuar burimin e saj nga një rrjet i shpërndarjes së përmbajtjes (CDN). Siguron që biblioteka jQuery të jetë e disponueshme për përdorim në faqen e internetit.<body>
: Kjo është zona kryesore e përmbajtjes së faqes së internetit ku vendosni përmbajtjen e dukshme dhe elementët e ndërfaqes së përdoruesit.<form>
: Një element i formës HTML që përdoret për të përmbajtur fushat hyrëse. Në këtë rast, përdoret për të inkapsuluar fushën e fshehur të hyrjes.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Një fushë e fshehur e hyrjes që nuk do të jetë e dukshme në faqen e internetit. I është caktuar një ID e "hiddenDateField" dhe një emër i "hiddenDateField".<script>
: Ky është etiketa hapëse për një bllok skripti JavaScript ku mund të shkruani kodin JavaScript.$(document).ready(function() { ... });
: Ky është një bllok kodi jQuery. Ai përdor$(document).ready()
funksion për të siguruar që kodi i përmbajtur të funksionojë pasi faqja të jetë ngarkuar plotësisht. Brenda këtij funksioni:const today = new Date();
krijon një të reDate
objekt që përfaqëson datën dhe orën aktuale.const formattedDate = today.toLocaleDateString('en-US', { ... });
formaton datën në një varg me formatin e dëshiruar (mm/dd/vvvv) duke përdorurtoLocaleDateString
metodë.
$('#hiddenDateField').val(formattedDate);
zgjedh fushën e hyrjes së fshehur me ID-në "hiddenDateField" duke përdorur jQuery dhe vendosvalue
deri në datën e formatuar. Kjo në mënyrë efektive parapopullon fushën e fshehur me datën e sotme në formatin e specifikuar.
Kodi jQuery thjeshton procesin e zgjedhjes dhe modifikimit të fushës së hyrjes së fshehur në krahasim me JavaScript të pastër. Kur faqja ngarkohet, fusha e fshehur e hyrjes plotësohet me datën e sotme në formatin mm/dd/vvvv dhe nuk ka zero kryesore, siç specifikohet në formattedDate
ndryshueshme.