Hvordan sende inn et skjema ved å klikke på en lenke i JavaScript?

Et HTML -skjema kan enkelt sendes inn ved å klikke på et hvilket som helst HTML -element ved hjelp av JavaScript. Formelementet har en sende inn() metode, og påkalle denne metoden med en ekstern samtale vil sende inn skjemaet.

Denne artikkelen kommer til å fokusere på å sende inn et skjema ved å trykke på en lenke. For å vise dette, vil det bli opprettet et skjema som skal ta inn påmeldingsdetaljene fra brukeren, og ved innsending av skjemaet vil det ganske enkelt skrive ut navnet på brukeren på konsollen.

Trinn 1: Sett opp HTML -elementene

Opprett et nytt HTML -dokument, og lag i det dokumentet et skjema med en bestemt ID, og ​​lag inndatafeltet for brukernavn og passord innenfor den skjemaet for brukernavn og passord. Etter det, i stedet for sendeknappen, oppretter du en ny lenke ved å bruke Merk og bruk OnClick -attributtet og sett den lik LinkPress () funksjon:

Vennligst skriv inn brukernavnet ditt

Vennligst skriv inn passordet ditt

Lenke for innsending

På dette tidspunktet produserer dette HTML -dokumentet følgende webside:

Nettsiden vår inkluderer to inndatafelt og en lenke som har en OnClick () -attributt satt til den.

Trinn 2: Lag skjemaet "Send" på Link Press

Hvert skjemaelement i HTML inneholder Submit () -metoden. For å sende inn et skjema, må det henvises. Lag funksjonen i skriptfilen LinkPress () og legg til funksjonaliteten ved å bruke følgende linjer:

funksjon linkPress ()
skjema = dokument.getElementById ("form");
form.sende inn();

First Line får referansen til skjemakoden vår og lagrer den inne i variabelen “form”. Den andre linjen bruker den referansen og kaller deretter innsending () av ​​skjemaet. Å kjøre dette HTML -dokumentet gir følgende resultat:

Å trykke på lenken sender inn skjemaet, men siden det ikke er noen backend -fil koblet til å motta skjemaet, tilbakestiller den derfor bare feltet.

Trinn 3: Be om "brukernavnet" ved innsending av skjemaet

Du vil legge til en funksjon klar() etter fullstendig lasting av nettsiden; Legg derfor til eiendommen til “på Last”På taggen som:

Og så i skriptfilen, legg til følgende linjer:

funksjon klar ()
skjema = dokument.getElementById ("form");
form.AddEventListener ("Send", funksjon (hendelse)
begivenhet.PreventDefault ();
Navn = dokument.getElementById ("Navn").verdi;
Varsel ("Velkommen" + navn);
);

Når HTML -dokumentet er fullstendig lastet:

• En hendelseslytter blir lagt til på skjemaelementet ved å bruke referansen.
• Denne begivenhetslytteren lytter til innsendingsarrangementet
• Ved innsending forhindrer det skjemaets standard oppførsel (stopp omdirigering).
• På slutten hilser den brukeren ved å bruke brukernavnet.

Hvis websiden er lastet nå, gir den følgende utdata:

Som du kan se, ble skjemaet sendt inn, og ved å forhindre standardoppførsel, kunne vi unngå behovet for en backend for å administrere dataene fra feltene.

Konklusjon

Det er veldig enkelt å sende inn et skjema ved å klikke på en lenke ved hjelp av JavaScript. Formelementet i et HTML -dokument har denne metoden kalt sende inn(). For å sende inn skjemaet, trenger du bare å ringe til denne metoden, som vi har gjort i denne artikkelen.