JavaScript en formulieren gebruiken

Javascript draagt ​​veel hoeden. U kunt JavaScript gebruiken om speciale effecten te creëren. U kunt JavaScript gebruiken om uw HTML-pagina's "slimmer" te maken door gebruik te maken van de besluitvormingsmogelijkheden. En u kunt JavaScript gebruiken om HTML-formulieren te verbeteren. Deze laatste toepassing is van bijzonder belang. Van alle hoeden die JavaScript kan dragen, behoren de functies voor formulierverwerking tot de meest gewilde en gebruikte.

Niets slaat meer angst in het hart van een webuitgever dan deze drie letters: CGI. CGI (wat staat voor common gateway interface), is een mechanisme om veilig gegevens van een client (een browser) naar een server te transporteren. Het wordt meestal gebruikt om gegevens van een HTML-formulier naar de server over te brengen.

Met JavaScript aan uw zijde kunt u eenvoudige formulieren verwerken zonder de server aan te roepen. En wanneer het indienen van het formulier bij een CGI-programma noodzakelijk is, kunt u JavaScript laten zorgen voor alle voorafgaande vereisten, zoals het valideren van invoer om ervoor te zorgen dat de gebruiker elke i heeft gestippeld. In deze kolom zullen we de JavaScript-formulierverbinding nauwkeurig bekijken, inclusief hoe u het JavaScript-formulierobject gebruikt, hoe u formulierinhoud leest en instelt en hoe u JavaScript-gebeurtenissen activeert door formulierbesturingselementen te manipuleren. We bespreken ook hoe u JavaScript kunt gebruiken om formulierinvoer te verifiëren en het formulier naar een CGI-programma kunt sturen.

JavaScript leren

Dit artikel maakt deel uit van het JavaWorld-archief met technische inhoud. U kunt veel leren over JavaScript-programmering door artikelen in de JavaScript-serie te lezen , maar houd er rekening mee dat sommige informatie waarschijnlijk verouderd is. Zie "Ingebouwde objecten van JavaScript gebruiken" en "Foutopsporing in JavaScript-programma's" voor meer informatie over programmeren met JavaScript.

Het formulier maken

Er zijn enkele verschillen tussen een gewoon HTML-formulier en een JavaScript-verbeterd formulier. De belangrijkste is dat een JavaScript-formulier afhankelijk is van een of meer gebeurtenishandlers, zoals onClick of onSubmit. Deze roepen een JavaScript-actie op wanneer de gebruiker iets in het formulier doet, zoals op een knop klikken. De gebeurtenishandlers, die bij de rest van de attributen in de HTML-formuliertags worden geplaatst, zijn onzichtbaar voor een browser die geen JavaScript ondersteunt. Vanwege deze eigenschap kunt u vaak één formulier gebruiken voor zowel JavaScript- als niet-JavaScript-browsers.

Typische formulierobjecten - ook wel "widgets" genoemd - zijn onder meer:

  • Tekstvak voor het invoeren van een regel tekst
  • Drukknop om een ​​actie te selecteren
  • Keuzerondjes voor het maken van een selectie uit een groep opties
  • Selectievakjes voor het in- of uitschakelen van een enkele, onafhankelijke optie

Ik zal niet de moeite nemen om alle kenmerken van deze bedieningselementen (widgets) op te sommen en hoe ze in HTML te gebruiken. De meeste verwijzingen in HTML geven u de details. Voor gebruik met JavaScript moet u altijd onthouden om een ​​naam op te geven voor het formulier zelf en elk besturingselement dat u gebruikt. Met de namen kunt u naar het object verwijzen op uw JavaScript-verbeterde pagina.

De typische vorm ziet er zo uit. Merk op dat ik NAME = attributen heb verstrekt voor alle formulierbesturingselementen, inclusief het formulier zelf:

 Enter something in the box:

  • FORM NAME = "myform" definieert en benoemt het formulier. Elders in het JavaScript kunt u naar dit formulier verwijzen met de naam myform . De naam die u uw formulier geeft, is aan u, maar het moet voldoen aan de standaard naamgevingsregels voor variabelen / functies van JavaScript (geen spaties, geen rare tekens behalve het onderstrepingsteken, enz.).
  • ACTION = "" definieert hoe u wilt dat de browser het formulier behandelt wanneer het wordt verzonden naar een CGI-programma dat op de server wordt uitgevoerd. Aangezien dit voorbeeld niet bedoeld is om iets in te dienen, wordt de URL voor het CGI-programma weggelaten.
  • METHOD = "GET" definieert de methode die gegevens worden doorgegeven aan de server wanneer het formulier wordt verzonden. In dit geval is het atttibute puffer aangezien het voorbeeldformulier niets indient.
  • INPUT TYPE = "text" definieert het tekstvakobject. Dit is standaard HTML-opmaak.
  • INPUT TYPE = "button" definieert het knopobject. Dit is standaard HTML-opmaak, behalve de onClick-handler.
  • onClick = "testResults (this.form)" is een event handler - het behandelt een event, in dit geval klikken op de knop. Wanneer op de knop wordt geklikt, voert JavaScript de uitdrukking uit binnen de aanhalingstekens. De uitdrukking zegt om de functie testResults ergens anders op de pagina aan te roepen en het huidige formulierobject eraan door te geven.

Een waarde ophalen uit een formulierobject

Laten we experimenteren met het verkrijgen van waarden uit formulierobjecten. Laad de pagina en typ iets in het tekstvak. Klik op de knop en wat u hebt getypt, wordt weergegeven in het waarschuwingsvenster.

Aanbieding 1. testform.html

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

Hier is hoe het script werkt. JavaScript roept de functie testResults aan wanneer u op de knop in het formulier klikt. De functie testResults wordt doorgegeven aan het formulierobject met behulp van de syntaxis this.form (het trefwoord this verwijst naar het knopbesturingselement; formulier is een eigenschap van het knopbesturingselement en vertegenwoordigt het formulierobject). Ik heb het formulier object de naam die gegeven vorm binnen het testresultaat functie, maar je kunt u een naam wilt.

De functie testResults is eenvoudig: het kopieert alleen de inhoud van het tekstvak naar een variabele met de naam TestVar. Merk op hoe er naar de inhoud van het tekstvak werd verwezen. Ik definieerde het formulierobject dat ik wilde gebruiken (genaamd formulier ), het object binnen het formulier dat ik wilde (genaamd inputbox ), en de eigenschap van dat object dat ik wilde (de eigenschap value ).

Meer van JavaWorld

Wilt u meer programmeertutorials en nieuws? Ontvang de JavaWorld Enterprise Java-nieuwsbrief in uw inbox.

Een waarde instellen in een formulierobject

De waarde-eigenschap van de inputbox, die in het bovenstaande voorbeeld wordt getoond, is zowel leesbaar als beschrijfbaar. Dat wil zeggen, u kunt lezen wat er in het vak is getypt en u kunt er gegevens in terugschrijven. Het proces van het instellen van de waarde in een formulierobject is precies het omgekeerde van het lezen ervan. Hier is een kort voorbeeld om te demonstreren dat u een waarde instelt in een formuliertekstvak. Het proces is vergelijkbaar met het vorige voorbeeld, behalve deze keer zijn er twee knoppen. Klik op de knop "Lezen" en het script leest wat u in het tekstvak hebt getypt. Klik op de knop "Schrijven" en het script schrijft een bijzonder lugubere zin in het tekstvak.

Aanbieding 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:

  • Wanneer u op de knop "Lezen" klikt, roept JavaScript de functie readText aan, die de waarde leest en weergeeft die u in het tekstvak hebt ingevoerd.
  • Wanneer u op de knop "Schrijven" klikt, roept JavaScript de functie writeText aan, die schrijft "Een prettige dag!" in het tekstvak.

Lezen van andere formulierobjectwaarden

Het tekstvak is misschien wel het meest voorkomende formulierobject dat u leest (of schrijft) met JavaScript. U kunt JavaScript echter gebruiken om waarden van de meeste andere objecten te lezen en te schrijven (merk op dat JavaScript momenteel niet kan worden gebruikt om gegevens te lezen of te schrijven met het wachtwoordtekstvak). Naast tekstvakken kan JavaScript worden gebruikt met:

  • Verborgen tekstvak (TYPE = "verborgen").
  • Keuzerondje (TYPE = "radio")
  • Selectievakje (TYPE = "checkbox")
  • Tekstgebied ()
  • Lijsten ()

Verborgen tekstvakken gebruiken

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

Tekstgebieden worden gebruikt voor tekstinvoer met meerdere regels. De standaardgrootte van het tekstvak is 1 rij bij 20 tekens. U kunt de grootte wijzigen met de attributen COLS en ROWS. Hier is een typisch voorbeeld van een tekstgebied met een tekstvak van 40 tekens breed en 7 rijen:

U kunt JavaScript gebruiken om de inhoud van het tekstgebiedvak te lezen. Dit gebeurt met de waarde-eigenschap. Hier is een voorbeeld: