Brug af JavaScript og formularer

Javascript bærer mange hatte. Du kan bruge JavaScript til at oprette specielle effekter. Du kan bruge JavaScript til at gøre dine HTML-sider "smartere" ved at udnytte dens beslutningsprocesser. Og du kan bruge JavaScript til at forbedre HTML-formularer. Denne sidste anvendelse er af særlig betydning. Af alle de hatte, JavaScript kan bære, er dets formbehandlingsfunktioner blandt de mest efterspurgte og brugte.

Intet rammer mere frygt i hjertet af en webudgiver end disse tre breve: C-G-I. CGI (som står for fælles gateway-interface) er en mekanisme til sikker transport af data fra en klient (en browser) til en server. Det bruges typisk til at overføre data fra en HTML-formular til serveren.

Med JavaScript ved din side kan du behandle enkle formularer uden at påkalde serveren. Og når det er nødvendigt at indsende formularen til et CGI-program, kan du lade JavaScript tage sig af alle de indledende krav, såsom validering af input for at sikre, at brugeren har stiplet hvert i. I denne kolonne vil vi se nøje på JavaScript-form-forbindelsen, herunder hvordan man bruger JavaScript's formobjekt, hvordan man læser og indstiller formularindhold, og hvordan man udløser JavaScript-begivenheder ved at manipulere formkontroller. Vi vil også dække, hvordan du bruger JavaScript til at verificere formularinput og sumbit formularen til et CGI-program.

Læring af JavaScript

Denne artikel er en del af JavaWorlds tekniske indholdsarkiv. Du kan lære meget om JavaScript-programmering ved at læse artikler i JavaScript-serie, bare husk at nogle af oplysningerne sandsynligvis vil være forældede. Se "Brug af JavaScript's indbyggede objekter" og "Fejlfinding af JavaScript-programmer" for mere om programmering med JavaScript.

Oprettelse af formularen

Der er få forskelle mellem en lige HTML-form og en JavaScript-forbedret form. Det vigtigste er, at en JavaScript-form er afhængig af en eller flere begivenhedshåndterere, såsom onClick eller onSubmit. Disse påberåber en JavaScript-handling, når brugeren gør noget i formularen, som f.eks. At klikke på en knap. Begivenhedshåndtererne, der er placeret med resten af attributterne i HTML-form-tags, er usynlige for en browser, der ikke understøtter JavaScript. På grund af dette træk kan du ofte bruge en formular til både JavaScript og ikke-JavaScript-browsere.

Typiske formkontrolobjekter - også kaldet "widgets" - inkluderer følgende:

Tekstfelt til indtastning af en tekstlinje
Tryk på knappen for at vælge en handling
Radioknapper til at foretage et valg blandt en gruppe af muligheder
Afkrydsningsfelter for at vælge eller fravælge en enkelt, uafhængig mulighed

Jeg gider ikke tælle alle attributterne til disse kontroller (widgets), og hvordan man bruger dem i HTML. Mest henvisning til HTML giver dig detaljerne. Til brug med JavaScript skal du altid huske at angive et navn til selve formularen og hver kontrol, du bruger. Navnene giver dig mulighed for at henvise til objektet på din JavaScript-forbedrede side.

Den typiske form ser sådan ud. Bemærk, at jeg har leveret NAME = attributter til alle formkontrolelementer, inklusive selve formularen:

Indtast noget i feltet:

FORM NAVN = "myform" definerer og navngiver formularen. Andetsteds i JavaScript kan du henvise til denne formular ved navn myform. Det navn, du giver din formular, er op til dig, men det skal overholde JavaScript's standardvariabler / navngivningsregler for funktioner (ingen mellemrum, ingen underlige tegn undtagen understregning osv.).
HANDLING = "" definerer, hvordan du vil have browseren til at håndtere formularen, når den sendes til et CGI-program, der kører på serveren. Da dette eksempel ikke er designet til at indsende noget, udelades URL'en til CGI-programmet.
METODE = "FÅ" definerer metodedataene, der sendes til serveren, når formularen sendes. I dette tilfælde er atttibute puffer, da eksempelformularen ikke indsender noget.
INPUT TYPE = "tekst" definerer tekstboksobjektet. Dette er standard HTML-markering.
INPUT TYPE = "knap" definerer knapobjektet. Dette er standard HTML-markering bortset fra onClick-handler.
onClick = "testResults (this.form)" er en begivenhedshåndterer - den håndterer en begivenhed, i dette tilfælde ved at klikke på knappen. Når der klikkes på knappen, udfører JavaScript udtrykket inden for anførselstegnene. Udtrykket siger at kalde testResults-funktionen andetsteds på siden og videregive det aktuelle formobjekt til det.

Få en værdi fra et formularobjekt

Lad os eksperimentere med at opnå værdier fra formobjekter. Indlæs siden, og skriv derefter noget i tekstboksen. Klik på knappen, og det, du skrev, vises i advarselsfeltet.

Liste 1. testform.html

  Test Input-funktion testResults (form) {var TestVar = form.inputbox.value; alarm ("Du skrev:" + TestVar); } Indtast noget i feltet:

Sådan fungerer scriptet. JavaScript kalder funktionen testResults, når du klikker på knappen i formularen. TestResults-funktionen sendes formobjektet ved hjælp af syntaksen this.form (dette nøgleord refererer til knappen kontrol; form er en egenskab ved knappen kontrol og repræsenterer form objektet). Jeg har givet formularobjektet navnet form inde i testResult-funktionen, men du kan ethvert navn, du kan lide.

Funktionen testResults er enkel - den kopierer kun indholdet af tekstboksen til en variabel ved navn TestVar. Læg mærke til, hvordan tekstfeltets indhold blev henvist. Jeg definerede det formularobjekt, jeg ønskede at bruge (kaldet form), objektet i den form, som jeg ønskede (kaldet indbakke) og ejendommen til det objekt, jeg ønskede ( værdi ejendom).

Mere fra JavaWorld

Vil du have flere programmeringsvejledninger og nyheder? Få JavaWorld Enterprise Java-nyhedsbrevet leveret til din indbakke.

Indstilling af en værdi i et formularobjekt

Inputkassens værdiegenskab, vist i eksemplet ovenfor, er både læsbar og skrivbar. Det vil sige, du kan læse hvad der er skrevet i boksen, og du kan skrive data tilbage i den. Processen med at indstille værdien i et formobjekt er bare det modsatte af at læse den. Her er et kort eksempel for at demonstrere indstilling af en værdi i et formulartekstfelt. Processen ligner det foregående eksempel, bortset fra denne gang er der to knapper. Klik på knappen "Læs", og scriptet læser det, du skrev i tekstboksen. Klik på "Skriv" -knappen, og scriptet skriver en særlig lurrat sætning i tekstboksen.

Annonce 2. set_formval.html

  Testinputfunktion readText (form) {TestVar = form.inputbox.value; alarm ("Du skrev:" + TestVar); } 
funktion writeText (form) {form.inputbox.value = "Hav en dejlig dag!" } Indtast noget i feltet:

Når du klikker på knappen "Læs", kalder JavaScript readText-funktionen, som læser og viser den værdi, du indtastede i tekstboksen.
Når du klikker på knappen "Skriv", kalder JavaScript for skrivText-funktionen, som skriver "Hav en dejlig dag!" i tekstfeltet.

Læsning af andre formobjektværdier

Tekstfeltet er måske det mest almindelige formobjekt, du læser (eller skriver) ved hjælp af JavaScript. Du kan dog bruge JavaScript til at læse og skrive værdier fra de fleste andre objekter (bemærk, at JavaScript i øjeblikket ikke kan bruges til at læse eller skrive data ved hjælp af tekstfeltet med adgangskode). Ud over tekstfelter kan JavaScript bruges med:

Skjult tekstfelt (TYPE = "skjult").
Radioknap (TYPE = "radio")
Afkrydsningsfelt (TYPE = "afkrydsningsfelt")
Tekstområde ()
Lister ()

Brug af skjulte tekstfelter

Fra et JavaScript-synspunkt opfører skjulte tekstfelter sig ligesom almindelige tekstfelter og deler de samme egenskaber og metoder. Fra et brugersynspunkt findes skjulte tekstfelter "ikke", fordi de ikke vises i formularen. Snarere er skjulte tekstfelter det middel, hvormed speciel information kan overføres mellem server og klient. De kan også bruges til at gemme midlertidige data, som du måske vil bruge senere. Da skjulte tekstfelter bruges som standard tekstfelter, gives der ikke et separat eksempel her.

Brug af radioknapper

Radioknapper bruges til at give brugeren mulighed for at vælge et og kun et element fra en gruppe af indstillinger. Radioknapper bruges altid i multipla; der er ingen logisk mening i at have kun en alternativknap på en formular, for når du først klikker på den, kan du ikke fjerne den. Hvis du ønsker et simpelt klik / afklik valg, skal du bruge et afkrydsningsfelt i stedet (se nedenfor).

For at definere radioknapper til JavaScript skal du give hvert objekt det samme navn. JavaScript opretter et array ved hjælp af det navn, du har angivet; du henviser derefter til knapperne ved hjælp af matrixindekserne. Den første knap i serien er nummereret 0, den anden er nummereret 1 osv. Bemærk, at VALUE-attributten er valgfri for kun JavaScript-formularer. Du vil dog gerne angive en værdi, hvis du dog sender formularen til et CGI-program, der kører på serveren.

Følgende er et eksempel på test af hvilken knap der er valgt. For-loop i testButton-funktionen går gennem alle knapperne i "rad" -gruppen. Når den finder den valgte knap, bryder den ud af sløjfen og viser knapnummeret (husk: startende fra 0).

LIsting 3. form_radio.html

  Radio Button Test funktion testButton (form) {for (Count = 0; Count <3; Count ++) {hvis (form.rad [Count]. Afkrydset) pause; } alarm ("Button" + Count + "er valgt"); }

At indstille et valg af radioknapper med HTML-markedet er enkelt. Hvis du ønsker, at formularen oprindeligt skal vises med en given alternativknap valgt, skal du tilføje CHECKED-attributten til HTML-markeringen for den knap:

Du kan også indstille knappevalg programmatisk med JavaScript ved hjælp af den markerede egenskab. Angiv indekset for det radioknappearray, du vil kontrollere.

form.rad [0]. afkrydset = sandt; // indstiller til første knap i rad-gruppen

Brug af afkrydsningsfelter

Afkrydsningsfelter er enkeltstående elementer; det vil sige, at de ikke interagerer med naboelementer, som radioknapper gør. Derfor er de lidt nemmere at bruge. Ved hjælp af JavaScript kan du teste, om et afkrydsningsfelt er markeret ved hjælp af den afkrydsede egenskab, som vist her. På samme måde kan du indstille den afkrydsede egenskab til at tilføje eller fjerne markeringen fra et afkrydsningsfelt. I dette eksempel fortæller en advarselsmeddelelse dig, om det første afkrydsningsfelt er markeret. Værdien er sand, hvis feltet er markeret; falsk, hvis det ikke er tilfældet.

Annonce 4. form_check.html

  Afkrydsningsfelt Testfunktion testButton (form) {alarm (form.check1.checked); }
Afkrydsningsfelt 1
Afkrydsningsfelt 2
Afkrydsningsfelt 3

Som med alternativet til radioknappen skal du tilføje en CHECKED-attribut til HTML-markeringen for det afkrydsningsfelt, du oprindeligt ønsker at kontrollere, når formularen først indlæses.

Afkrydsningsfelt 1>

Du kan også indstille knappevalg programmatisk med JavaScript ved hjælp af den markerede egenskab. Angiv navnet på det afkrydsningsfelt, du vil kontrollere, som i

form.check1.checked = sand;

Brug af tekstområder

Tekstområder bruges til tekstindtastning med flere linjer. Tekstfeltets standardstørrelse er 1 række med 20 tegn. Du kan ændre størrelsen ved hjælp af attributterne COLS og ROWS. Her er et typisk eksempel på et tekstområde med et tekstfelt på 40 tegn bredt med 7 rækker:

Du kan bruge JavaScript til at læse indholdet af tekstområdet. Dette gøres med egenskaben værdi. Her er et eksempel: