Develop Reference

Uncaught TypeError: Cannot read property 'checked' of undefined, Checkboxes

I want to validate my checkboxes to make sure that the user checked at least one, however I keep getting this error:
Uncaught TypeError: Cannot read property 'checked' of undefined.
Here is part of the HTML:
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required): <input type="text" name="userName" id="userName" required=""><br> E-Mail (Required): <input type="text" name="mail" id="mail" required=""><br> Phone (Required): <input type="text" name="phone" id="phone" required="" onchange="validNumber()"><br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other <br>
<textarea></textarea><br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and part of the JavaScript for the checkboxes:
function validChoice()
{
var bookChoice = document.userSurvey.books.value;
var x= "";
for (i=0;i< 4;i++)
{
if (document.userSurvey['bookChoice'+i].checked)
{
bookChoice = document.userSurvey['bookChoice'+i].value;
x = x +"\n"+ bookChoice;
}
}
if (bookChoice == "")
{
window.alert("You must select at least one book category.");
return false;
}
else
{
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
return true;
}
}
I am currently learning in JavaScript therefore I would prefer help in JavaScript only.
Full Code on JSFiddle:
https://jsfiddle.net/7qh5segc/

You missed some tag names and missspell them in js function:
<h1>User Survey</h1>
<h2><strong>User Information</strong></h2>
<p>Please enter your details below</p>
<br>
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required):
<input type="text" name="userName" id="userName" required="">
<br> E-Mail (Required):
<input type="text" name="email" id="email" required="">
<br> Phone (Required):
<input type="text" name="phone" id="phone" required="" onchange="validNumber()">
<br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other
<br>
<textarea></textarea>
<br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and js code goes like this:
function validName() {
var name = document.userSurvey.userName.value;
if (!/^[a-zA-Z]*$/g.test(name)) {
alert("Please enter letters a - z only");
document.userSurvey.userName.focus();
return false;
} else {
return true;
}
}
function validNumber() {
var theNumbersOnly = "";
var theChar = "";
var theInput = document.userSurvey.phone.value;
for (i = 0; i < theInput.length; i++) {
theChar = theInput.substring(i, i + 1);
if (theChar >= "0" && theChar <= "9") {
theNumbersOnly = "" + theNumbersOnly + theChar;
}
}
if (theNumbersOnly.length < 10) {
alert("You must enter 10 numbers.");
document.userSurvey.phone.focus();
} else {
var areacode = theNumbersOnly.substring(0, 3);
var exchange = theNumbersOnly.substring(3, 6);
var extension = theNumbersOnly.substring(6, 10);
var newNumber = "(" + areacode + ") ";
newNumber += exchange + "-" + extension;
document.userSurvey.phone.value = newNumber;
return true;
}
}
function validEmail() {
var email = document.userSurvey.email.value;
var atLoc = email.indexOf("#", 1);
var dotLoc = email.indexOf(".", atLoc + 2);
var len = email.length;
if (atLoc > 0 && dotLoc > 0 && len > dotLoc + 2) {
return true;
} else {
alert("Please enter your e-mail address properly.");
return false;
}
}
function validChoice() {
//var bookChoice = document.userSurvey.books.value;
var bookChoice;
var x = "";
for (var i = 0; i < 4; i++) {
if (document.userSurvey.books[i].checked) {
console.log(document.userSurvey);
bookChoice = document.userSurvey.books[i].value;
x = x + "\n" + bookChoice;
}
}
if (bookChoice == "") {
window.alert("You must select at least one book category.");
return false;
} else {
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
console.log(userName);
console.log(eMail);
console.log(phoneNo);
return true;
}
}
function validAll() {
if ((validName() == true) && (validEmail() == true) && (validNumber() == true) && (validChoice() == true)) {
return true;
} else {
return false;
}
}
You missed email tag name too. regards

You can fix the checkbox issue using the following code. A sensible way to get all the checkboxes in this case is using their shared "name" attribute. There are other ways if your structure was different - e.g. using a CSS class, or adding some other custom attribute to the elements.
function validChoice() {
var bookChoices = "";
var checkboxes = document.getElementsByName("books"); //get all elements named "books" into an array
for (i = 0; i < checkboxes.length; i++) { //loop the array
if (checkboxes[i].checked) { //if the array item at this index is checked, then add it to the list
bookChoices += "\n" + checkboxes[i].value;
}
}
if (bookChoices == "") {
window.alert("You must select at least one book category.");
return false;
} else {
alert(bookChoices); //just for testing
return true;
}
}
See https://jsfiddle.net/7qh5segc/3/ for a demo using the changed validChoice() function.

How to remove class error from select field while validation

Below is a sample code. Whenever i validate i don't want to highlight the select field in red. But just want to show the error beside the select field in Red.
HTML after click submit
<select name="event" class="control-label error">
<option value="">Select</option>
<option value="1">Sample 1</option>
</select>
<label for="event" generated="true" class="error" style="display: inline-block;"><span style="padding:6px; "> Please select something </span></label>
UI
jQuery Validation
$("form").validate({
onkeyup:false,
async: false,
rules: {
event: {
required: true
}
},
messages: {
event: {
required: "<span style='padding:6px; '> Please select Something </span>"
}
}
});

if you are using jquery validate library.. Doc says just add valid class on elements where you don't want the border styling.
hope this will help..

Actually required is Html 5 that should show the error in red color only
while in validation use id to call or validate then use that id in style with your need color
ex
#errorBox1,
#errorBox2,
#errorBox3,
#errorBox4,
#errorBox5,
#errorBox6,
#errorBox7,
#errorBox8,
#errorBox9,
#errorBox10
{
color:blue;
}
This is my external stylesheet
function validate()
{
var status = true;
var a = document.form.Name.value;
var b = document.form.Password.value;
var c = document.form.Cpassword.value;
var d = document.form.Address.value;
var e = document.form.Email.value;
var f = document.form.Mobile.value;
if( a == "" )
{
document.getElementById("errorBox1").innerHTML = "*Please fill required";
status = false;
}
else
{
document.getElementById("errorBox1").innerHTML = "";
}
if( b == "" )
{
document.getElementById("errorBox2").innerHTML = "*Please fill required";
status = false;
}
else
{
document.getElementById("errorBox2").innerHTML = "";
}
if( c == "" )
{
document.getElementById("errorBox3").innerHTML = "*Please fill required";
status = false;
}
else
{
document.getElementById("errorBox3").innerHTML = "";
}
if (b!=c)
{
document.getElementById("errorBox10").innerHTML = "*Password does not match";
status = false;
}
else
{
document.getElementById("errorBox10").innerHTML = "";
}
if( d == "" )
{
document.getElementById("errorBox4").innerHTML = "*Please fill required";
status = false;
}
else
{
document.getElementById("errorBox4").innerHTML = "";
}
if(e == "" || e.indexOf("#", 0) < 0 || e.indexOf(".", 0) < 0 )
{
document.getElementById("errorBox5").innerHTML = "*Please fill your valid email id ";
status = false;
}
else
{
document.getElementById("errorBox5").innerHTML = "";
}
if(f == "" || f.length !=10 || f.charAt(0)!="9" )
{
document.getElementById("errorBox6").innerHTML = "*Mobile no must be 10 digits";
status = false;
}
else
{
document.getElementById("errorBox6").innerHTML = "";
}
if ((document.form.radio1[0].checked == false) && (document.form.radio1[1].checked == false))
{
document.getElementById("errorBox7").innerHTML = "*Select your Gender";
status = false;
}
else
{
document.getElementById("errorBox7").innerHTML = "";
}
if ((document.form.chk[0].checked == false) && (document.form.chk[1].checked == false))
{
document.getElementById("errorBox8").innerHTML = "*Please fill the checkbox";
status = false;
}
else
{
document.getElementById("errorBox8").innerHTML = "";
}
if (document.form.comment.value == "")
{
document.getElementById("errorBox9").innerHTML = "*Please share your feedback";
status = false;
}
else
{
document.getElementById("errorBox9").innerHTML = "";
}
return status;
}
</script>
</head>
<body>
<div class="rm">
<form name="form" method="post" onsubmit ="return validate();" action=" ">
Name : <input type="text" name="Name" onkeyup="validate();" /><div id="errorBox1"></div>
<br>
Password : <input type="password" name="Password" onkeyup="validate();" /><div id = "errorBox2"></div>
<br>
Confirm Password : <input type="password" name="Cpassword" onkeyup="validate();" /><div id = "errorBox3"></div> <div id = "errorBox10"></div>
<br>
Address : <input type="text" name="Address" onkeyup="validate();" /><div id = "errorBox4"></div>
<br>
Email : <input type="text" name="Email" onkeyup="validate();" /><div id = "errorBox5"></div>
<br>
Mobile No :<input type="text" name="Mobile" onkeyup="validate();" /><div id = "errorBox6"></div>
<br>
Gender : Male<input name="radio1" type="radio" value="Male" onclick="validate();"/>
Female<input name="radio1" type="radio" value="Female" onclick="validate();"/><div id = "errorBox7"></div>
<br>
Computer Courses: <input type="checkbox" name="chk" onclick="validate();" value="Php"/> Php
<input type="checkbox" name="chk" onclick="validate();" value="ccna"/> Ccna <div id = "errorBox8"></div>
<br>
CommentBox : <textarea cols = "25" name= "comment" onkeyup="validate();" /></textarea><div id = "errorBox9"></div>
<br>
<div class="submit">
<input type="submit" name="submit" value="Submit" >
<input type="reset" value="Reset"></submit>

Thanks everyone for the response. I just did the following in validate part. I just added a Highlight and it worked. I seriously don't know how it worked. But thanks to Sathvik Cheela for giving an idea about highlight and unhighlight.
$("form").validate({
onkeyup:false,
async: false,
rules: {
event: {
required: true
}
},
messages: {
event: {
required: "<span style='padding:6px; '> Please select Something </span>"
}
},
highlight: function(element, errorClass) {
}
});
UI (Now)

Javascript not executing. No console errors, no validation errors

When I hit my submit button it just goes straight to the php page. The javascript does not load at all. This is very confusing because I am receiving no errors in console nor when I validate the javascript using external error checkers (such as JShint). The javascript was working at one point in my coding so I have no idea why it stopped working.
JAVASCRIPT:
//jQuery
$(document).ready(function() {
// listen for a click event on any radio element
$('input[type="radio"]').click(function() {
// get the id of the clicked element
var id = $(this).attr('id');
// fade out any existing image elements
$('img').fadeOut(800, function() {
// fade in the image element with the id we're after, with a half second delay (500 milliseconds)
setTimeout(function() {
$('#' + id + 'i').fadeIn(800);
}, 500);
});
});
});
function checkInput() {
var firstName = document.getElementById("fn");
var lastName = document.getElementById("ln");
var email = document.getElementById("email");
var emailR = document.getElementById("emailR");
var postal = document.getElementById("pc");
var city = document.getElementById("city");
var sA = document.getElementById("sA");
var qN = document.getElementById("qty");
var provy = document.getElementById("prov");
var foc = false;
var error = "";
var letters = /^[a-zA-Z]+$/;
var numbers = /^\d+$/;
var letNm = /^(?=.*[a-zA-Z])(?=.*[0-9])/;
//First-Name Validation
if (firstName.value == "" || firstName.value.length > 15 || firstName.value.length < 2 || !firstName.value.match(letters)) {
error += "\n Please enter a valid first name.";
if (foc == false) {
document.getElementById("fn").focus();
foc = true;
}
}
//Last-Name Validation
if (lastName.value == "" || lastName.value.length > 15 || lastName.value.length < 2 || !lastName.value.match(letters)) {
error += "\n Please enter a valid last name";
if (foc == false) {
document.getElementById("ln").focus();
foc = true;
}
}
//street Address
if (sA.value == "" || sA.value.length < 6 || sA.value.length > 30 || !sA.value.match(letNm)) {
error += "\n Please enter a valid street address (must contain letters and numbers, \n and be more than 6 less than 30 chars) ";
if (foc == false) {
document.getElementById("sA").focus();
foc = true;
}
}
//City Validation
if (city.value == "" || city.value.length > 20 || city.value.length < 2 || !city.value.match(letters)) {
error += "\n Please enter a valid city (more than 2 characters, less than 20, all letters)";
if (foc == false) {
document.getElementById("city").focus();
foc = true;
}
}
//Province Validation
var select = provy.options[provy.selectedIndex].value;
if (select == "s") {
error += "\n Please choose a province";
if (foc == false) {
document.getElementsByName("prov").focus();
foc = true;
}
}
//Email Validation
var ei = email.value.lastIndexOf('#');
var dot = email.value.lastIndexOf('.');
if (email.value == "" || email.value.length < 7 || email.value.length > 50 || ei == -1 || dot == -1 || dot < ei + 2) {
error += "\n Please enter a valid email address \n (must have an \"#\" symbol followed by a \".\")";
if (foc == false) {
document.getElementById("email").focus();
foc = true;
}
} else if (emailR.value != email.value) {
error += "\n Your email addresses did not match";
if (foc == false) {
document.getElementById("emailR").focus();
foc = true;
}
}
//Postal Code Validation
var pi = postal.value.lastIndexOf(" ");
var code = /^[A-Za-z]\d[A-Za-z][ -]?\d[A-Za-z]\d$/;
if (postal.value == "" || postal.value.length != 7 || !postal.value.match(code) || pi != 3) {
error += "\n Please enter a valid Canadian postal code. E.g. \"N3H 1M1\" ";
if (foc == false) {
document.getElementById("pc").focus();
foc = true;
}
}
//Album selection Validation
var jay = document.getElementsById("jayz");
if (!isOneChecked(jay)) {
error += "\n Please choose an album to purchase";
if (foc == false) {
document.getElementsByName("jayz").focus();
foc = true;
}
}
//quantity validation
if (qN.value == "" || qN.value > 99 || qN.value < 1 || !qN.value.match(numbers)) {
error += "\n Please enter a quantity between 1-99";
if (foc == false) {
document.getElementByName("qntty").focus();
foc = true;
}
}
//error validation:error2 boolean returns either true or false
var error2 = false;
if (foc == false) {
alert("Thank you for signing up!");
error2 = true;
} else {
alert(error);
error2 = false;
}
return error2;
}
//function that trims and converts string to properCase
function properCaseTrim(string) {
var str = string.length;
for (var i = 0; i < str; i++) {
var letter = string.charAt(i);
if (letter == " ") {
string = string.replace(/^\s\s*/, ''); // Remove Preceding white space
string = string.replace(/\s\s*$/, ''); // Remove Trailing white space
}
string = string.charAt(0).toUpperCase() + string.slice(1);
}
return string;
}
function isOneChecked() {
// All <input> tags...
var chx = document.getElementsByTagName('input');
for (var i = 0; i < chx.length; i++) {
// Return true from the function on first match of a checked item
if (chx[i].type == 'radio' && chx[i].checked) {
return true;
}
}
// End of the loop, return false
return false;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Assignment #4</title>
<link rel="icon" type="image/x-icon" href="images/favi.ico" />
<link rel="stylesheet" type="text/css" href="styles/main.css"/>
<script type="text/javascript" src="javascript/jquery-1.12.1.js"></script>
<script type ="text/javascript" src="javascript/function.js"></script>
</head>
<body>
<header>
<h1>Jay-Z Albums</h1>
</header>
<fieldset id = "field1">
<legend>Shipping Info</legend>
<p id ="p">All Fields Are Mandatory </p>
<form method = "post" name= "user creation form" onsubmit="return checkInput();" action = "php/validate.php">
First name<br>
<input type="text" name="firstName" id ="fn" onblur="this.value = properCaseTrim(this.value)" value= "" autofocus><br>
Last name<br>
<input type="text" name="lastName" id = "ln" onblur="this.value = properCaseTrim(this.value)" value= ""><br>
Street Address<br>
<input type="text" name="streetAddress" id = "sA" placeholder="123 Main St." onblur="this.value = properCaseTrim(this.value)" value= "" ><br>
<label>
City <br>
<input type="text" name="city" id="city" onblur="this.value = properCaseTrim(this.value)" value= "">
</label>
<br>
Province <br>
<select name ="prov" id ="prov">
<option value = "s">-select-</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scoti">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select>
<br>
<label>
Postal Code <br>
<input type="text" name="pc" id="pc" placeholder="A1A 1A1" onblur="this.value = this.value.toUpperCase(); this.value = properCaseTrim(this.value)" value= ""> <br>
</label>
<label>
Email Address<br>
<input type="text" name="email" id="email" value= ""> <br>
</label>
<label>
Repeat Email Address <br>
<input type="text" name="emailR" id="emailR" value= "" > <br>
</label>
<br>
</fieldset>
<fieldset id = "field3">
<legend>Order </legend>
<p> One Album Per Order</p>
<p> Prices shown are without tax </p>
<input type = "radio" name ="jayz" value="rDbt" id= "rD">[1996]Reasonable Doubt-$25 <br>
<input type = "radio" name ="jayz" value="bPrint" id= "bP1">[2001]The Blueprint-$10<br>
<input type = "radio" name ="jayz" value="bPrint2" id = "bP2">[2002]The Blueprint 2-$15<br>
<input type = "radio" name ="jayz" value="kCome" id ="kC">[2006]Kingdom Come-$10<br>
<input type = "radio" name ="jayz" value="bPrint3" id ="bP3">[2009]The Blueprint 3-$25<br>
<input type = "radio" name ="jayz" value="mCarta" id ="mC">[2013]Magna Carta Holy Grail-$30<br>
<div id="q">
# of Albums:
<input type="text" name="quant" id="qty">
</div>
</fieldset>
<aside>
<div id = "divvy">
<img class = "hidden" src="images/rDoubt.jpg" alt="Reasonable Doubt" height="400px" width="400px" id= "rDi">
<img class = "hidden" src="images/bPrint.jpg" alt="the Blueprint" height="400px" width="400px" id= "bP1i">
<img class = "hidden" src="images/bPrint2.jpg" alt="the Blueprint 2" height="400px" width="400px" id = "bP2i">
<img class = "hidden" src="images/kCome.jpg" alt="Kingdom Come" height="400px" width="400px" id ="kCi">
<img class = "hidden" src="images/bPrint3.jpg" alt="the Blueprint 3" height="400px" width="400px" id ="bP3i">
<img class = "hidden" src="images/mCarta.jpg" alt="Magna Carta" height="400px" width="400px" id ="mCi">
</div>
</aside>
<input id="button" type="submit" value="Submit Order" >
</form>
</body>
</html>

Reverse the order of these script tags: (The jquery one should be first)
<script type ="text/javascript" src="javascript/function.js"></script>
<script type="text/javascript" src="javascript/jquery-1.12.1.js"></script>
I suspect your jquery code in function.js is not working due to this issue.

Thats the default behavior of <input type="submit"/>, you have to override it:
$('form').on('submit',function(e){
e.prevetDefault();
//do your JS processing here, call a function and finally make an AJAX request
checkInput();
});
That should do.
On a separate note, I dont think 'name' attribute with spaces is valid. It is best to be kept unique/ or treat as a key or identifier.

how to hide errorbox validation in java script

This code below is working but I want some modification in this code.
When user is not filling the box it is displaying error box that part is working but after filling it should disappear. So please anyone help me to solve the issue.
I have post the code here including html and java script so just copy and run it it will work and try to resolve my issue.
<html>
<head>
<script type="text/javascript">
function validate()
{
var fname = document.form.Name.value;
var lname = document.form.Lame.value;
var same = document.form.Same.value;
if( fname == "" )
{
document.form.Name.focus() ;
document.getElementById("errorBox1").innerHTML = "enter the first name";
return false;
}
if( lname == "" )
{
document.form.Lame.focus() ;
document.getElementById("errorBox2").innerHTML = "enter the last name";
return false;
}
if( same == "" )
{
document.form.Same.focus() ;
document.getElementById("errorBox3").innerHTML = "enter the Same name";
return false;
}
}
</script>
</head>
<body>
<form name="form" >
SSS :<input type="text" name="Name" value="" class="input_name" ><div id="errorBox1"> </div>
<br>
SSmjhjk :<input type="text" name="Lame" value="" class="input_name" ><div id = "errorBox2"></div>
<br>
nngb :<input type="text" name="Same" value="" class="input_name" ><div id = "errorBox3"></div>
<input type=button onClick="validate()" value=check>
</form>

In my first notice, You have the syntax error in your script. In your last condition you have written the code like if else if( same == "" ). This is wrong.
If you want check and display error for all the textbox at the same time, then you need to remove the return property from the script. Update your script like below.
function validate()
{
var fname = document.form.Name.value;
var lname = document.form.Lame.value;
var same = document.form.Same.value;
document.getElementById("errorBox1").innerHTML ="";
document.getElementById("errorBox2").innerHTML ="";
document.getElementById("errorBox3").innerHTML ="";
if( fname == "" )
{
document.getElementById("errorBox1").innerHTML = "enter the first name";
}
if( lname == "" )
{
document.getElementById("errorBox2").innerHTML = "enter the last name";
}
if( same == "" )
{
document.getElementById("errorBox3").innerHTML = "enter the Same name";
}
}
HTML
<form name="form" >
SSS :<input type="text" name="Name" value="" class="input_name" onkeyup="validate();" /><div id="errorBox1"> </div>
<br>
SSmjhjk :<input type="text" name="Lame" onkeyup="validate();" value="" class="input_name" /><div id = "errorBox2"></div>
<br>
nngb :<input type="text" name="Same" onkeyup="validate();" value="" class="input_name" /><div id = "errorBox3"></div>
<input type="button" onclick="validate();" value="check" />
</form>
Fiddle Demo

Try this , this might work for you
function validate() {
var fname = document.form.Name.value;
var lname = document.form.Lame.value;
var same = document.form.Same.value;
if (fname == "") {
document.form.Name.focus();
document.getElementById("errorBox1").innerHTML = "enter the first name";
return false;
} else {
document.getElementById("errorBox1").innerHTML = "";
}
if (lname == "") {
document.form.Lame.focus();
document.getElementById("errorBox2").innerHTML = "enter the last name";
return false;
} else {
document.getElementById("errorBox2").innerHTML = "";
}
if (same == ""){
document.form.Same.focus();
document.getElementById("errorBox3").innerHTML = "enter the Same name";
return false;
} else {
document.getElementById("errorBox3").innerHTML = "";
}
}
use input type like this
<input type="text" id="fname" onkeyup="validate()">
This will help you

If you want to use javascript only, you can hide the error div:
document.getElementById("errorBox1").style.display = 'none';

JavaScript Giving 'Object Expected' Error

I am writing some code that shows or hides a calendar based on a drop down select form. I have it set to run my showHideCalendar() function as an onchange action on the drop down selection. When I change the selected option I receive an "Object expected" error. I have included the relevant HTML and JavaScript code.
<script type="text/javascript" language="javascript">
function showHideCalendar(element) {
document.getElementById("calendar").style.display = "none";
if (document.getElementById("dropdown").selectedIndex === 13) {
cal5.popup();
document.getElementById("textField").value = "";
document.getElementById("calendar").style.display = "inline";
}
}
</script>
<FORM NAME='Labs' METHOD='POST' ACTION="">
<select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(document.Labs.TimeFrame0)'>
<option value='NoReorder'>Do Not Reorder</option>
<option value='2012-06-14 08:40:39.067'>Today</option>
<option value='2012-06-21 08:40:39.067'>1 Week</option>
<option value='2012-06-28 08:40:39.067'>2 Weeks</option>
<option value='2012-07-05 08:40:39.067'>3 Weeks</option>
<option value='2012-07-12 08:40:39.067'>4 Weeks</option>
<option value='2012-07-26 08:40:39.067'>6 Weeks</option>
<option value='2012-07-14 08:40:39.067' selected>1 Month</option>
<option value='2012-08-14 08:40:39.067'>2 Months</option>
<option value='2012-09-14 08:40:39.067'>3 Months</option>
<option value='2012-10-14 08:40:39.067'>4 Months</option>
<option value='2012-12-14 08:40:39.067'>6 Months</option>
<option value='2013-03-14 08:40:39.067'>9 Months</option>
<option value='custom' id='custom'>Calendar Select</option>
</select>
<div id='calendar' style='display:inline'>
<input type=text name='StartDate' value='' size=20 onchange='inputChanged()' onkeydown='inputChanged()' onblur='inputChanged()' id='textField'>
<a href='javascript:cal5.popup();' onmousedown='inputChanged()'> <img src='/jscalendar/img/cal.gif' width='16' height='16' border='0' alt='Click Here to Pick up the date'></a>
</div>
<input type=checkbox name=SameDate value='on' checked onClick='SetTimeFrame(document.Labs.TimeFrame0)'> Use Same Date For All Labs
<input class='btnsave' type=button name=Save value='Reorder Labs' onClick=javascript:document.Labs.action='/LabReview/Reorder.php?PROV=PROVID&MaxCount=2&Text=1';document.Labs.submit();>
<input class='btncancel' type=button name=Cancel value=Cancel onClick=javascript:top.window.close()>
</FORM>
Does anyone see any reason why this is not working. The error is thrown on the line <select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(document.Labs.TimeFrame0)'>.
One of the answerers thinks the error isn't in my new code, but rather something else on the page. I am editing my question to add the rest of the javascript that is on the page.
<script type="text/javascript" language="javascript">
function showHideCalendar(element) {
document.getElementById("calendar").style.display = "none";
if (document.getElementById("dropdown").selectedIndex === 13) {
cal5.popup();
document.getElementById("textField").value = "";
document.getElementById("calendar").style.display = "inline";
}
}
function inputChanged() {
document.getElementById("dropdown").selectedIndex = 13;
}
function SetTimeFrame(element)
{
if (document.Labs.SameDate.checked==true)
{
var Elements=document.Labs.elements.length;
for (var i=0; i<Elements; i++)
{
if (document.Labs.elements[i].type=='select-one')
{
document.Labs.elements[i].options[element.selectedIndex].selected=true;
}
}
}
}
if (top.window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>"))
{
if ('<?php echo($Reviewed); ?>' == 'yes')
{
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
else if ('<?php echo($Reviewed); ?>' == 'partial')
{
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
}
else
{
var temp=top.window.opener.location.href;
top.window.opener.location.href=temp;
top.window.opener.top.window.location.reload();
}
function DateCheck(element)
{
var xx = element.value;
var re = new RegExp("^[0-9][0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]$");
var re2 = new RegExp("^[0-9]/[0-9][0-9]/[0-9][0-9][0-9][0-9]$");
var re3 = new RegExp("^[0-9][0-9]/[0-9]/[0-9][0-9][0-9][0-9]$");
var re4 = new RegExp("^[0-9]/[0-9]/[0-9][0-9][0-9][0-9]$");
var error = "";
var maxdays = new Array(0,31,29,31,30,31,30,31,31,30,31,30,31);
var retval = true;
if(element.value != "")
{
if(xx.search(re) < 0 && xx.search(re2) < 0 && xx.search(re3) < 0 && xx.search(re4) < 0)
{
error = "Invalid Date Format " + xx + ". Please enter dates in the format mm/dd/yyyy."
retval = false;
element.value = ""
}
else
{
var list = xx.split("/");
var month = list[0];
if(month.charAt(0) == "0")
month = month.substr(1);
if( list[0] < 1 || list[0] > 12)
{
error = "Invalid Month " + list[0];
retval = false;
element.value = ""
}
else
if(list[1] < 1 || list[1] > maxdays[month])
{
error = "Invalid Day " + list[1];
retval = false;
element.value = ""
}
else
if(list[2] < 1900)
{
error = "Invalid Year (Must be greater than 1900) " + list[2];
retval = false;
element.value = ""
}
}
if(!retval)
alert(error);
return retval;
}
}
</script>

Change:
<select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(document.Labs.TimeFrame0)'>
To:
<select id="dropdown" name='TimeFrame0' onchange='showHideCalendar(this)'>

It turns out the problem was caused by the following block of code.
if (top.window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>")) {
if ('<?php echo($Reviewed); ?>' == 'yes')
{
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
else if ('<?php echo($Reviewed); ?>' == 'partial')
{
window.opener.document.getElementById("Partial<?php echo($_GET['Item']); ?>").style.visibility='visible';
window.opener.document.getElementById("Complete<?php echo($_GET['Item']); ?>").style.visibility='hidden';
}
}
else
{
var temp=top.window.opener.location.href;
top.window.opener.location.href=temp;
top.window.opener.top.window.location.reload();
}
When I removed that from the code, it worked like a charm. Thanks to everyone for their suggestions and thoughts.