Programmering

Bruke JavaScript og skjemaer

Javascript bruker mange hatter. Du kan bruke JavaScript til å lage spesialeffekter. Du kan bruke JavaScript til å gjøre HTML-sidene dine "smartere" ved å utnytte mulighetene for beslutningstaking. Og du kan bruke JavaScript til å forbedre HTML-skjemaer. Denne siste applikasjonen er av spesiell betydning. Av alle hattene JavaScript kan bruke, er formbehandlingsfunksjonene blant de mest etterspurte og brukte.

Ingenting slår mer frykt i hjertet til en webutgiver enn disse tre bokstavene: C-G-I. CGI (som står for felles gateway-grensesnitt), er en mekanisme for sikker transport av data fra en klient (en nettleser) til en server. Det brukes vanligvis til å overføre data fra et HTML-skjema til serveren.

Med JavaScript på din side kan du behandle enkle skjemaer uten å påkalle serveren. Og når det er nødvendig å sende inn skjemaet til et CGI-program, kan du få JavaScript til å ta vare på alle de foreløpige kravene, for eksempel å validere inngang for å sikre at brukeren har stiplet hvert eneste jeg. I denne kolonnen ser vi nøye på JavaScript-skjemaforbindelsen, inkludert hvordan du bruker JavaScript-skjemaobjektet, hvordan du leser og angir skjemainnhold, og hvordan du utløser JavaScript-hendelser ved å manipulere skjemakontroller. Vi vil også dekke hvordan du bruker JavaScript for å verifisere skjemainndata og sumbit skjemaet til et CGI-program.

Lære JavaScript

Denne artikkelen er en del av JavaWorlds tekniske innholdsarkiv. Du kan lære mye om JavaScript-programmering ved å lese artikler i JavaScript-serien, bare husk at noe av informasjonen sannsynligvis vil være utdatert. Se "Bruke JavaScript's innebygde objekter" og "Feilsøking av JavaScript-programmer" for mer om programmering med JavaScript.

Opprette skjemaet

Det er få forskjeller mellom et rett HTML-skjema og et JavaScript-forbedret skjema. Det viktigste er at et JavaScript-skjema er avhengig av en eller flere hendelsesbehandlere, for eksempel onClick eller onSubmit. Disse påkaller en JavaScript-handling når brukeren gjør noe i skjemaet, for eksempel å klikke på en knapp. Hendelsesbehandlerne, som er plassert sammen med resten av attributtene i HTML-skjemaet, er usynlige for en nettleser som ikke støtter JavaScript. På grunn av denne egenskapen kan du ofte bruke ett skjema for både JavaScript og ikke-JavaScript-nettlesere.

Typiske formkontrollobjekter - også kalt "widgets" - inkluderer følgende:

  • Tekstboks for å skrive inn en tekstlinje
  • Trykknapp for å velge en handling
  • Radioknapper for å gjøre ett valg blant en gruppe alternativer
  • Avkrysningsruter for å velge eller fjerne merket for et enkelt, uavhengig alternativ

Jeg gidder ikke å telle opp alle attributtene til disse kontrollene (widgets), og hvordan jeg bruker dem i HTML. Mest henvisning til HTML vil gi deg detaljene. For bruk med JavaScript, bør du alltid huske å oppgi et navn på selve skjemaet og hver kontroll du bruker. Navnene lar deg referere til objektet på din JavaScript-forbedrede side.

Den typiske formen ser slik ut. Legg merke til at jeg har gitt NAME = attributter for alle skjemakontrollene, inkludert selve skjemaet:

 Skriv inn noe i boksen:

  • FORM NAME = "myform" definerer og navngir skjemaet. Andre steder i JavaScript kan du referere til dette skjemaet med navnet myform. Navnet du gir skjemaet ditt er opp til deg, men det skal være i samsvar med JavaScripts standardregler for variabel / funksjonsnavn (ingen mellomrom, ingen rare tegn bortsett fra understreken osv.).
  • HANDLING = "" definerer hvordan du vil at nettleseren skal håndtere skjemaet når det sendes til et CGI-program som kjører på serveren. Siden dette eksemplet ikke er utformet for å sende inn noe, er URL-en for CGI-programmet utelatt.
  • METODE = "FÅ" definerer metoden data sendes til serveren når skjemaet sendes inn. I dette tilfellet er atttibute puffer da eksempelskjemaet ikke sender noe inn.
  • INNGANGSTYPE = "tekst" definerer tekstboksobjektet. Dette er standard HTML-markering.
  • INNGANGSTYPE = "knapp" definerer knappobjektet. Dette er standard HTML-markering bortsett fra onClick-behandleren.
  • onClick = "testResults (this.form)" er en hendelsesbehandler - den håndterer en hendelse, i dette tilfellet ved å klikke på knappen. Når du klikker på knappen, utfører JavaScript uttrykket i anførselstegnene. Uttrykket sier å ringe testResults-funksjonen et annet sted på siden, og overføre det gjeldende formobjektet.

Få en verdi fra et skjemaobjekt

La oss eksperimentere med å skaffe verdier fra formobjekter. Last inn siden, og skriv deretter inn noe i tekstboksen. Klikk på knappen, og det du skrev, vises i varselboksen.

Oppføring 1. testform.html

  Test Input function testResults (form) {var TestVar = form.inputbox.value; varsel ("Du skrev:" + TestVar); } Skriv inn noe i boksen:

Slik fungerer skriptet. JavaScript kaller testResults-funksjonen når du klikker på knappen i skjemaet. TestResults-funksjonen sendes formobjektet ved hjelp av syntaksen this.form (dette nøkkelordet refererer til knappekontrollen; skjemaet er en egenskap for knappekontrollen og representerer formobjektet). Jeg har gitt skjemaobjektet navnet skjema inne i testResult-funksjonen, men du kan hvilket som helst navn du liker.

TestResults-funksjonen er enkel - den kopierer bare innholdet i tekstboksen til en variabel som heter TestVar. Legg merke til hvordan det ble referert til innholdet i tekstboksen. Jeg definerte skjemaobjektet jeg ønsket å bruke (kalt skjema), objektet i formen jeg ønsket (kalt innboks), og eiendommen til det objektet jeg ønsket ( verdi eiendom).

Mer fra JavaWorld

Vil du ha flere programmeringsveiledninger og nyheter? Få JavaWorld Enterprise Java-nyhetsbrevet levert i innboksen din.

Angi en verdi i et skjemaobjekt

Verdieegenskapen til innboks, vist i eksemplet ovenfor, er både lesbar og skrivbar. Det vil si at du kan lese hva som er skrevet inn i boksen, og du kan skrive data tilbake i den. Prosessen med å sette verdien i et skjemaobjekt er bare motsatt av å lese den. Her er et kort eksempel for å demonstrere innstilling av en verdi i en skjematekstboks. Prosessen ligner på forrige eksempel, bortsett fra denne gangen er det to knapper. Klikk på "Les" -knappen, og skriptet leser det du skrev inn i tekstboksen. Klikk på "Skriv" -knappen, og skriptet skriver en spesielt grumsetning i tekstboksen.

Oppføring 2. set_formval.html

Testinngangsfunksjon readText (skjema) {TestVar = form.inputbox.value; varsel ("Du skrev:" + TestVar); }

function writeText (form) {form.inputbox.value = "Ha en fin dag!" } Skriv inn noe i boksen:

  • Når du klikker på "Les" -knappen, kaller JavaScript readText-funksjonen, som leser og viser verdien du skrev inn i tekstboksen.
  • Når du klikker på "Skriv" -knappen, kaller JavaScript skrivetekst-funksjonen, som skriver "Ha en fin dag!" i tekstboksen.

Lese andre formobjektverdier

Tekstboksen er kanskje det vanligste formobjektet du vil lese (eller skrive) ved hjelp av JavaScript. Du kan imidlertid bruke JavaScript til å lese og skrive verdier fra de fleste andre objekter (merk at JavaScript for øyeblikket ikke kan brukes til å lese eller skrive data ved hjelp av passordet tekstboksen). I tillegg til tekstfelt kan JavaScript brukes med:

  • Skjult tekstboks (TYPE = "skjult").
  • Radioknapp (TYPE = "radio")
  • Avkrysningsrute (TYPE = "avkrysningsrute")
  • Tekstområde ()
  • Lister ()

Bruke skjulte tekstbokser

Fra et JavaScript-synspunkt oppfører skjulte tekstbokser seg akkurat som vanlige tekstbokser, og deler de samme egenskapene og metodene. Fra et brukerperspektiv eksisterer ikke skjulte tekstbokser "fordi de ikke vises i skjemaet. Snarere er skjulte tekstbokser middel som spesiell informasjon kan overføres mellom server og klient. De kan også brukes til å lagre midlertidige data som du kanskje vil bruke senere. Fordi skjulte tekstbokser brukes som standard tekstbokser, vil ikke et eget eksempel bli gitt her.

Bruke radioknapper

Radioknapper brukes til å tillate brukeren å velge ett og bare ett element fra en gruppe alternativer. Radioknapper brukes alltid i flere; det er ingen logisk mening å ha bare en alternativknapp på et skjema, for når du klikker på det, kan du ikke fjerne det. Hvis du vil ha et enkelt klikk / fjern markering, bruk en avkrysningsrute i stedet (se nedenfor).

For å definere radioknapper for JavaScript, gi hvert objekt det samme navnet. JavaScript oppretter en matrise med navnet du har oppgitt; deretter refererer du til knappene ved hjelp av matriseindeksene. Den første knappen i serien er nummerert 0, den andre er nummerert 1 og så videre. Merk at VALUE-attributtet er valgfritt for bare JavaScript-skjemaer. Du vil imidlertid gi en verdi hvis du sender skjemaet til et CGI-program som kjører på serveren.

Følgende er et eksempel på å teste hvilken knapp som er valgt. For-loop i testButton-funksjonen blar gjennom alle knappene i "rad" -gruppen. Når den finner knappen som er valgt, bryter den ut av sløyfen og viser knappnummeret (husk: starter fra 0).

LIsting 3. form_radio.html

  Radio Button Test function testButton (form) {for (Count = 0; Count <3; Count ++) {if (form.rad [Count] .checked) break; } varsel ("Button" + Count + "er valgt"); }

Å sette et alternativknappvalg med HTML-markedet er enkelt. Hvis du vil at skjemaet først skal vises med en gitt alternativknapp valgt, legger du til CHECKED-attributtet i HTML-merkingen for den knappen:

Du kan også stille knappevalg programmatisk med JavaScript ved hjelp av den avmerkede egenskapen. Angi indeksen til alternativknappene du vil sjekke.

form.rad [0] .checked = true; // setter til første knapp i rad-gruppen

Bruke avkrysningsbokser

Avkrysningsbokser er frittstående elementer; det vil si at de ikke samhandler med nærliggende elementer slik radioknappene gjør. Derfor er de litt enklere å bruke. Ved hjelp av JavaScript kan du teste om en avkrysningsrute er merket av ved hjelp av den avmerkede egenskapen, som vist her. På samme måte kan du angi at den avmerkede egenskapen skal legge til eller fjerne haken fra en avkrysningsrute. I dette eksemplet forteller en varselmelding deg om den første avkrysningsruten er merket av. Verdien er sant hvis boksen er merket; falsk hvis det ikke er det.

Oppføring 4. form_check.html

  Avkrysningsrute Test funksjonstestKnapp (skjema) {alarm (form.check1.checked); }

Avkrysningsrute 1

Avkrysningsrute 2

Avkrysningsrute 3

Som med alternativknappobjektet, legg til et CHECKED-attributt i HTML-merkingen for den avkrysningsboksen du først vil sjekke når skjemaet først lastes inn.

Avkrysningsrute 1>

Du kan også stille knappevalg programmatisk med JavaScript ved hjelp av den avmerkede egenskapen. Spesifiser navnet på avkrysningsboksen du vil sjekke, som i

form.check1.checked = true;

Bruke tekstområder

Tekstområder brukes til tekstinntasting på flere linjer. Standardstørrelsen på tekstboksen er 1 rad med 20 tegn. Du kan endre størrelsen ved hjelp av attributtene COLS og ROWS. Her er et typisk eksempel på et tekstområde med en tekstboks på 40 tegn bredt med 7 rader:

Du kan bruke JavaScript til å lese innholdet i tekstområdet. Dette gjøres med verdiegenskapen. Her er et eksempel:

$config[zx-auto] not found$config[zx-overlay] not found