onChange specifies script code to run when the data in the input field changes. onChange applies to input fields which accept text, namely text and password fields. (<TEXTAREA ...> and <SELECT ...> fields also use onChange.)
The onChange event is triggered when the contents of the field changes. For example, when the user enters an email address in this form, a script does some basic validity checking on the value entered:
<SCRIPT TYPE="text/javascript">
<!--
function checkEmail(email)
{
if(email.length > 0)
{
if (email.indexOf(' ') >= 0)
alert("email addresses cannot have spaces in them");
else if (email.indexOf('@') == -1)
alert("a valid email address must have an @ in it");
Because onChange only occurs when the value changes, the user is only warned once about a bad value. That's generally the most desirable way to do error checking. Even if the value is wrong, most users prefer to be warned just once.
The onChange happens whenever anything changes the value of the field, not just when the user enters a value. If a field's onChange changes the value of the field, it's easy to get an endless loop. In situations like this, be sure to check if the change needs to happen. For example, this product order form makes sure that the "total" field is always the correct total (even if the user changes it). The subtotal field "vn_stVis" uses onChange to check if it is different than the hidden subtotal field "vn_stHold". If there is a difference, vn_stVis is reset, which then causes another onChange event. However, that second time around the two fields are the same, and the script ends.
<SCRIPT TYPE="text/javascript">
<!--
function orderTotal(oform, prefix)
{
// set references to fields
var qty = oform[prefix + "_qty"];
var stHold = oform[prefix + "_stHold"];
var price = oform[prefix + "_price"];
var stVis = oform[prefix + "_stVis"];
// only bother if the field has contents
if (qty == "")return;
// if the with is not a number (NaN)
// or is zero or less
// everything goes blank
if(isNaN(qty.value) || (qty.value <= 0))
{
qty.value = "";
stHold.value = "";
}
// else the field is a valid number, so calculate the
Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.
HTML Layouts - Using Tables
The simplest way of creating layouts is by using the HTML <table> tag.
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
<p>This is some random content, since I can't be bothered to read and re-type the content from the preview image.</p>
</div>
<divclass="box">
<h2>Lists</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</div>
</div>
<divid="main">
<divid="content">
<h3>Heading 1</h3>
<p>And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks.</p>
<h3>Heading 1</h3>
<p>And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks. And we'lll some random content so that we can see how it looks.</p>
