Korištenje JavaScript-a i obrazaca

Javascript nosi mnoge kape. Pomoću JavaScripta možete stvoriti posebne efekte. Pomoću JavaScripta možete učiniti vaše HTML stranice "pametnijima" iskorištavajući njegove mogućnosti donošenja odluka. A JavaScript možete koristiti za poboljšanje HTML obrazaca. Ova posljednja aplikacija je od posebne važnosti. Od svih šešira koje JavaScript može nositi, njegove značajke obrade oblika su među najtraženijim i najkorištenijim.

Ništa ne pobuđuje veći strah u srcu web izdavača od ova tri slova: CGI. CGI (što je zajedničko sučelje pristupnika) mehanizam je za siguran prijenos podataka s klijenta (preglednika) na poslužitelj. Obično se koristi za prijenos podataka iz HTML obrasca na poslužitelj.

S JavaScriptom uz sebe, možete obrađivati ​​jednostavne obrasce bez pozivanja poslužitelja. A kad je potrebno predati obrazac CGI programu, možete imati JavaScript da se pobrine za sve preliminarne zahtjeve, kao što je provjera valjanosti unosa kako bi se osiguralo da je korisnik stavio točku na svaku i. U ovom ćemo stupcu pomno pogledati vezu JavaScript obrasca, uključujući kako koristiti objekt obrasca JavaScript, kako čitati i postavljati sadržaj obrasca te kako pokretati JavaScript događaje manipuliranjem kontrola obrasca. Također ćemo opisati kako koristiti JavaScript za provjeru unosa obrasca i postavljanje obrasca u CGI program.

Učenje JavaScript-a

Ovaj je članak dio arhive tehničkog sadržaja JavaWorld. Čitajući članke u JavaScript seriji možete naučiti puno o programiranju JavaScript , samo imajte na umu da će neke informacije vjerojatno zastarjeti. Pogledajte "Korištenje ugrađenih objekata JavaScript" i "Otklanjanje pogrešaka JavaScript programa" za više informacija o programiranju s JavaScriptom.

Izrada obrasca

Postoji nekoliko razlika između izravnog HTML obrasca i obrasca poboljšanog JavaScriptom. Glavno je da se JavaScript obrazac oslanja na jednog ili više rukovatelja događajima, poput onClick ili onSubmit. Oni pozivaju JavaScript akciju kada korisnik učini nešto u obrascu, poput klika na gumb. Obrađivači događaja, koji su smješteni s ostatkom atributa u oznake HTML obrasca, nevidljivi su pregledniku koji ne podržava JavaScript. Zbog ove osobine često možete koristiti jedan obrazac i za JavaScript i za ne-JavaScript preglednike.

Tipični objekti za kontrolu oblika - koji se nazivaju i "widgeti" - uključuju sljedeće:

  • Tekstualni okvir za unos retka teksta
  • Pritisnite gumb za odabir radnje
  • Radio gumbi za odabir između grupe opcija
  • Potvrdni okviri za odabir ili poništavanje odabira jedne, neovisne opcije

Neću se truditi nabrajati sve atribute ovih kontrola (widgeta) i kako ih koristiti u HTML-u. Većina bilo koje reference na HTML pružit će vam detalje. Za upotrebu s JavaScriptom, uvijek biste trebali upamtiti da navedete naziv za sam obrazac i svaku kontrolu koju koristite. Imena vam omogućuju referencu na objekt na vašoj stranici poboljšanoj JavaScript.

Tipični oblik izgleda ovako. Obavijest da sam dao NAME = atribute za sve kontrole obrasca, uključujući sam obrazac:

 Enter something in the box:

  • NAZIV OBRAZCA = "myform" definira i imenuje obrazac. Na drugom mjestu u JavaScript-u ovaj obrazac možete uputiti imenom myform . Ime koje ćete dati svom obrascu ovisi o vama, ali ono bi trebalo biti u skladu sa standardnim JavaScript pravilima imenovanja varijabli / funkcije (bez razmaka, bez čudnih znakova, osim podvlake itd.).
  • ACTION = "" definira na koji način želite da preglednik obrađuje obrazac kada se on preda CGI programu pokrenutom na poslužitelju. Budući da ovaj primjer nije namijenjen za podnošenje bilo čega, izostavljen je URL za CGI program.
  • METHOD = "GET" definira da se podaci o metodi prosljeđuju poslužitelju kada se obrazac preda. U ovom slučaju atribut je puffer jer obrazac za primjer ne podnosi ništa.
  • INPUT TYPE = "text" definira objekt tekstualnog okvira. Ovo je standardno HTML označavanje.
  • VRSTA ULAZA = "gumb" definira objekt gumba. Ovo je standardno HTML označavanje, osim za onClick rukovatelj.
  • onClick = "testResults (this.form)" je rukovatelj događajima - on obrađuje događaj, u ovom slučaju klikom na gumb. Kada se klikne gumb, JavaScript izvršava izraz unutar navodnika. Izraz kaže da treba pozvati funkciju testResults negdje drugdje na stranici i prenijeti joj trenutni objekt obrasca.

Dobivanje vrijednosti iz objekta oblika

Pokušajmo s dobivanjem vrijednosti iz objekata oblika. Učitajte stranicu, a zatim upišite nešto u okvir za tekst. Kliknite gumb i ono što ste upisali prikazat će se u okviru upozorenja.

Popis 1. testform.html

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

Evo kako skripta djeluje. JavaScript poziva funkciju testResults kada kliknete gumb u obrascu. Funkciji testResults prosljeđuje se objekt obrasca koristeći sintaksu this.form (ova se ključna riječ odnosi na kontrolu gumba; obrazac je svojstvo kontrole gumba i predstavlja objekt obrasca). Objektu obrasca dao sam naziv oblika unutar funkcije testResult, ali možete bilo koje ime koje želite.

Funkcija testResults je jednostavna - ona samo kopira sadržaj tekstualnog okvira u varijablu nazvanu TestVar. Primijetite kako je naveden sadržaj okvira za tekst. Definirao sam objekt oblika koji sam želio koristiti (nazvan obrazac ), objekt unutar obrasca koji sam želio (nazvan ulazni okvir ) i svojstvo tog objekta koji sam želio ( svojstvo vrijednosti ).

Više od JavaWorlda

Želite još vodiča i vijesti iz programiranja? Dohvatite JavaWorld Enterprise Java bilten dostavljen u vašu pristiglu poštu.

Postavljanje vrijednosti u objektu obrasca

The value property of the inputbox, shown in the above example, is both readable and writable. That is, you can read whatever is typed into the box, and you can write data back into it. The process of setting the value in a form object is just the reverse of reading it. Here's a short example to demonstrate setting a value in a form text box. The process is similar to the previous example, except this time there are two buttons. Click the "Read" button and the script reads what you typed into the text box. Click the "Write" button and the script writes a particularly lurid phrase into the text box.

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:

  • When you click the "Read" button, JavaScript calls the readText function, which reads and displays the value you entered into the text box.
  • When you click the "Write" button, JavaScript calls the writeText function, which writes "Have a nice day!" in the text box.

Reading other form object values

The text box is perhaps the most common form object you'll read (or write) using JavaScript. However, you can use JavaScript to read and write values from most other objects (note that JavaScript cannot currently be used to read or write data using the password text box). In addition to text boxes, JavaScript can be used with:

  • Hidden text box (TYPE="hidden").
  • Radio button (TYPE="radio")
  • Check box (TYPE="checkbox")
  • Text area ()
  • Lists ()

Using Hidden Text Boxes

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

Tekstualna područja koriste se za unos teksta u više redaka. Zadana veličina okvira za tekst je 1 redak s 20 znakova. Veličinu možete promijeniti pomoću atributa COLS i ROWS. Evo tipičnog primjera tekstualnog područja s tekstnim okvirom širine 40 znakova i 7 redaka:

Možete koristiti JavaScript za čitanje sadržaja okvira za područje teksta. To se radi sa svojstvom value. Evo primjera: