Need some help with some Javascript
Me arrays and for loops do not get along.
In the below code. I have the two radio dots.
This section will display the number 2 for the length, and will check if the 1st radio dot is checked, verify it is true, and display the value yes.
However, the second dot returns a false. It goes to the else statement, just like it does when I leave the radio dots unchecked. .
I can get this to do a vice versa, or have them all set to false or null.
for (z=0; z<document.trip.radPermission.length; z++)
If I add a [z] they always show a null value.
For alert(document.trip.radPermission.length); it displays 2, if I add a [z] it displays undefined
For if (document.trip.radPermission[z].checked === true) if I remove the [z] it does not check the array at all and pulls a undefined as the value. With the z it only checks the 1st position in the array.
Even if I set the default state to checked, the no form still comes back as false.
I've also noticed the value is always yes.
Here is the part that is giving me problems, ignore all the alerts im using them to determine what value(s) it shows where.
I have also tried without the Permission variable and only used document.trip.radPermission to determine if that was the problem.
Code:
for (i=0; i<document.trip.radPermission.length; i++)
{
//alert(document.trip.radPermission.length);
//alert(document.trip.radPermission[i].value);
//alert(document.trip.radPermission[i].checked);
Permission = document.trip.radPermission[i].checked;
if (Permission !== false)
{
//alert(document.trip.radPermission[i].value);
//alert(document.trip.radPermission[i].checked);
return true;
}
else
{
//alert(document.trip.radPermission[i].value);
//alert(document.trip.radPermission[i].checked);
alert("Please indicate if you do or do not have permission to go.");
return false;
}
}
Code:
<html>
<head>
<title>Field Trip Consent Form</title>
<script type="text/javascript">
function validateForm() {
var Destination = document.trip.destination.value;
var Month = document.trip.month.value;
var Day = document.trip.day.value;
var Year = document.trip.year.value;
var i;
var z;
var Permission;
if (Destination==null || Destination=="")
{
alert("A Destination must entered.");
return false;
}
if (Month === "Month")
{
alert("A Month must be selected.");
return false;
}
if (Day === "Day")
{
alert("A Day must be selected.");
return false;
}
for (i=0; i<document.trip.txtParent.length; i++)
{
if (document.trip.txtParent[i].value === null || document.trip.txtParent[i].value==="")
{
alert("Your Parent's information must be entered.");
return false;
}
}
for (i=0; i<document.trip.radPermission.length; i++)
{
//alert(document.trip.radPermission.length);
//alert(document.trip.radPermission[i].value);
//alert(document.trip.radPermission[i].checked);
Permission = document.trip.radPermission[i].checked;
if (Permission !== false)
{
//alert(document.trip.radPermission[i].value);
//alert(document.trip.radPermission[i].checked);
return true;
}
else
{
//alert(document.trip.radPermission[i].value);
//alert(document.trip.radPermission[i].checked);
alert("Please indicate if you do or do not have permission to go.");
return false;
}
}
}
</script>
</head>
<body>
<h1>Field Trip Consent Form</h1>
<form name="trip" onsubmit="return validateForm()">
<h2>Description of Trip</h2>
<p>Destination
<input type="text" name="destination" SIZE="50" /></p>
<p>Date of Trip
<select name="month">
<option selected value="Month">Month
<option value="Jan">Jan
<option value="Feb">Feb
<option value="Mar">Mar
<option value="Apr">Apr
<option value="May">May
<option value="Jun">Jun
<option value="Jul">Jul
<option value="Aug">Aug
<option value="Sep">Sep
<option value="Oct">Oct
<option value="Nov">Nov
<option value="Dec">Dec
</select>
<select name="day">
<option selected value="Day">Day
<option value="01">01
<option value="02">02
<option value="03">03
<option value="04">04
<option value="05">05
<option value="06">06
<option value="07">07
<option value="08">08
<option value="09">09
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<select name="year">
<option selected value="2012">2012
<option value="2012">2012
<option value="2013">2013
<option value="2014">2014
<option value="2015">2015
</select>
<h2>Parental Information</h2>
<p>Mother's Name
<input type="text" name="txtParent" size="20" />
</p>
<p>Mother's Work Phone
<input type="text" name="txtParent" size="20" />
</p>
<p>Father's Name
<input type="text" name="txtParent" size="20" />
</p>
<p>Father's Work Phone
<input type="text" name="txtParent" size="20" />
</p>
<p><input type="radio" name="radPermission" value="Yes"/> Permission is Granted
<input type="radio" name="radPermission" value="no"/> Permission is NOT Granted
</p>
<br>
<p><input type="submit" value="Submit This Data" />
<input type="reset" /></p>
<br />
</form>
</body>
</html>