With my current function, testLength(field), I am trying to test whether the user has entered any text in a required field. This function has the single parameter, "field", which should represent the field object to be tested. My function should do this:
1. Test whether the length of the field value is equal to 0.
2. If the length is equal to 0, then: 1)Change the background color of the field object to yellow and 2) return the Boolean value false. Otherwise: 1) Change the background color of the field object to white and 2) return the Boolean value true.
Here's what I've come up with currently:
- Code: Select all
function testLength(field){
if (field.length == 0){
document.reg.elements["field"].style.backgroundcolor = "yellow";
return false;
}else{
document.reg.elements["field"].style.backgroundcolor = "white"; // getting null or not an object error here.
return true;
}
}
The web page I'm using:
- Code: Select all
<html>
<head>
<title>Conference Registration Form</title>
<link href="conf.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function calcCost(){
var cost = 145;
var sindex = document.reg.guests.selectedIndex.value;
var addindex = sindex*30;
cost += addindex;
if (document.reg.member[0].checked){
cost-25;
document.reg.total.value = cost;
}
}
function testLength(field){
if (field.length == 0){
document.reg.elements["field"].style.backgroundcolor = "yellow";
return false;
}else{
document.reg.elements["field"].style.backgroundcolor = "white";
return true;
}
}
function testPattern(field,reg){
if (field.value.test(reg)){
document.reg.elements[field].style.backgroundcolor = "white";
document.reg.elements[field].style.color = "black";
return true;
}else{
document.reg.elements[field].style.backgroundcolor = "yellow";
document.reg.elements[field].style.color = "red";
return false;
}
}
function submitForm(){
valid = true;
oform=document.reg;
fname=oform.elements["fname"];
lname=oform.elements["lname"];
address=oform.elements["address"];
email=oform.elements["email"];
testLength(fname);
if (testLength(fname) == false)
valid = false;
testLength(lname);
if (testLength(lname) == false)
valid = false;
testLength(address);
if (testLength(address) == false)
valid = false;
testLength(email);
if (testLength(email) == false)
valid = false;
testPattern("phone1",/^\d\d\d$/);
if (false)
valid = false;
testPattern("phone2",/^\d\d\d$/);
if (false)
valid = false;
testPattern("phone3",/^\d\d\d\d$/);
if (false);
valid = false;
if (document.reg.member[0].checked || document.reg.member[1].checked == false){
document.reg.member[0].style.backgroundcolor = "yellow";
document.reg.member[1].style.backgroundcolor = "yellow";
valid = false;
}
if (valid.value == false){
alert("Enter all required information in the appropriate format");
}else{
calcCost();
}
return valid.value;
}
</script>
</head>
<body>
<div id="links"><img src="links.jpg" alt="" /></div>
<div id="head"><img src="logo.jpg" alt="CGIP Annual Conference" /></div>
<div id="edge"><img src="edge.jpg" alt="" /></div>
<div id="main">
<p id="intro"><b>10th Annual Conference of Computer Graphics and Image Processing</b><br />
University of Colorado, Boulder<br />
March 3 - March 7<br />
Conference Fee: $145
</p>
<h1>Conference Registration Form</h1>
<form id="reg" name="reg" method="get" action="summary.htm" onsubmit="return submitForm()">
<input type="hidden" id="total" name="total" />
<table>
<tr>
<td><span>*</span>First Name</td>
<td><input name="fname" id="fname" /></td>
<td style="text-align: right"><span>*</span>Last</td>
<td><input name="lname" id="lname" /></td>
</tr>
<tr>
<td id="add"><span>*</span>Address</td>
<td colspan="3"><textarea id="address" name="address"></textarea></td>
</tr>
<tr>
<td><span>*</span>E-mail</td>
<td colspan="3"><input name="email" id="email" /></td>
</tr>
<tr>
<td><span>*</span>Phone Number</td>
<td colspan="3">
<input id="phone1" name="phone1" size="3" />
<input id="phone2" name="phone2" size="3" /> -
<input id="phone3" name="phone3" size="4" />
</td>
</tr>
<tr>
<td colspan="3">Number attending banquet (add $30 per person)</td>
<td>
<select id="guests" name="guests">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
</tr>
<tr>
<td colspan="3"><span>*</span>Member of ACGIP (save $25 on registration fee)</td>
<td>
<input type="radio" name="member" value="yes" /> Yes
<input type="radio" name="member" value="no" /> No
</td>
</tr>
</table>
<p><span>* Required Information</span></p>
<p style="text-align: center"><input id="sbutton" type="submit" value="continue" /></p>
</form>
</div>
</body>
</html>
Parameters that are supposed to represent the particular fields, checkboxes, selection lists, etc. really confuses me as to how to reference them. What am I doing wrong here?
Trellot
