Paano Mag-prepopulate ng Field ng Form Gamit ang Petsa at JavaScript o JQuery Ngayon
Bagama't maraming solusyon ang nag-aalok ng pagkakataong iimbak ang petsa sa bawat entry ng form, may iba pang mga pagkakataon na hindi ito opsyon. Hinihikayat namin ang aming mga kliyente na magdagdag ng isang nakatagong field sa kanilang site at ipasa ang impormasyong ito kasama ng entry upang masubaybayan nila kung kailan ipinasok ang mga entry sa form. Gamit ang JavaScript, madali ito.
Paano I-prepopulate ang Isang Form Field Gamit ang Petsa at JavaScript Ngayon
<!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>
Hatiin natin ang ibinigay na HTML at JavaScript code nang hakbang-hakbang:
<!DOCTYPE html>
at<html>
: Ito ay mga karaniwang HTML na deklarasyon ng dokumento na tumutukoy na ito ay isang HTML5 na dokumento.<head>
: Ang seksyong ito ay karaniwang ginagamit upang isama ang metadata tungkol sa dokumento, tulad ng pamagat ng webpage, na nakatakda gamit ang<title>
elemento.<title>
: Itinatakda nito ang pamagat ng webpage sa “Petsa ng Prepopulation na may JavaScript.”<body>
: Ito ang pangunahing bahagi ng nilalaman ng webpage kung saan mo inilalagay ang nakikitang nilalaman at mga elemento ng user interface.<form>
: Isang elemento ng form na maaaring maglaman ng mga input field. Sa kasong ito, ginagamit ito upang maglaman ng nakatagong input field na mapupunan ng petsa ngayon.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Ito ay isang nakatagong input field. Hindi ito lumalabas sa page ngunit maaaring mag-imbak ng data. Ito ay binibigyan ng ID ng “hiddenDateField” at pangalan ng “hiddenDateField” para sa pagkakakilanlan at paggamit sa JavaScript.<script>
: Ito ang pambungad na tag para sa JavaScript script block, kung saan maaari kang magsulat ng JavaScript code.function getFormattedDate() { ... }
: Tinutukoy nito ang isang function ng JavaScript na tinatawaggetFormattedDate()
. Sa loob ng function na ito:- Lumilikha ito ng bago
Date
bagay na kumakatawan sa kasalukuyang petsa at oras gamitconst today = new Date();
. - Pino-format nito ang petsa sa isang string gamit ang gustong format (mm/dd/yyyy).
today.toLocaleDateString()
. ang'en-US'
Tinutukoy ng argumento ang locale (American English) para sa pag-format, at ang object na mayyear
,month
, atday
Tinutukoy ng mga katangian ang format ng petsa.
- Lumilikha ito ng bago
return formattedDate;
: Ibinabalik ng linyang ito ang na-format na petsa bilang isang string.document.getElementById('hiddenDateField').value = getFormattedDate();
: Ang linyang ito ng code:- Gumagamit
document.getElementById('hiddenDateField')
upang piliin ang nakatagong input field na may ID na "hiddenDateField." - Itinatakda ang
value
property ng napiling input field sa value na ibinalik nggetFormattedDate()
function. Pino-populate nito ang nakatagong field ng petsa ngayon sa tinukoy na format.
- Gumagamit
Ang resulta ay kapag nag-load ang page, ang nakatagong input field na may ID na “hiddenDateField” ay mapupuno ng petsa ngayon sa format na mm/dd/yyyy nang walang mga zero na nangunguna, gaya ng tinukoy sa getFormattedDate()
function.
Paano Mag-prepopulate ng Field ng Form na May Petsa at jQuery Ngayon
<!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>
Ang HTML at JavaScript code na ito ay nagpapakita kung paano gamitin ang jQuery upang i-prepopulate ang isang nakatagong input field na may petsa ngayon, na naka-format bilang mm/dd/yyyy, nang walang mga nangunguna na zero. Hatiin natin ito nang hakbang-hakbang:
<!DOCTYPE html>
at<html>
: Ito ay karaniwang mga deklarasyon ng HTML na dokumento na nagsasaad na ito ay isang HTML5 na dokumento.<head>
: Ginagamit ang seksyong ito para sa pagsasama ng metadata at mga mapagkukunan para sa webpage.<title>
: Itinatakda ang pamagat ng webpage sa “Prepopulation ng Petsa na may jQuery at JavaScript Date Object.”<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Kasama sa linyang ito ang library ng jQuery sa pamamagitan ng pagtukoy sa pinagmulan nito mula sa isang content delivery network (CDN). Tinitiyak nito na ang library ng jQuery ay magagamit para magamit sa webpage.<body>
: Ito ang pangunahing bahagi ng nilalaman ng webpage kung saan mo inilalagay ang nakikitang nilalaman at mga elemento ng user interface.<form>
: Isang HTML form na elemento na ginamit upang maglaman ng mga input field. Sa kasong ito, ginagamit ito upang i-encapsulate ang nakatagong input field.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Isang nakatagong input field na hindi makikita sa webpage. Nagtalaga ito ng ID ng “hiddenDateField” at pangalan ng “hiddenDateField.”<script>
: Ito ang pambungad na tag para sa JavaScript script block kung saan maaari kang magsulat ng JavaScript code.$(document).ready(function() { ... });
: Ito ay isang jQuery code block. Ginagamit nito ang$(document).ready()
function upang matiyak na ang nilalamang code ay tatakbo pagkatapos na ganap na ma-load ang pahina. Sa loob ng function na ito:const today = new Date();
lumilikha ng bagoDate
bagay na kumakatawan sa kasalukuyang petsa at oras.const formattedDate = today.toLocaleDateString('en-US', { ... });
format ang petsa sa isang string na may gustong format (mm/dd/yyyy) gamit angtoLocaleDateString
pamamaraan.
$('#hiddenDateField').val(formattedDate);
pinipili ang nakatagong input field na may ID na "hiddenDateField" gamit ang jQuery at itinatakda itovalue
sa na-format na petsa. Mabisa nitong inilalagay ang nakatagong field sa petsa ngayon sa tinukoy na format.
Pinapasimple ng jQuery code ang proseso ng pagpili at pagbabago sa nakatagong input field kumpara sa purong JavaScript. Kapag nag-load ang page, ang nakatagong input field ay mapupunan ng petsa ngayon sa mm/dd/yyyy na format, at walang mga nangungunang zero na naroroon, gaya ng tinukoy sa formattedDate
variable