The Check Input Method

Information - Checking Input

Let's request some information from a student using a form. The form itself is placed in the body of the page. When the form is submitted, the checkInfo function is called to check the contents of the text box.

Please type your name in the box:<br>
<form name="form1" method="post" onSubmit="return checkInfo(this)">
<input type="tex"t size="35" maxlength="40" name="StudentName"> <br>
<input type="submit" value="Send My Name">
</form>

Now, we need a function to check the input to make sure the student typed his/her name. In the Script below the != means "not equal to". JavaScript has a series of operators for testing equality and assigning values to variables. The "not equal to" operator is just one of those. If the student has not entered a name, an alert box prompts them to do so, and sets the focus to the text box so that the cursor flashes and is ready to type.

<script language=:"JavaScript">
function checkInfo(form) {
if (form.StudentName.value != "") {
else {
alert("Please enter your name.");
form.StudentName.focus();  
  }
}
}
</script>

Now that we have a student name, we will write that name in a new window to welcome the student to our course.

Information - The document.write Method

In addition to displaying a URL inside a new window (see above), it is also possible to write HTML in a new window. The example below is simplistic, but the principles will work for complex themes as well.

<script language="JavaScript">
function checkInfo(form) {
if (form.StudentName.value != "") {
var nametext=form.StudentName.value
NewWindow=window.open("", "awindow", "width=350,height=300, toolbar=0, menubar=0, location=0, status=0");
NewWindow.document.open;
NewWindow.document.write("<h2 ><center><font color=red>Chemistry 101</font></center></h2><br>");
NewWindow.document.write("<b>Welcome to Chemistry 101, </b>" + nametext + ".<br>")
}
else {
alert("Please enter your name.");
form.StudentName.focus();
}
}
</script>

Exercise

Let's combine the two methods above to check for a name, open a new window, and write the student's name, along with a greeting, in the new window.

1. Open Notepad and type the script below.
2. Save to the desktop with an .HTM or .HTML extension.
3. Double click the file on the desktop to view in a browser.
4. If you were successful, your web page should look like this.

<html>
<head>
<title>Check Input and Document Write</title>

<script language="JavaScript">
function checkInfo(form) {
if (form.StudentName.value != "") {
var nametext=form.StudentName.value
NewWindow=window.open("", "awindow", "width=350,height=300,toolbar=0,menubar=0,location=0,status=0");
NewWindow.document.open;
NewWindow.document.write("<h2><center><fontcolor=red>Chemistry 101</font></center></h2><br>");
NewWindow.document.write("<b>Welcome to Chemistry 101, </b>" + nametext + ".<br>");
}
else {
alert("Please enter your name.");
form.StudentName.focus();
}
}
</script>
</head>

<body>
Please type your name in the box:<br>
<form name="form1" method="post" onSubmit="return checkInfo(this)">
<input type="text" size="35" maxlength="40" name="StudentName"><br>
<input type="submit" value="Send My Name">
</form>
</body>
</html>