Java Script Examples related to forms

Example 1

ex1.html: See Sebesta Section 5.4.2 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 1</title>
</head>
<body>
<p>
Click on the textfield and bring it into focus. 
</p>
<form action="">
<p>
Type something: <input type="text" name="test" size="10" onfocus="alert('On focus')"/>
</p>
</form>
</body>
</html>

Example 2

ex2.html: See Sebesta Section 5.4 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 2</title>
</head>
<body>
<p>
Type something in the textfield. Then made it lost its focus by 
pressing return or clicking somewhere else.
</p>
<form action="">
<p>
Type something: <input type="text" name="test" size="10" 
onchange="alert('The textfield is changed.')"/>
</p>
</form>
</body>
</html>

Example 3

ex3.html: See Sebesta Section 5.4 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 3</title>
<script type="text/javascript">
<!-- 
function whatYouTyped() {
   // test represents the textfield in the form
   var test = document.getElementById("test");
   alert("You typed " + test.value);
}
// -->
</script>
</head>
<body>
<form action="">
<p>
Type something: <input type="text" name="test" size="10" id="test"
onchange="whatYouTyped()"/>
</p>
</form>
</body>
</html>

Example 4

ex4.html: See Sebesta Section 5.4.4 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 4</title>
<script type="text/javascript">
<!-- 
function checkans() {
   var ans;
   
   var radioElements = document.forms[0].elements;
   for(var i=0; i < radioElements.length; i++){
      if(radioElements[i].checked) {
         ans = radioElements[i].value;
         break;
      }
   }
   
   
   if(ans == 'b') {
     alert("Correct!");
   } else {
     alert("Wrong answer. Try again!");
   }
}
// -->
</script>
</head>
<body>
<form action="">
<p>
Question: 1 + 1 = ? <br />
<input type="radio" name="Q1" value="a" onclick="checkans()"/> 
(a) 1. <br />
<input type="radio" name="Q1" value="b" onclick="checkans()"/> 
(b) 2. <br />
<input type="radio" name="Q1" value="c" onclick="checkans()"/> 
(c) 3. <br />
<input type="radio" name="Q1" value="d" onclick="checkans()"/> 
(d) 4. <br />
</p>   
</form>
</body>
</html>

Example 5

ex5.html: See Sebesta Section 5.4.4 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 5</title>
<script type="text/javascript">
<!-- 
function checkans(ans) {
   if(ans == 'b') {
     alert("Correct!");
   } else {
     alert("Wrong answer. Try again!");
   }

}
// -->
</script>
</head>
<body>
<form action="">
<p>
Question: 1 + 1 =? <br />
<input type="radio" name="Q1" value="a" onclick="checkans('a')"/> 
(a) 1. <br />
<input type="radio" name="Q1" value="b" onclick="checkans('b')"/> 
(b) 2. <br />
<input type="radio" name="Q1" value="c" onclick="checkans('c')"/> 
(c) 3. <br />
<input type="radio" name="Q1" value="d" onclick="checkans('d')"/> 
(d) 4. <br />
</p>   
</form>
</body>
</html>

Example 6

ex6.html: See Sebesta Section 5.4 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Dynamic JavaScript Example 6</title>
<script type="text/javascript">
<!-- 
function checkans() {
   var ans = new Object();
   ans.Q1 = 'b';
   ans.Q2 = 'a';
   ans.Q3 = 'c';
   var correct = 0;
   
   radios = document.forms[0].elements;
   for(var i=0; i < radios.length; i++) {
      if(radios[i].checked) {
         if(ans[radios[i].name] == radios[i].value) {
            correct++;
         }
      }        
   }
   alert("Correct answers: " + correct);
}
// -->
</script>
</head>
<body>
<form action="">
<p>
What is 1 + 1 =? <br />
<input type="radio" name="Q1" value="a" /> 
(a) 1. <br />
<input type="radio" name="Q1" value="b" /> 
(b) 2. <br />
<input type="radio" name="Q1" value="c" /> 
(c) 3. <br />
<input type="radio" name="Q1" value="d" /> 
(d) 4. <br />
</p>   
<p>
What is 1 * 1 =? <br />
<input type="radio" name="Q2" value="a" /> 
(a) 1. <br />
<input type="radio" name="Q2" value="b" /> 
(b) 2. <br />
<input type="radio" name="Q2" value="c" /> 
(c) 3. <br />
<input type="radio" name="Q2" value="d" /> 
(d) 4. <br />
</p>    
<p>
What is 1 - 2 =? <br />
<input type="radio" name="Q3" value="a" /> 
(a) 1. <br />
<input type="radio" name="Q3" value="b" /> 
(b) 2. <br />
<input type="radio" name="Q3" value="c" /> 
(c) -1. <br />
<input type="radio" name="Q3" value="d" /> 
(d) 0. <br />
</p> 
<p>
<input type="submit" value="Submit Answers" onclick="checkans()"/>
</p>
</form>
</body>
</html>

Example 7

ex7.html: See Sebesta Section 5.4.

= 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>World's Worst Online Calculator!</title>

<script type="text/javascript">
<!--

function doIt()
{
var ops = document.forms[0].op.value;

switch(ops)
{
    case "+":
        document.forms[0].answer.value= 
        parseFloat(document.forms[0].first.value) + 
        parseFloat(document.forms[0].second.value);
        break;
    case "-":
        document.forms[0].answer.value =
        parseFloat(document.forms[0].first.value) -
        parseFloat(document.forms[0].second.value);
        break;
    case "*":
         document.forms[0].answer.value =
         parseFloat(document.forms[0].first.value) *
         parseFloat(document.forms[0].second.value);
         break;
    case "/":
        document.forms[0].answer.value =
        parseFloat(document.forms[0].first.value) /
        parseFloat(document.forms[0].second.value);
    }
}

// -->
</script>

</head>

<body>
<form action="" style="text-align: center">
    <p><input type="text" name="first" size="5" />

    <select name="op">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <input type="text" name="second" size="5" /> =

    <input type="text" name="answer" onfocus="blur();" /></p>

    <p><input type="button" value="-- Do It! --" onclick="doIt();" />
        <button type="reset">Clean It Up!</button></p>
</form>

</body>
</html>

Example 8

ex8.html: See Sebesta Section 5.4.5 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- This is adapted from passwd_chk.html (Example from "Programming the 
     World Wide Web", by Robert W. Sebesta).
     This example does input password checking, using the submit event. -->

<head>
<title>Password Checking</title>

<script type="text/javascript">
<!-- 
// The event handler function for password checking
function chkPasswords (form) {
   // Check if the user entered a password.
   if (form.initial.value == "") {
      alert("You did not enter a password.\nPlease enter one now.");
      form.initial.focus();
      return false;
   }

   // Make sure that the initial password entered and the re-entry of
   // the password are the same.
   if (form.initial.value != form.second.value) {
      alert("The two passwords you entered are not the same.\nPlease " +
             "re-enter both now.");
      form.initial.focus();
      form.initial.select();
      return false;
   }
   else {
      return true;
   }
}
// -->
</script>
</head>

<body>
<h2>Password Input</h2>

<form action="" onsubmit="return chkPasswords(this);">
<p>Your password:
<input type="password" name="initial" size="10" maxlength="10" />
</p>
<p>Verify password:
<input type="password" name="second" size="10" maxlength="10" />
</p>
<p>
<input type="reset" name="reset" />
<input type="submit" name="submit" value="Submit password" />
</p>
</form>
</body>
</html>

Example 9

ex9.html: See Sebesta Section 5.4.5 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-- This is adapted from passwd_chk.html (Example from "Programming the 
     World Wide Web", 2d edition, by Robert W. Sebesta).
     This example does input password checking, using the submit event. -->

<head>
<title>Password Checking</title>

<script type="text/javascript">
<!-- 
// The event handler function for password checking
function chkPasswords () {
   // Check if the user entered a password.
   var init = document.getElementById("initial");
   var sec = document.getElementById("second");

   if (init.value == "") {
      alert("You did not enter a password.\nPlease enter one now.");
      init.focus();
      return false;
   }

   // Make sure that the initial password entered and the re-entry of
   // the password are the same.
   if (init.value != sec.value) {
      alert("The two passwords you entered are not the same.\nPlease " +
             "re-enter both now.");
      init.focus();
      init.select();
      return false;
   }
   else {
      return true;
   }
}
// -->
</script>
</head>

<body>
<h2>Password Input</h2>

<form action="" onsubmit="return chkPasswords();">
<p>Your password:
<input type="password" id="initial" size="10" maxlength="10" />
</p>
<p>Verify password:
<input type="password" id="second" size="10" maxlength="10" />
</p>
<p>
<input type="reset" name="reset" />
<input type="submit" name="submit" value="Submit password" />
</p>
</form>
</body>
</html>