Hvordan sende inn et skjema ved hjelp av JavaScript
I dette innlegget vil vi gå gjennom hvordan du sender inn et skjema ved hjelp av JavaScript i detalj, men først vil vi se hvordan vi lager et HTML -skjema.
HTML formskaping
En HTML -skjema kan opprettes ved å bruke taggen som tilbys av HTML selv, og det tar to attributter:
- Den første er "handlingen" som inneholder en URL (som håndterer innsending av skjemaprosessen).
- Den andre attributtet er "metoden" som har en HTTP -metode.
En HTTP -metode kan være av forskjellige typer, og de to mest brukte er:
- Få (brukt til å få noen data fra en server)
- Innlegg (pleide å skrive data til serveren)
Vi vil imidlertid ikke bruke disse to attributtene i dette innlegget, da vi ikke jobber med en server.
La oss nå skrive HTML -kode for formskaping:
I koden ovenfor opprettet vi et skjema og ga id tilskrive skjemaet hvis betydning vi vil se på en stund. Deretter definerte vi to inngangsfelt og definerte deretter en knapp som har en type sende inn. Til slutt plasserte vi en manus Tag og refererte til filnavnet “kode.JS”Det vil inneholde vår JavaScript -kode.
Få tilgang til skjema og hente verdier fra skjemaet
Nå som vi er ferdige med å lage vår form, la oss få tilgang til dette skjemaet fra JavaScript og deretter hente verdiene til Brukernavn og passord som er til stede inne i skjema -taggen. For å få tilgang til skjemaet vil vi bruke id Attributt nevnt tidligere via følgende kode:
var myform = dokument.getElementById ('myform');På samme måte kan vi også få verdiene fra inngangsfeltene ved å bruke id attributt gitt i HTML -skjemaet. Den eneste forskjellen er at vi vil gi verdien på slutten av getElementById slik at vi kan hente verdien fra inngangsfeltet og ikke elementet i seg selv:
var brukernavn = dokument.getElementById ('Brukernavn').verdi;var passord = dokument.getElementById ('Passord').verdi;
Send inn skjema og validere data
For å sende inn skjemaet, vil vi bruke Hendelseslytter som lytter for en spesifisert lytter kontinuerlig. En hendelse er ganske enkelt et samspill mellom HTML og JavaScript utløst av en bruker eller nettleser når brukeren manipulerer en side og denne hendelsen håndteres av hendelseslytteren.
var myform = dokument.getElementById ('myform');// Event Lytter som lytter til innsending
myform.AddEventListener ("Send", funksjon (e)
e.PreventDefault ();
// hente verdier
var brukernavn = dokument.getElementById ('Brukernavn').verdi;
var passord = dokument.getElementById ('Passord').verdi;
// Valider brukernavn og passordfelt
if (brukernavn == "|| passord ==")
Varsel ("Vennligst fyll ut alle påkrevde felt");
ellers
Varsel ("Forminnlevering vellykket");
)
I koden ovenfor, først får vi referansen til skjemaet ved å bruke id attributt og deretter sette i gang en hendelseslytter av "sende inn" på denne formen. Funksjonen som er spesifisert i hendelseslytteren, vil bli påkalt når brukeren klikker på sendeknappen.
Inne i funksjonen har vi utført vår validering, det vil si hvis inngangsfeltene til brukernavn eller passord er tomme, så vil vi se en melding i varslingsboksen som sier Vennligst fyll alle nødvendige felt Ellers får vi beskjeden om Skjemainnlevering vellykket.
La oss sjekke først ved å klikke på sendeknappen og la de to inngangsfeltene være tomme:
La oss nå fylle de to feltene og se utdataene:
Konklusjon
Skjemaer er veldig nyttige i å samle inn data fra brukere og deretter manipulere eller spille med disse dataene i JavaScript. I dette innlegget tok vi hjelp fra en HTML Tag for å initialisere et skjema og fortsatte deretter med å definere to inngangsfelt og en knapp. Deretter fikk vi tilgang til skjemaelementet i en JavaScript -fil og hentet deretter verdiene for forminngangsfelt ved å bruke id Egenskap.
Til slutt svarte vi på spørsmålet om hvordan du sender inn et skjema ved hjelp av JavaScript ved å sette i gang en hendelseslytter som vil lytte etter innsendingshendelsen, og når en bruker klikker på sendeknappen, vil denne hendelsen bli avfyrt. Vi validerte også inndatafeltene våre i hendelseslytterfunksjonen.