10. JavaScript
In this section, we present three examples of using JavaScript in web pages. We focus on form handling, but JavaScript can do much more.
10.1. Retrieving information from a form
The example below shows how to retrieve data entered by the user in a form within the browser. This generally allows for pre-processing before sending the data to the server.
10.1.1. The form
We have a form containing the most common components and a "Display" button that allows you to view the user's entries.
10.1.2. The code
<html>
<head>
<title>A form processed by JavaScript</title>
<script language="javascript">
function display(){
// displays the form data in a list
// First, we clear
clearInfo();
// display the value of the # fields
with(document.frmExample){
// hidden field
write("hidden field="+cache.value);
// simple text field
write("single text field="+simple.value);
// multi-line text field
write("multiple text field=" + lines.value);
// radio buttons
for(i=0;i<radio.length;i++){
text = "radio[" + i + "] = " + radio[i].value;
if(radio[i].checked) text+=", checked";
write(text);
}//for
// checkboxes
for(i=0;i<qcm.length;i++){
text = "qcm[" + i + "] =" + qcm[i].value;
if(qcm[i].checked) text+=", checked";
write(text);
}//for
//dropdown list
write("index selected in the menu="+menu.selectedIndex);
for(i=0;i<menu.length;i++){
text="menu["+i+"]="+menu.options[i].text;
if(menu.options[i].selected) text+=", selected";
write(text);
}//for
//multiple-choice list
for(i=0;i<lstCars.length;i++){
text = "lstCars[" + i + "] = " + lstCars.options[i].text;
if(lstCars.options[i].selected) text+=", selected";
write(text);
}//for
//password
write("password="+passwd.value);
}//with
}//function
function write(text){
// writes text to the info list
frmInfo.lstInfo.options[frmInfo.lstInfo.length] = new Option(text);
}//write
function clearInfo(){
frmInfo.infoList.length = 0;
}//clearInfo
</script>
</head>
<body bgcolor="#C0C0C0" onload="display()">
<center>
<h2>A form processed by JavaScript</h2>
<hr>
<form method="POST" name="frmExemple">
<input type="hidden" name="cache" value="secret">
<table border="0">
<tr>
<td align="center">A simple text field</td>
<td align="center" width="100"> </td>
<td align="center">A multi-line text field</td>
</tr>
<tr>
<td align="center"><input type="text" size="20" name="simple"></td>
<td align="center" width="100"> </td>
<td align="center">
<textarea name="lines" rows="2" cols="40">This text is editable</textarea>
</td>
</tr>
</table>
<table border="0">
<tr>
<td><strong>Radio buttons:</strong></td>
<td>
<input type="radio" checked name="radio" value="FM">FM
</td>
<td>
<input type="radio" name="radio" value="GO">GO
</td>
<td>
<input type="radio" name="radio" value="PO">PO
</td>
<td> </td>
<td><strong>Multiple choices:</strong></td>
<td>
<input type="checkbox" name="qcm" value="one">one
</td>
<td>
<input type="checkbox" name="qcm" value="two">two
</td>
<td>
<input type="checkbox" name="qcm" value="three">three
</td>
</tr>
</table>
<table border="0">
<tr>
<td>A drop-down menu: </td>
<td>
<select name="menu" size="1">
<option>50 F</option>
<option>60 F</option>
<option>70 F</option>
<option>100 F</option>
</select>
</td>
<td>A list:</td>
<td>
<select name="lstVoitures" multiple size="3">
<option>Renault</option>
<option>Citroën</option>
<option>Peugeot</option>
<option>Fiat</option>
<option>Audi</option>
</select>
</td>
</tr>
</table>
<table border="0">
<tr>
<td>Password: </td>
<td><input type="password" size="21" name="passwd"></td>
<td> </td>
<td>A hidden context field: </td>
</tr>
</table>
</form>
<hr>
<h2>Form information</h2>
<form name="frmInfos">
<table>
<tr>
<td><input type="button" value="Clear" onclick="clearInfo()"></td>
<td>
<select name="lstInfos" multiple size="3">
</select>
</td>
<td>
<input type="button" name="cmdDisplay" value="Display" onclick="display()">
</td>
</tr>
</form>
</body>
</html>
10.2. Regular Expressions in JavaScript
On the browser side, JavaScript can be used to validate user-entered data before sending it to the server. Here is a program to test these regular expressions.
10.2.1. The test page
10.2.2. The page code
<html>
<head>
<title>Regular expressions in JavaScript</title>
<script language="javascript">
function displayInfo(){
with(document.regexp){
// anything to do?
if (!verify()) return;
// All good—clear the previous results
clearInfo();
// check the pattern
pattern = new RegExp(txtPattern.value);
fields = pattern.exec(txtString.value);
if(fields == null)
// no match between pattern and string
writeInfo("no match");
else{
// match - display the results
writeInfo("There is a match");
for(i=0;i<fields.length;i++)
writeInfo("fields[" + i + "] = [" + fields[i] + "]");
}//else
}//with
}//function
function writeInfo(text){
// writes text to the info list
document.frmRegExp.lstInfo.options[document.frmRegExp.lstInfo.length] = new Option(text);
}//write
function clearInfo(){
frmRegExp.lstInfos.length = 0;
}//clearInfo
function play(){
// checks the pattern against the string in the selected example
with(document.frmRegExp){
txtPattern.value = lstPatterns.options[lstPatterns.selectedIndex].text
txtString.value = lstStrings.options[lstStrings.selectedIndex].text
displayInfo();
}//with
}//play
function add(){
//adds the current test to the examples
with(document.frmRegExp){
// anything to do?
if (!verify()) return;
// add
lstModeles.options[lstModeles.length] = new Option(txtModele.value);
lstChains.options[lstChains.length] = new Option(txtChain.value);
// Clear entries
txtModel.value = "";
txtString.value = "";
}//with
}//add
function verify(){
// checks that the input fields are not empty
with(document.frmRegExp){
fields = /^\s*$/.exec(txtModel.value);
if(fields!=null){
alert("You did not specify a template");
txtModel.focus();
return false;
}//if
fields = /^\s*$/ .exec(txtString.value);
if(champs!=null){
alert("You did not specify a test string");
txtChain.focus();
return false;
}//if
// OK
return true;
}//with
}//check
</script>
</head>
<body bgcolor="#C0C0C0">
<center>
<h2>Regular Expressions in JavaScript</h2>
<hr>
<form name="frmRegExp">
<table>
<tr>
<td>Regular expression</td>
<td>Test string</td>
</tr>
<tr>
<td><input type="text" name="txtPattern" size="20"></td>
<td><input type="text" name="txtString" size="20"></td>
</tr>
<tr>
<td>
<input type="button" name="cmdDisplay" value="Play Test" onclick="displayInfo()">
</td>
<td>
<input type="button" name="cmdAdd" value="Add to examples" onclick="add()">
</td>
</tr>
</table>
<hr>
<h2>Results of the statement fields=regular_expression.exec(string)</h2>
<table>
<tr>
<td>
<select name="lstInfos" size="3">
</select>
</td>
</tr>
</table>
<hr>
<h2>Examples</h2>
<table>
<tr>
<td align="center">Templates</td>
<td align="center">Channels</td>
</tr>
<tr>
<td>
<select name="lstModeles" size="1">
<option>^\d+$</option>
<option>^(\d+) (\d+)$</option>
<option>^(\d+)(.*)(\d+)$</option>
<option>^(\d+)(\s+)(\d+)$</option>
</select>
</td>
<td>
<select name="lstChaines" size="1">
<option>67</option>
<option>56 84</option>
<option>45abcd67</option>
<option>45 67</option>
</select>
</td>
<td>
<input type="button" name="cmdPlay" value="Play example" onclick="play()">
</td>
</tr>
</form>
</body>
</html>
10.3. List Management in JavaScript
10.3.1. The form
10.3.2. The code
<html>
<head>
<title>Lists in JavaScript</title>
<script language="javascript">
// add
function add(L1, L2, T) {
// adds the value of field T to lists L1, L2
// anything to do?
fields = /^\s*$/.exec(T.value);
if(fields!=null){
// the field is empty
alert("You did not specify the value to add");
txtElement.focus();
return;
}//if
// add the element
L1.options[L1.length] = new Option(T.value);
L2.options[L2.length] = new Option(T.value);
T.value = "";
}//add
//clear
function clear(L){
// clears the list L
L.length = 0;
}//clear
//transfer
function transfer(L1, L2, single){
//transfer the selected elements from list L1 to L2
// anything to do?
// index of the selected element in L1
index1 = L1.selectedIndex;
if(index1==-1){
alert("You have not selected an item");
return;
}//if
// What is the selection mode for list items?
if(simple){ // single selection
element1 = L1.options[index1].text;
//add to L2
L2.options[L2.length] = new Option(element1);
// Remove from L1
L1.options[index1] = null;
}//single
if(!simple){ //multiple selection
//iterate through list 1 in reverse order
for(i=L1.length-1;i>=0;i--){
//Is the element selected?
if(L1.options[i].selected){
//Add it to L2
L2.options[L2.length] = new Option(L1.options[i].text);
//Remove it from L1
L1.options[i] = null;
}//if
}//for i
}//if ! simple
}//transfer
</script>
</head>
<body bgcolor="#C0C0C0">
<center>
<h2>Lists in JavaScript</h2>
<hr>
<form name="frmListes">
<table>
<tr>
<td>
<input type="button" name="cmdAdd" value="Add" onclick="add(lst1A,lst1B,txtElement)">
</td>
<td>
<input type="text" name="txtElement">
</td>
</tr>
</table>
<table>
<tr>
<td align="center">List 1</td>
<td align="center"><input type="button" value=">>" onclick="transfer(lst1A,lst2A,true)"</td>
<td align="center"><input type="button" value="<<" onclick="transfer(lst2A,lst1A,true)"</td>
<td align="center">list 2</td>
<td width="30"></td>
<td align="center">List 1</td>
<td align="center"><input type="button" value=">>" onclick="transfer(lst1B,lst2B,false)"</td>
<td align="center"><input type="button" value="<<" onclick="transfer(lst2B,lst1B,false)"</td>
<td align="center">list 2</td>
</tr>
<tr>
<td></td>
<td align="center">
<select name="lst1A" size="5">
</select>
</td>
<td align="center">
<select name="lst2A" size="5">
</select>
</td>
<td></td>
<td></td>
<td></td>
<td align="center">
<select name="lst1B" size="5" multiple >
</select>
</td>
<td align="center">
<select name="lst2B" size="5" multiple>
</select>
</td>
</tr>
<tr>
<td></td>
<td align="center"><input type="button" value="Clear" onclick="clear(lst1A)"</td>
<td align="center"><input type="button" value="Clear" onclick="clear(lst2A)"</td>
<td></td>
<td></td>
<td></td>
<td align="center"><input type="button" value="Clear" onclick="clear(lst1B)"</td>
<td align="center"><input type="button" value="Clear" onclick="clear(lst2B)"</td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"><strong>Single selection</strong></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"><strong>Multiple selection</strong></td>
<td></td>
</tr>
</table>
<hr>
</form>
</body>
</html>