Hvordan forhåndsutfylle et skjemafelt med dagens dato og JavaScript eller JQuery
Mens mange løsninger tilbyr muligheten til å lagre datoen med hver skjemaoppføring, er det andre tidspunkter når det ikke er et alternativ. Vi oppfordrer våre kunder til å legge til et skjult felt på siden deres og sende denne informasjonen sammen med oppføringen slik at de kan spore når skjemaoppføringer legges inn. Ved å bruke JavaScript er dette enkelt.
Hvordan forhåndsutfylle et skjemafelt med dagens dato og 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>
La oss bryte ned den angitte HTML- og JavaScript-koden trinn for trinn:
<!DOCTYPE html>
og<html>
: Dette er standard HTML-dokumenterklæringer som spesifiserer at dette er et HTML5-dokument.<head>
: Denne delen brukes vanligvis til å inkludere metadata om dokumentet, for eksempel tittelen på nettsiden, som angis ved hjelp av<title>
element.<title>
: Dette setter tittelen på nettsiden til "Dato forhåndsutfylling med JavaScript."<body>
: Dette er hovedinnholdsområdet på nettsiden der du plasserer det synlige innholdet og brukergrensesnittelementene.<form>
: Et skjemaelement som kan inneholde inndatafelt. I dette tilfellet brukes det til å inneholde det skjulte inndatafeltet som vil fylles ut med dagens dato.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Dette er et skjult inndatafelt. Den vises ikke på siden, men kan lagre data. Det er gitt en ID på "hiddenDateField" og et navn på "hiddenDateField" for identifikasjon og bruk i JavaScript.<script>
: Dette er åpningstaggen for en JavaScript-skriptblokk, der du kan skrive JavaScript-kode.function getFormattedDate() { ... }
: Dette definerer en JavaScript-funksjon kaltgetFormattedDate()
. Inne i denne funksjonen:- Det skaper en ny
Date
objekt som representerer gjeldende dato og klokkeslett ved brukconst today = new Date();
. - Den formaterer datoen til en streng med ønsket format (mm/dd/åååå) ved hjelp av
today.toLocaleDateString()
. De'en-US'
argument spesifiserer lokaliteten (amerikansk engelsk) for formatering, og objektet medyear
,month
ogday
egenskaper definerer datoformatet.
- Det skaper en ny
return formattedDate;
: Denne linjen returnerer den formaterte datoen som en streng.document.getElementById('hiddenDateField').value = getFormattedDate();
: Denne kodelinjen:- Bruker
document.getElementById('hiddenDateField')
for å velge det skjulte inndatafeltet med IDen "hiddenDateField." - Stiller inn
value
egenskapen til det valgte inndatafeltet til verdien returnert avgetFormattedDate()
funksjon. Dette fyller ut det skjulte feltet med dagens dato i det angitte formatet.
- Bruker
Sluttresultatet er at når siden lastes, fylles det skjulte inndatafeltet med ID "hiddenDateField" ut med dagens dato i formatet mm/dd/åååå uten innledende nuller, som spesifisert i getFormattedDate()
funksjon.
Hvordan forhåndsutfylle et skjemafelt med dagens dato og 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>
Denne HTML- og JavaScript-koden viser hvordan du bruker jQuery til å forhåndsutfylle et skjult inndatafelt med dagens dato, formatert som mm/dd/åååå, uten innledende nuller. La oss bryte det ned trinn for trinn:
<!DOCTYPE html>
og<html>
: Dette er standard HTML-dokumenterklæringer som indikerer at dette er et HTML5-dokument.<head>
: Denne delen brukes til å inkludere metadata og ressurser for nettsiden.<title>
: Setter tittelen på nettsiden til "Dato forhåndsbefolkning med jQuery og JavaScript Date Object."<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
: Denne linjen inkluderer jQuery-biblioteket ved å spesifisere kilden fra et innholdsleveringsnettverk (CDN). Det sikrer at jQuery-biblioteket er tilgjengelig for bruk på nettsiden.<body>
: Dette er hovedinnholdsområdet på nettsiden der du plasserer det synlige innholdet og brukergrensesnittelementene.<form>
: Et HTML-skjemaelement som brukes til å inneholde inndatafelt. I dette tilfellet brukes den til å kapsle inn det skjulte inndatafeltet.<input type="hidden" id="hiddenDateField" name="hiddenDateField">
: Et skjult inndatafelt som ikke vil være synlig på nettsiden. Den er tildelt en ID av "hiddenDateField" og navnet "hiddenDateField."<script>
: Dette er åpningstaggen for en JavaScript-skriptblokk hvor du kan skrive JavaScript-kode.$(document).ready(function() { ... });
: Dette er en jQuery-kodeblokk. Den bruker$(document).ready()
funksjon for å sikre at den inneholdte koden kjører etter at siden er fulllastet. Inne i denne funksjonen:const today = new Date();
skaper et nyttDate
objekt som representerer gjeldende dato og klokkeslett.const formattedDate = today.toLocaleDateString('en-US', { ... });
formaterer datoen til en streng med ønsket format (mm/dd/åååå) ved hjelp avtoLocaleDateString
metoden.
$('#hiddenDateField').val(formattedDate);
velger det skjulte inndatafeltet med IDen "hiddenDateField" ved hjelp av jQuery og setter detvalue
til den formaterte datoen. Dette forhåndsutfyller effektivt det skjulte feltet med dagens dato i det angitte formatet.
jQuery-koden forenkler prosessen med å velge og endre det skjulte inndatafeltet sammenlignet med rent JavaScript. Når siden lastes, fylles det skjulte inndatafeltet ut med dagens dato i formatet mm/dd/åååå, og ingen innledende nuller er til stede, som spesifisert i formattedDate
variabel.