Web-centric Computing

Some Example Code

JavaScript Input Using XHTML forms

XHTML

Please enter a number:

<form
  onsubmit="main()"
  action="" action names program to send form data to
  method="get"
 >
 <p>
  Please enter a number:
  <input size="3" />
  <input type="submit" /> a submit button is not really needed when there is only 1 input field
 </p>
</form>

JavaScript

function main() {
  var input  = document.forms[0].elements[0].value; using DOM level 0
  var number = parseInt(input);
  if (isNaN(number)) {
     alert("The user entered `" + input
           + "' which cannot be parsed as a number");
  } else {
     alert("The user entered the number `" + input + "'");
  }
}

For more information about …

DOM level 0 see …
level 0 DOM at Peter-Paul Koch's homepage
Form processing with JavaScript see …
JavaScript in forms at at Peter-Paul Koch's homepage
JavaScript: The Definitive Guide in the Dal FCS E-book collection
JavaScript see …
The JavaScript section of the resources webpage
The DOM see …
W3C's Document Object Model webpage
(X)HTML forms see …
The forms subsection of the CGI examples, particularly the controls-example example

See Also

input with prompt()


http://www.cs.dal.ca/~jamie/course/CS/4173/examples/JS/input/how-form.html
Version:
31 January 2005
Author:
J. Blustein <jamie@cs.dal.ca>