• 
  

  hur du uppdaterar ett formulär värde i farten med hjälp av JavaScript

  
  

Javascript är händelsestyrd modell tillåter utvecklare att lägga aktivitet när användaren gör något i webbläsaren . Börjar utvecklarna lär sig snabbt hur man hanterar en knapp klickar du med " onClick " händelse , men det finns också händelser för " onChange "för att känna av när form värderingar förändras och " onBlur "för att känna av när markören flyttas från en kontroll till en annan . Genom att använda onChange händelsen att ställa in andra värden form kontroll , kan webbformulär ska uppdateras dynamiskt. Öva uppdatering form värden genom att bygga ett enkelt webbformulär som beräknar totala kostnaden genom att känna förändringar i kvantitet och pris.

Du behöver :
HTML editor



1
Öppna en HTML- redigerare och skapa en ny webbsida . . Spara det som " testPage. html " .
2 .
Lägg till ett formulär på sidan , lägg sedan till tre rutor textinmatning . Namn rutorna " Antal ", " pris " och " totalPrice . " Gör " totalPrice " read only . Ge varje textruta bildtexterna "Antal ", " Enhetspris " och " Total Price " respektive .
3 .
Lägg onChange händelser till " Antal " och " pris " så att de båda kallar funktionen " price_change . " När alla kontroller läggs till, bör koden för formuläret har följande lydelse:







Antal :






Enhetspris :

;




Totalt Pris :






4 .
Definiera JavaScript -funktionen " price_change . "







" toString " metoden konverterar numret tillbaka till en textsträng .
8 .
Ladda filen i Internet Explorer , Firefox eller annan webbläsaren och ge det ett försök . Som värden förändras är det totala priset omräknats . Om någon text låda innehåller en tom eller icke-numeriskt värde , till det totala prisförändringar NAN för att visa att detta inte är ett tal.


tips och varningar




Tilläggskod bör läggas till förnuft när icke-numeriska värden matas in . Lägg till ett " div " i slutet av formuläret och ange dess " innerHTML " egendom för att få felmeddelanden på sidan .

Previous：nothing Next：hur man gör en sökning primärnyckel i tillgång

Relaterade artiklar