Fields for input and output in HTML

One of the most important functions on many web sites is interaction with the visitor e.g. calculations or database searches. For this you need the following elements:

1. One or more fields for writing (input fields)
2. A routine doing the calculations/database searches/etc., based on the content od the input fields, e.g. a JavaScript
3. One or more fields for writing the results (output fields)

The way we do the solution here, the fields are on the page. You can also do it using pop-up menus instead. How to do this, will be in the section about JavaScripts.

In the following example, we'll make a calculator for squaring numbers.

When making a field for input, the first thing you need is a FORM tag, i.e.


With this you need INPUT, and you actually need it twice, one for text and one for the button that executes the script using the text. In this case, it is a JavaScript, but it might as well have been something else. Then it looks like this:


For the script to find the right field to get the value from, the field needs to have an ID. Here we call it InputValue:


Be aware that the ID needs to be unique. If you have multiple fields with the same ID (e.g. a copy/paste where you forgot to rename the ID), the JavaScript only uses the value from the first field with the specified ID.

The JavaScript getting the input and doing the calculations, we call CalculateSquare. How this is done is shown in the next section. The finished code to make it work, now looks like this:


return false; is an event handler, ensuring that if an error occurs while running the script, it will be terminated. The necessity of "return false" is an ongoing discussion, but, in general, it is a good idea to have safety like this incorporated in the programming. VALUE="Calculate" is the text on the button you press. If you don't specify VALUE a routine in HTML looks at which language verion of the browser you are using, and write "Submit Query", "Send forespørgsel", etc. depending on the language. On the page, it looks like this:

Fields for output are just fields for text, i.e. <DIV>, <P>, <TD> etc. The only important thing here, is that it has a field name, i.e. the attribute ID, so the JavaScript can find the right field and write the result. For this example, we use a DIV with ID OutputValue. The code looks like this:


There are other ways of showing the result, e.g. using what is called an Alert, which is a tekstbox popping up on the screen. A combination is often used, where the result is shown on the page, while error messages, e.g. if you forgot to enter a number, are an Alert popping up. Choosing one or the other is a matter of personal taste and what makes sense on the page.

The JavaScript is done as an external script. i.e. as a .js file. In this case, a file named Calculations.js, placed in the directory JavaScripts. This is declared in the HEAD tag:


The content of the JavaScript starts by declaring the name of the function. By doing it this way, you can have several routines in the same file, e.g. a function named CalculateSquareroot for calculation square roots. De declaration of CalculateSquare looks like this:


Now we have the script loaded, when the page is read, and there is a function named CalculateSquare, which can be executed. The first thing we need to do, is grabbing the content of the field InputValue. This is done by declaring a variabel, here we call it FieldValue, and we get the value, using the command document.getElementById(). Now it looks like this:


We now have the field value. Now, you can easily imagine, that someone might press the button Calculate before entering a number, or entering something whch contains soemthing other than numbers, which would make no sense to square. This is done using an if/else construction. The command isNaN() is only true for field values that aren't numbers (numeric). Empty fields are somewhere inbetween, as it is both a number and not a number, so these we handle by using an "or" (vertical line) FieldValue == "" (note the use of two equal-to signs for comparisons, where the search criteria has to be equal to something). Then the code looks like this:


If our input field is empty or contains a character which isn't a number, we have to write a message, that this is the case. Here we do it in the output field OutputValue. This is done in a roundabout kinda way, but it works. The first thing you do is creating a variable with the same name as the output field and fetch the content of the output field. Here the fetching is redundant, as we don't need the previous content for anything, but you could easily be in a position where you were adding to the list. The next thing you do is to delete the content and replace it with the message we are about to write. It looks like this:


Now we are ready for our message. First thing we do is declaring a variabel using document.createTextNode(). We call it ErrorMessage:


The message now needs to go into the field, which is done by adding the variable with the message to the variable InputValue using appendChild(). Now it looks like this:


Now we have handles incorrect or missing values and can start doing the calculations. Once again we grab the field OutputValue:


Squaring a number in JavaScript is written Math.pow(x,y), and the way to transform it into something that can be written in a field, is by devlaring a variable, Result, using document.createTextNode(). Then it looks like this:


The variable, i.e. the result, can now be transferred to the field OutputValue using appendChild() like before:


On the screen, it looks like this:


The field, the size of the button, fonts etc. can be styled as needed, of course. Just be aware that the result in OutputValue has to be styled in the JavaScript, not in the DIV.