Testing a Simple Form

Here is an example that we can use to make sure that a JavaScript function is working properly.

Enter your name, press the "submit" button, and you will receive a message.

Name

Message

To make it simple, I put the JavaScript and the HTML on one page. That is NOT good practice in general. Here is the code. Put it onto a page called formtest.html in your htdocs directory:

<html>
<head>
<title>
Form Test </title>
</head>
<body>

<script language = "JavaScript">
function writeMessage(form){
form.usermessage.value = 'Hi, ' + form.username.value
+ '. How are you?';
}
</script>

<form method = "post">
Enter your name, press the "submit" button, and you will receive a message.<p>
Name
<input type = "text" name = "username">
<input type = "button" name = "submit" value =
"submit" onClick = "writeMessage(this.form)">
<p>
Message
<input type = "text" name = "usermessage" size = "40">
</form>

When you get this to work, then you should move the script to a separate page. Cut the code

function writeMessage(form){
form.usermessage.value = 'Hi, ' + form.username.value
+ '. How are you?';
}
from formtest.html and instead paste it onto a page in /htdocs/scripts/ called myjs2.js. Then, go back to formtest.html and change the script tag to read
<script language = "JavaScript" src = "scripts/myjs2.js">
Now, reload formtest.html and make sure that the code still works. Once the code works, we know that the page knows where to find the code, and we can add new code to myjs2.js.

Page created by Arnold Kling. Last Modified November 2, 2001.