Form examples



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.

| Computation test |Usual HTML |

| |Script tag. It specifies javascript as the scripting |

| |language, not strictly necessary since it is the |

| |default. |

|function total(f) { |Start of function definition. The function takes one |

| |argument, f. This will turn out to be the name of the |

| |form. |

|var chocolateprice = 2.50; |Defines a variable as the number 2.50. |

|var cocoaprice = 3.25; |Defines a variable as the number 3.25 |

|var chocolatecost = chocolateprice * f.choc.value; |Calculates the cost of the chocolate by multiplying the|

| |value of the choc field of the f form by |

| |chocolateprice. The multiplication by a number will |

| |cause the value in f.choc.value to be converted to be a|

| |number. |

|var cocoacost = cocoaprice*f.cocoa.value; |Does the same thing for cocoa. |

|var taxrate = .06; |Defines a variable |

|var totalcost = chocolatecost + cocoacost; |Calculates the total cost by adding two of the values |

| |already calculated |

|var totalpay = totalcost + taxrate*totalcost; |Calculates the totalpay by calculating the tax |

|f.cost.value=totalcost; |Outputs the totalcost by placing it in an input element|

| |of the form |

|f.wtax.value=totalpay; |Outputs the totalpay by placing it in an input element |

| |of the form |

|return false; |Return false to prevent the page from being refreshed |

|} |End the definition of the function and close the |

| |script element |

| |Close head section |

| |Start body section |

|Application Form for Chocolate |Heading |

| |Horizontal rule |

| |Define a form: give it a name. Set the onsubmit |

| |attribute to be calling the total function with this |

| |form as the argument. The this has a special meaning. |

| |Making the onsubmit include the return will prevent the|

| |page from being reloaded. |

|Enter number of goods in each category. |Text: instruction to user |

|Boxes of Chocolate: |Labelling text plus an input tag for the user |

| |(customer) to put in number of chocolate boxes |

|Boxes of Cocoa: |Same for cocoa. |

|Total: |Text labeling what will be the outputs |

| |Input element where the calculated total cost will go. |

| |Input element where the calculated total will go |

| |Form element for the submit button, with the label |

| |Compute totals. |

| |Ending HTML tags. |

The next example adds up three numbers. The one tricky thing here is to make sure that the input gets interpreted as numbers and not strings.

|Add 3 numbers |HTML tags |

| |Script tag |

|function addup(f) { |Function definition. The function addup will have one |

| |argument, f, which will turn out to be the name of the |

| |form. |

|var total; |Variable declaration for total |

|total = 1*f.one.value + 1*f.two.value + 1*f.three.value; |Total is set to the sum of the 3 numbers. Multiplying by|

| |1 means that the form data will be converted from strings|

| |to numbers. The plus operator then is addition of |

| |numbers (and not concatenation of strings). See |

| |exercises. |

|f.sum.value = total; |Output the total. |

|return false; |Return false to ensure that the page is not refreshed. |

|} |Close the function definition |

| |Script close tag and head close tag |

| |Start body element |

|Addition: |Text |

| |Form tag. Form has name fx. Onsubmit the addup function |

| |will be called for this form. |

|Enter value: |Labelling text plus input element for data named one. |

|Enter value: |Same for data named two |

|Enter value: |Same for data named three |

|The sum is: |Labelling text plus input element with the name sum. |

| |Submit button |

| |Reset form button. This is a built-in HTML feature. |

| |End of form |

| |End of body |

| |End of html |

The Coffee shop makes use of pulldown lists and radio buttons. Accessing this data requires slightly more complicated JavaScript then accessing data in input elements of type text. This example also does some formatting of the price result to make it be properly formatted dollars and cents. For example, if the answer is 3.5, you want the display to be 3.50.

| Calculation |Opening html tags |

| |Script tag |

|function addup(f) { |Function definition. The function will take one |

| |argument. This will turn out to be the form. |

|var total; |Define a variable to be used later. |

|var taxrate = .08 ; |Define a variable and give it a value. |

|var drinkbase; |Define a variable |

|opts=f.drink; |Set opts to be f.drink. The opts will be an |

| |object. The value of opts.selectedIndex will be |

| |the index of the drink selected by the user. |

|drinkbase = f.drink[opts.selectedIndex].value; |Set drinkbase to be the value of element in |

| |f.drink selected by the user. |

|var sizefactor; var i; var totals; var dp; |Define variables. |

|for (i=0;i ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download