Controlling form submission

Interacting with the user

Here we demonstrate 3 ways to interact with the user from JavaScript.

The alert dialog box

The alert dialog box is intended just to deliver a message to the user. The syntax of the alert dialog box is:

where message is the text displayed within the box.

Example:

The confirm dialog box

This dialog box displays a message and two buttons. The syntax of the confirm dialog box is:

where message is the text displayed within the box and variable is a variable name for storing the user's input.

Example:

As you see, the confirm dialog box returns a Boolean value that can be used in your program to behave according to the user's request.

The prompt dialog box

The prompt dialog box displays a message, two buttons, and a text field for typing the user's input. The syntax of the prompt dialog box is:

where message is the text displayed within the box, variable is a variable name for storing the user's input, and default is the text to appear in the input line.

Example:

Form validation

Usually a form is checked for completeness and validity before sending it to the server. This helps the user to fill out the form in the right way and decreases the network traffic.

Consider the following form and try to submit it without filling it out.

You will get a prompt asking you to enter your name and the form won't be submitted until you enter some text into the name field.

Now, leave the ZIP field unfilled. You will get another prompt forcing you to put your ZIP code. If the text entered in the ZIP field is not a 5-digit number, you will get another warnings.

<script language="JavaScript">
function CheckForm() {
  var formObj = document.getElementById("Data");
  var name = formObj.Name.value;
  var zip  = formObj.Zip.value;

  if ((name == null) || (name == "")) {
    alert("Please enter your name");
    formObj.Name.focus();
    formObj.Name.select();
    return false;
  }

  if ((zip == null) || (zip == "")) {
    alert("Please enter your ZIP code");
    formObj.Zip.focus();
    formObj.Zip.select();
    return false;
  }
  else {
     if (isNaN(zip) || 
        zip.search(/^\d\d\d\d\d$/)) {
        alert("Invalid ZIP code.");
        formObj.Zip.focus();
        formObj.Zip.select();
        return false;
     }
  }
  var submit = confirm("Click OK to submit.");
  if (! submit) return false;
  else {
    alert("Thank you for submission");
    return(true);
  }
}
</script>

<form id="Data" onsubmit="return CheckForm()">
<table>
<tr><td>Your name :</td> 
<td><input type="text" name="Name"></td></tr>
<tr><td>ZIP code : </td> <td>
<input type="text" name="Zip"></td></tr>
<tr><td><input type="submit" value="Submit"></td>
<td align="right"><input type="reset"></td></tr>
</table>
</form>

opening JavaScript
starting a form validating function 
  get the user's name
  get the ZIP code

check if the Name field is non-empty
  ... and display a warning
  give a focus to the Name field
  select the Name value
   (this makes it easy to clean up  
    the Name field)

check if the ZIP field is non-empty
  ... and display a warning





check the ZIP data for being a number
  ... and having exactly 5 digits
  display a warning if necessary





get a confirmation for the submittion
  ... submission is not confirmed

  thank the user



closing JavaScript

turning on the onSubmit event handler

The JavaScript function isNaN(value) (is Not a Number) returns true if the string value does not represent a number.

The expression /^\d\d\d\d\d$/ is a regular expression for checking the string to consist of 5 digits.

In the HTML part, the onSubmit event handler calls the function CheckForm() before submitting it. The form will be submitted only if the Boolean value returned by this function is true.