ࡱ > 5@ 1 bjbj22 " X X ) K K K K , "L e O O O O O O O O -e /e /e /e /e /e /e $ f R h x Se IP O O IP IP Se O O he Y Y Y IP . O O -e Y IP -e Y $ Y ;Y [ \ O O J K wV R [ Q\ ~e 0 e [ , ni V D ni \ ni \ H O > XO , Y O $ O O O O Se Se % ' D$ Y ' Form examples HTML forms generally are used for the site visitor to enter information that is sent off to another script to be processed. This processing often is done with what is termed middleware or server-side scripting or programming. This is programming done on the server computer where the files are stored as opposed to the client computer running the browser program. However, you can use JavaScript to process form information. This is sometimes called client-side scripting. All the JavaScript discussed in this course is client-side scripting. The JavaScript code presents the results back to the visitor using fields in the form, alert statements or changing the contents of the HTML page using what is called dynamic HTML. This tutorial makes use of the first way: using fields in the form. The fields are input elements, but they are used for output! Here is a line by line explanation of each of the forms examples. Each example uses the same approach. The form tag has an onsubmit attribute that specifies a call to a function. To put it another way, the function does the handling for the event of the form being submitted. The function processes the form data. The results are placed in input fields in the form. The concept of data type was discussed in the introductory notes. The type of data entered into forms is character string (also called simply string). However, in some cases, these strings are meant to be interpreted as numbers. In some cases, it seems like this conversion to numbers is done by itself and in other cases, something needs to be done explicitly. See the explanations. The first example does calculations based on the user entering in data representing the number of boxes of chocolate and boxes of cocoa. The data is converted to be numbers because they are multiplied by variables holding numbers representing the prices. If you try this with different values, you will notice that some of the time, the price totals are not properly formatted. You will learn how to fix this in the next example.
Start body, heading
End form. End body.End html. Exercises: Change the constant values in all of these examples. Test to make sure it does what you expected. In the adding up numbers exercise, remove the 1* to make the line read: total = f.one.value + f.two.value + f.three.value; and try the program. What do you think is happening? The answer is that the data is being treated as strings and the + operator is string concatenation. Put the formatting code in the last example into the first example. { 3 " 9 : d e D N O o d e } 9 : N ` a 4 5 N ̶̶h1 5OJ QJ ^J hw5 hw5 h;@ hw5 hw5 5OJ QJ ^J h1 h`4 h l hC 5OJ QJ ^J hC h l hY hw5 H l m d e D O P h z kd $$If l 0 _," t 0 6 4 4 l a $If gdw5 $If gdC gdw5 gdw5 1 P o e r z kd_ $$If l 0 _," t 0 6 4 4 l a $If gdw5 $If gdC e f { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd| $$If l 0 _," t 0 6 4 4 l a : { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a : ; N a { r $If gdw5 $If gdC z kd: $$If l 0 _," t 0 6 4 4 l a a b { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a 5 { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a 5 6 N { r $If gdw5 $If gdC z kdW $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a 2 { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a 1 2 @ 1 H a b 0 ? @ H n o G E G H r { | . / ; Y Z u v h`4 hK hw5 h1 hw5 5OJ QJ ^J hq hw5 hw5 h;@ hw5 hw5 5OJ QJ ^J L2 3 @ { r $If gdw5 $If gdC z kdt $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd2 $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a 1 { r $If gdw5 $If gdC z kdO $$If l 0 _," t 0 6 4 4 l a H b { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a b c { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a 0 @ { r $If gdw5 $If gdC z kdl $$If l 0 _," t 0 6 4 4 l a @ A H o { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a o p { r $If gdw5 $If gdC z kd* $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a G { r $If gdw5 $If gdC z kd $$If l 0 _," t 0 6 4 4 l a { r $If gdw5 $If gdC z kdG $$If l 0 _," t 0 6 4 4 l a F G H r | v m $If gdw5 $If gdC gdw5 z kd $$If l 0 _," t 0 6 4 4 l a | } { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a / { r $If gdw5 $If gdC z kdd $$If l 0 ," _ 9 t 0 6 4 4 l a / 0 ; Z { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a Z [ v { r $If gdw5 $If gdC z kd" $$If l 0 ," _ 9 t 0 6 4 4 l a v w { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kd? $$If l 0 ," _ 9 t 0 6 4 4 l a = { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a < = > D E X Y h l m # X Y ; M N w ! " ! ! ! ! ! ! ! ! ! " e" f" s" " 澺ɖɖɖ hC hC hC hC 5OJ QJ ^J hC 5OJ QJ ^J hC h1 hw5 5OJ QJ ^J hC hw5 h`4 5OJ QJ ^J hw5 hw5 h`4 hw5 hw5 5OJ QJ ^J h`4 5OJ QJ ^J ;= > E X { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a X Y h m { r $If gdw5 $If gdC z kd\ $$If l 0 ," _ 9 t 0 6 4 4 l a m n { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a # Y { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a Y Z { r $If gdw5 $If gdC z kdy $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a N { r $If gdw5 $If gdC z kd7 $$If l 0 ," _ 9 t 0 6 4 4 l a N O w { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kdT $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a { r $If gdw5 $If gdC z kd $$If l 0 ," _ 9 t 0 6 4 4 l a ! " ! ! ! ! z q q $If gdC gdC gdw5 z kdq $$If l 0 ," _ 9 t 0 6 4 4 l a ! ! ! ! { { $If gdC z kd $$If l 0 ," i / t 0 6 4 4 l a ! ! " f" { { $If gdC z kd/ $$If l 0 ," i / t 0 6 4 4 l a f" g" s" " { { $If gdC z kd $$If l 0 ," i / t 0 6 4 4 l a " " " " " " " " # # # # $ $ 5$ F$ G$ i$ $ $ $ $ % % #% n% o% u% % % % % % &