Använda JavaScript och formulär

Javascript bär många hattar. Du kan använda JavaScript för att skapa specialeffekter. Du kan använda JavaScript för att göra dina HTML-sidor "smartare" genom att utnyttja dess möjligheter att fatta beslut. Och du kan använda JavaScript för att förbättra HTML-formulär. Denna sista tillämpning är av särskild betydelse. Av alla hattar som JavaScript kan bära är dess formbehandlingsfunktioner bland de mest eftertraktade.

Ingenting slår mer rädsla i hjärtat hos en webbutgivare än dessa tre bokstäver: CGI. CGI (som står för gemensamt gatewaygränssnitt) är en mekanism för att säkert transportera data från en klient (en webbläsare) till en server. Det används vanligtvis för att överföra data från ett HTML-formulär till servern.

Med JavaScript vid din sida kan du bearbeta enkla formulär utan att åberopa servern. Och när det är nödvändigt att skicka formuläret till ett CGI-program kan du låta JavaScript ta hand om alla preliminära krav, till exempel att validera inmatning för att säkerställa att användaren har prickat varje i. I den här kolumnen tittar vi noga på JavaScript-formanslutningen, inklusive hur man använder JavaScript-formulärobjekt, hur man läser och ställer in formulärinnehåll och hur man utlöser JavaScript-händelser genom att manipulera formulärkontroller. Vi kommer också att beskriva hur man använder JavaScript för att verifiera formulärinmatning och summera formuläret till ett CGI-program.

Lärande JavaScript

Den här artikeln är en del av JavaWorlds tekniska innehållsarkiv. Du kan lära dig mycket om JavaScript-programmering genom att läsa artiklar i JavaScript-serien , kom bara ihåg att en del av informationen sannolikt kommer att vara föråldrad. Se "Använda JavaScript-inbyggda objekt" och "Felsöka JavaScript-program" för mer information om programmering med JavaScript.

Skapa formuläret

Det finns få skillnader mellan en rak HTML-form och en JavaScript-förbättrad form. Det viktigaste är att ett JavaScript-formulär är beroende av en eller flera händelsehanterare, som onClick eller onSubmit. Dessa åberopar en JavaScript-åtgärd när användaren gör något i formuläret, som att klicka på en knapp. Händelsehanterarna, som placeras med resten av attributen i HTML-formtaggarna, är osynliga för en webbläsare som inte stöder JavaScript. På grund av denna egenskap kan du ofta använda ett formulär för både JavaScript och icke-JavaScript-webbläsare.

Typiska formkontrollobjekt - även kallade "widgets" - inkluderar följande:

  • Textruta för att ange en textrad
  • Tryckknapp för att välja en åtgärd
  • Radioknappar för att göra ett val bland en grupp alternativ
  • Kryssrutor för att välja eller avmarkera ett enda, oberoende alternativ

Jag bryr mig inte om att räkna upp alla attribut för dessa kontroller (widgets) och hur man använder dem i HTML. Mest av alla referenser på HTML kommer att ge dig detaljerna. För användning med JavaScript bör du alltid komma ihåg att ange ett namn för själva formuläret och varje kontroll du använder. Namnen låter dig referera till objektet på din JavaScript-förbättrade sida.

Den typiska formen ser ut så här. Observera att jag har angett NAME = attribut för alla formulärkontroller, inklusive själva formuläret:

 Enter something in the box:

  • FORM NAME = "myform" definierar och namnger formuläret. Annars i JavaScript kan du referera till detta formulär med namnet myform . Namnet du ger ditt formulär är upp till dig, men det ska överensstämma med JavaScript: s standardvariabler / funktionsnamnregler (inga mellanslag, inga konstiga tecken utom understrykning osv.).
  • ACTION = "" definierar hur du vill att webbläsaren ska hantera formuläret när det skickas till ett CGI-program som körs på servern. Eftersom detta exempel inte är utformat för att skicka någonting utelämnas URL: en för CGI-programmet.
  • METOD = "GET" definierar metoddata som skickas till servern när formuläret skickas. I det här fallet är attttibute puffer eftersom exempelformuläret inte ger något.
  • INPUT TYPE = "text" definierar textrutans objekt. Detta är standard HTML-markering.
  • INPUT TYPE = "knapp" definierar knappobjektet. Detta är standard HTML-markering förutom onClick-hanteraren.
  • onClick = "testResults (this.form)" är en händelsehanterare - den hanterar en händelse, i detta fall klickar du på knappen. När du klickar på knappen kör JavaScript uttrycket inom offerten. Uttrycket säger att kalla testResults-funktionen någon annanstans på sidan och vidarebefordra det aktuella formobjektet.

Få ett värde från ett formulärobjekt

Låt oss experimentera med att få värden från formobjekt. Ladda sidan och skriv sedan något i textrutan. Klicka på knappen och det du skrev visas i varningsrutan.

Listing 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Så här fungerar manuset. JavaScript anropar funktionen testResults när du klickar på knappen i formuläret. TestResults-funktionen skickas formobjektet med syntaxen this.form (det här nyckelordet refererar till knappkontrollen; formen är en egenskap hos knappkontrollen och representerar formobjektet). Jag har gett formulärobjektet namnformen i testResult-funktionen, men du kan välja vilket namn du vill.

TestResults-funktionen är enkel - den kopierar bara innehållet i textrutan till en variabel med namnet TestVar. Lägg märke till hur textrutans innehåll hänvisades. Jag definierade det formobjekt jag ville använda (kallat formulär ), objektet i det formulär som jag ville (kallat inmatningsruta ) och egenskapen för det objektet jag ville ha ( värdegenskapen ).

Mer från JavaWorld

Vill du ha mer programmeringshandledning och nyheter? Få JavaWorld Enterprise Java-nyhetsbrevet levererat till din inkorg.

Ställa in ett värde i ett formulärobjekt

Inmatningsboxens värdeegenskap, som visas i exemplet ovan, är både läsbar och skrivbar. Det vill säga, du kan läsa vad som helst som skrivs in i rutan och du kan skriva tillbaka data i den. Processen med att ställa in värdet i ett formulärobjekt är bara motsatsen till att läsa det. Här är ett kort exempel för att demonstrera inställning av ett värde i en formulärtextruta. Processen liknar föregående exempel, förutom att den här gången finns två knappar. Klicka på "Läs" -knappen och skriptet läser det du skrev i textrutan. Klicka på "Skriv" -knappen och manuset skriver en särskilt lurra fras i textrutan.

Listing 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • När du klickar på "Läs" -knappen anropar JavaScript readText-funktionen, som läser och visar det värde du angav i textrutan.
  • När du klickar på "Skriv" -knappen kallar JavaScript för skrivText-funktionen, som skriver "Ha en trevlig dag!" i textrutan.

Läser andra formobjektvärden

Textrutan är kanske det vanligaste formobjektet du läser (eller skriver) med JavaScript. Du kan dock använda JavaScript för att läsa och skriva värden från de flesta andra objekt (notera att JavaScript för närvarande inte kan användas för att läsa eller skriva data med lösenordet textrutan). Förutom textrutor kan JavaScript användas med:

  • Dold textruta (TYPE = "dold").
  • Radioknapp (TYPE = "radio")
  • Kryssruta (TYPE = "kryssruta")
  • Textområde ()
  • Listor ()

Använda dolda textrutor

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

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

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Textområden används för textinmatning med flera rader. Standardrutan för textrutan är 1 rad med 20 tecken. Du kan ändra storlek med attributen COLS och ROWS. Här är ett typiskt exempel på ett textområde med en textruta med 40 tecken breda och 7 rader:

Du kan använda JavaScript för att läsa innehållet i textområdet. Detta görs med värdegenskapen. Här är ett exempel: