Submitting forms

Submitting forms

What different possibilities do exist for submitting the contents of a form? The easiest way is to submit the form input via e-mail. This is the method we are going to look at a little closer. If you want to get feedback without e-mail and want the server to handle the input automatically you have to use CGI at the moment. You would need CGI for example if you wanted to make a search engine like Yahoo- where the user gets a result quickly after the form input. He does not have to wait until the people maintaining this server read the input and then look up the information requested. This is done automatically by the server. JavaScript does not have the functionality to do things like this. Even if you want to create a guestbook you can't make the server to add the information automatically to an existing HTML- page with JavaScript. Only CGI can do this at the moment. Of course you can create a guestbook with the people answering via e-mail. You have to enter the feedback manually though. This is ok if you don't expect to get 1000 feedback mails a day.

This script here is plain HTML. So no JavaScript is needed here! Only, of course, if you want to check the input before the form is submitted you will need JavaScript. I have to add that the mailto- command does not work for every browser- but the newer browsers support it.

Do you like this page?

Not at all.

Waste of time.

Worst site of the Net.

You will get the feedback through e-mail by doing this. The only problem is that you will receive a mail that might seem very cryptic at the first glance. Sometimes all spaces are filled up with '+' and sometimes they are filled up with '%20'. So+this+might+look+like+this. There are some parser programms out on the Net, I believe, which will put the received mail in to a nicer format.

There is another nice thing so you can make your form elements a little bit more user-friendly. You can define which element is in focus at the beginning. Or you could tell the browser to focus on the form where the user- input was done wrong. This means that the browser will set the cursor into the specified form- element so the user does not have to click on the form before entering anything. You can do this with the following piece of script:

function setfocus() {

document.first.text1.focus();

return;

}

This script would set the focus to the first text- element in the script I have shown above. You have to specify the name of the whole form - which is here called first - and the name of the single form element - here text1. If you want to put the focus on this element when the page is being loaded you can add an onLoad- property to your tag. This looks like this for example:

Last changed: 11.May'96

©1996 by Stefan Koch

Validating form input

Validating form input

Form input is very important for some Web- pages. The form input is often sent back to the server again. JavaScript has got the functionality to validate the form input before sending it to the server. First I want to show you how forms can be validated. Then we will have a look at the possibilties for sending information back with JavaScript or HTML.

First of all we want to create a simple script. The HTML- page shall contain two text- elements. The user has to write his name into the first and an e-mail address into the second element. You can try this scripts in the online version of my tutorial.

Concerning the first input element you will receive an error message when not entering anything. Any input is seen as valid input. Of course, this does not prevent the user from entering any wrong name. The browser even accepts numbers. So if you enter '17' you will get 'Hi 17!'.

The second form is a little bit more sophisticated. If you try to enter a simple string - your name for example it won't work (unless you have a @ in your name...). The criteria for accepting the input as a valid e-mail address is the @. A single @ will do it - but this is certainly not very meaningful. Every Internet e-mail address contains a @ so it seems appropriate to check for a @ here.

What does the script for those two form elements and for the validating look like? Here it goes:

Enter your name:

Enter your e-mail address:

First have a look at the HTML- code in the body- section. We just create two text elements and two buttons. The buttons call the functions test1(...) or test2(...) depending on which button is pressed. We pass this.form to the functions in order to be able to address the right elements in the functions later on. The function test1(form) tests if the string is empty. This is done via if (form.text1.value == "")... . 'form' is the variable which receives the 'this.form' value in the function call. We can get the value of the input element through using 'value' in combination with form.text1. In order to look if the string is empty we compare it with "". If the input string equals "" then no input was done. The user will get an error message. If something is entered the user will get an ok.

The problem here is that the user might enter only spaces. This is seen as a valid input! If you want to, you can of course check for these possibilities and exclude them. I think this is quite easy with the information given here.

Now have a look at the test2(form) function. This function again compares the input string with the empty string "" to make sure that something has been entered. But we have added something to the if- command. The || is called the OR- operator. You have learned about it in part 6 of this introduction. The if- command checks if either the first or the second comparison is true. If at least one of them is true the whole if- command gets true and the following command will be executed. This means that you will get an error message either if your string is empty or if there isn't a @ in your string. The second operation in the if- command looks if the entered string contains a @.

Operators

Operators

Now we will have a look at different operators you might use in JavaScript. Operators are a powerful technique to shorten and improve your script. For example you want to test if a variable x is larger than 3 and you want to see if it is smaller than 10. You might want to write it this way:

if (x>3)

if (x<10)

doanything();

The function doanything() is called if x>3 and x<10.>

if (x>3 && x<10)>

The && is called AND- operator. Then there is an OR- operator. You can use this for example if you want to check if one variable x is equal 5 or another variable y is equal 17:

if (x==5 || y==17) doanything();

The function doanything() is called when x==5 or y==17. It is also called if both comparisons are true. Comparisons are done via the == operator in JavaScript (Of course there are also <,>,<= and >=). If you know C/C++, this is the same. A single = is used to store a value in a variable. (If you know Pascal this may be a little bit confusing. Assigning a value to a variable is done in Pascal via := and comparisons with a single =)

If you want to see if a variable does not equal a certain number, this might get a little bit complicated without operators. This is done with a simple !=. So this would look like this for example: x != 17.

There are many more interesting operators which can make your programs more efficiently. Look at the documentation provided by Netscape to get a full overview of all operators you can use in JavaScript.

Last changed: 11.May'96

©1996 by Stefan Koch

Creating a new window when a link is taken

Creating a new window when a link is taken

Another often seen problem is how new pages can be loaded to a new window. The window shall pop up when the user clicks on a link. You just have to add the target- property to your tag again. This looks like this:

Go!

Loading two pages with one mouse click

Loading two pages with one mouse click

I receive a lot of mails about the problem how two pages can be loaded with only one mouse click. Basically there are three different solutions to this problem. The first possiblity is to create a button which calls a function when the user presses it. This function loads the two pages into different frames or opens new windows. This is not too difficult if you have a look at our examples in the other parts of this introduction. We have all elements we already need.

We create three frames. The first one is used for the button. The first html-page is just needed for openening the frames and giving names to them. This is nothing new since we used this technique in part 3 in order to work with frames. I'll show it to you anyway. (I don't know whether this happens to you as well- but everytime an author of a computer book thinks that something hasn't got to be printed because it is so easy - this is exactly the part I'm having trouble with. So here we go:)

frames2.htm

Frames

loadtwo.htm is loaded to the first frame. This is the frame with the button.

loadtwo.htm

The function loadtwo() is called when the button is pressed. Two strings are passed to the function. If you look at the loadtwo() function you see that the second frame fr2 loads the page that is defined by the first string in the function call. If you have different buttons opening different pages you can reuse this function. You only have to pass the different URLs (addresses) of the pages.

The second technique uses hyperlinks. Some examples floating around the Internet have something like this:

This technique seems not to work on all platforms. So you better don't use it. I'm not sure if it is supposed to work at all - but we don't have to worry because there is another method how we can implement this. We can call a JavaScript- function the following way:

My Link

This is really easy and seems to work fine on all browsers. You just have to write javascript: and then the name of your function as your 'link'. If you call the 'loadtwo()'- function from the example above you can update two frames with one single click on a hyperlink. You should always use this technique if you want to call a function with a click on a link.

The third technique for loading two pages on one mouse click can be combined either with buttons or normal hyperlinks. We could do this with the second technique shown above but this approach here might be more appropriate sometimes. What we can do is to load one HTML- page to one frame. This is done by

Click here!

We know this already. What we do now is to add a onLoad property to the loaded file. The getfr2.htm file could look like this:

bla bla bla

Of course you have to add this to every document that is loaded into the second frame.

History- functions: Creating 'back' and 'forward' with JavaScript

History- functions: Creating 'back' and 'forward' with JavaScript

Now we're looking at a script which lets you navigate through different documents. What I'm talking about is the back() and forward()- function. If you have a back- link on your page this isn't the same as the back- button in the Netscape- Navigator. For example I have got some back- links which work like normal links but I know that the user probably comes from that certain page I'm linking to. The back- button provided by the Netscape Navigator goes one step back in your history list. You can do this with JavaScript as well. Just take this link in order to get back again! The script I used here is shown below:

You could also write history.go(-1) and history.go(1).

Last changed: 11.May'96

©1996 by Stefan Koch

Clearing a window ot frame

Clearing a window ot frame

I have written a small game yesterday. I have encountered a problem you might have got as well. If you want to clear a window or frame you look into the documentation by Netscape and see that JavaScript knows the function 'document.clear()'. But if you implement this function nothing happens! The function document.clear() seems to be broken on every platform. Gordon McComb gave me the following script which clears the window as I wanted it.

document.close();

document.open();

document.write("

");

You don't have to write document.write("

");. It is only important that you send anything to the window. This works fine with frames as well.