BACK

Making a Form (A practical demo!)

Contents

A sample form Checking inputs Firing data into the ether Using FormMail Summary

It should be clear how we've designed the above form. You can always view the source, and we've previously explained (part 3) the various form components, almost all of which are represented above. The check functions we've defined need a bit of explanation. Here goes..

Checking the surname

  <input type="text" name="surname" size="30" 
         onChange="ValidSurname(this, true)">

All pretty straightforward and above board - we have a text input called "surname", and when the contents change, we invoke the function ValidSurname with two arguments. The second argument is just the Boolean value true - we'll explain how we use this in a moment. The first argument is more interesting. What does this mean? It's rather special - we use this to refer to the current object - here the text input itself! Let's see how ValidSurname handles this:

function ValidSurname (name, chirp)
  { var okay = true;
    if (name.value.length < 2)  
          okay = false;
    if ( (! okay) && chirp )
         { alert ("Hmm. '"
                  + name.value
                  + "' - a very strange surname. Try again!");
           name.select();
           name.focus();
         };
    return okay;
  }

The first argument, name is clearly just the text input box we passed as "this" - we extract the surname that was typed in using name.value, and then rather clumsily display a message on the screen if the length is under 2 characters. Note that we now understand the second argument passed to ValidSurname - if 'chirp' is true, then the message is displayed, otherwise not. In any case, we return true if the surname is valid, and false otherwise.

See how we can use the select and focus methods to transfer control to the offending name (if an error occurs). Most useful!

Checking the email address

Our email checker satisfies itself with:

1. Checking the length of the address (under 5 characters would be a bit strange);
2. Checking that there is an "@" sign;
3. Checking that there is a "." after the "@" sign.

And that I am afraid is that! Here our simple code is:

function ValidEmail (addr, chirp)
  { var fail = false;
    if (addr.value.length == 0) return false;
    var atpos = addr.value.indexOf('@',0);
    if( (addr.value.length < 5) || (atpos == -1)  )
        fail = true;              // too short or no '@'
    if (! fail)
       { if (addr.value.indexOf('.',atpos) == -1)
            fail = true;          // no '.' in address after the @
       };
    if ( (fail) && (chirp) )
        { alert ("Warning!\n The email address "
                 + addr.value
                 + " is invalid!");
          addr.select();
          addr.focus();
        };
    return (! fail);
  }

Nothing really fancy here, is there? (Incidentally, you might note that previously we've been too pedantic with putting curly braces in our if statements - a single statement after an if doesn't require these).

Checking the form before sending

<FORM name="demoform" 
      ACTION="/cgi-bin/FormMail.pl"
      METHOD="POST"
      onSubmit="return CheckInput(this)" >

      /* our form inputs etc go here */

</FORM>

We'll discuss the method and action in the next two sections. Here we look at the CheckInput function, which we provide with the whole FORM object (by giving it a 'this'). Here is CheckInput:

function CheckInput (thisform)
  { var errors = 0;                             //error count
    var duditem = "";                           //remember where it failed!
    var message = "\n";                         //error message

  if (! ValidEmail (thisform.email, false) )
        { errors ++;
          duditem = thisform.email;
          message += "Your email address is invalid!\n"; 
        };

  if (! ValidSurname (thisform.surname, false) )
        { errors ++;
          duditem = thisform.surname;
          message += "Your Surname appears inaccurate!\n"; 
        };

  if (errors == 0)
     { if ( ! confirm ("Dear "
                   + thisform.forename.value + " "
                   + thisform.surname.value
                   + "\nYour form is about to submitted."
                   + "\n Are you sure you want to do this?" ) )
           { errors ++; };
     } else
     { message += "\nPlease FIX THIS AND RETRY\n(Click on OK, fix errors)!";
       if (errors == 1)
           { alert  ("There was an error in your submission\n"
                     + message);
           } else
           { alert ("There were errors in your form\n" + message);
           };
       duditem.select();
       duditem.focus();
     };

  if (errors != 0) return (false);
  return (true);      
  }

Although rather long, there are few surprises. We set up an error message (initially blank) and an error count. We then invoke the functions we previously defined (with no 'chirping'), and confirm sending of the form, unless there are errors. We also remember the most recent object where an error occurred, which tells us something about the order in which we should check our inputs! And that is that!

Adding options

An example of creating a new option:

polly = new Option("Parrot", "pol1", false, true);
birds.options[4] = polly;

To delete an option from the options array, set it to null - the other options are then RE-INDEXED.

Such altering of options, and the Option() constructor are only available from JS 1.1.

If you add Options in older browsers, you MUST refresh the page using eg. window.history.go(0)

Send!

The form method

The action

The method property (GET or POST) can be reset in JavaScript. Not only can you change the method, but also the action attribute. This allows one to dynamically change the CGI program you are routing the information to! In our form above, we use:

ACTION="/cgi-bin/FormMail.pl"

which sends the information (using POST) to the popular form handling program called FormMail. We look at FormMail in detail below.

MIME encoding

Hidden fields

 <input type=hidden name="subject" value="Feedback Form">
 <input type=hidden name="recipient" value="feedb@anaesthetist.com">
 <input type=hidden name="redirect"
    value="http://www.anaesthetist.com/mnm/javascript/doform.htm#check">

Let's find out how we use these hidden fields, by finding out more about FormMail.

Using FormMail

 <input type=hidden name="subject" value="Feedback Form">
 <input type=hidden name="recipient" value="feedb@anaesthetist.com">
 <input type=hidden name="redirect"
    value="http://www.anaesthetist.com/mnm/javascript/doform.htm#check">