SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validate multiple dropdown.

    Hello,

    I am have 4 dropdown that has the list of courses for the user to select what courses that would like to take and what session(radio buttons) that like to take that course in. How do I validate so that however many courses the student decide to take that those dropwdown and radio button is validated?
    Javascript validate page
    Code:
    
    function validateAll()
    {
    
    	var passval = true;
    
    	document.getElementById("firstonline").innerHTML = "";
    	document.getElementById("secondonline").innerHTML = "";
    	document.getElementById("thirdonline").innerHTML = "";
    	document.getElementById("fourthonline").innerHTML = "";
    
    	var select_course1 = document.info.cnames1.value;
    	var select_course2 = document.info.cnames2.value;
    	var select_course3 = document.info.cnames3.value;
    	var select_course4 = document.info.cnames4.value;
    	
    	var session1_1 = document.info.choosesession1[0].checked;
    	var session1_2 = document.info.choosesession1[1].checked;
    	
    	if (select_course1 == '' || session1_1 == false || session1_2 == false)
    	{
    		document.getElementById('firstonline').innerHTML = 'You did not choose a first online course or did not choose between 1st and 2nd session.';
    		document.getElementById("invalid-form").style.visibility = "visible";	
    		passval = false;
    	}
    	
    	var session2_1 = document.info.choosesession2[0].checked;
    	var session2_2 = document.info.choosesession2[1].checked;
    	
    	if (select_course1 != '' || select_course2 == '' || session2_1 == false || session2_2 == false)
    	{
    		document.getElementById('secondonline').innerHTML = 'You did not choose a second online course or did not choose between 1st and 2nd session.';
    		document.getElementById("invalid-form").style.visibility = "visible";	
    		passval = false;
    	}
    	
    	var session3_1 = document.info.choosesession3[0].checked;
    	var session3_2 = document.info.choosesession3[1].checked;
    	
    	if (select_course1 != '' || select_course2 != '' || select_course3 == '' || session3_1 == false || session3_2 == false)
    	{
    		document.getElementById('thirdonline').innerHTML = 'You did not choose a third online course or did not choose between 1st and 2nd session.';
    		document.getElementById("invalid-form").style.visibility = "visible";	
    		passval = false;
    	}
    	
    	var session4_1 = document.info.choosesession4[0].checked;
    	var session4_2 = document.info.choosesession4[1].checked;
    	
    	if (select_course1 != '' || select_course2 != '' || select_course3 != '' || select_course4 == '' || session4_1 == false || session4_2 == false)
    	{
    		document.getElementById('fourthonline').innerHTML = 'You did not choose a fourth online course or did not choose between 1st and 2nd session.';
    		document.getElementById("invalid-form").style.visibility = "visible";	
    		passval = false;
    	}
    	
    	
    	if (passval == false)
    	{
    		return false;
    	}
    	
    	else
    	{
    		document.getElementById("invalid-form").style.visibility = "hidden";
    		return true;
    	}
    	
    }
    xhtml part

    Code:
    	1) Please select your online course:
    	
    	<select name="cnames1" class="clearance-select">									
    		<option value="">Choose Below</option>
    		<option value="1">1</option>		
    		<option value="2">2</option>
    		<option value="3">3</option>		
    		<option value="4">4</option>
    	</select>
    
    	<p>
    		<span class="bold">Choose a session:</span>
    		<input type="radio" name="choosesession1" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession1" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>							
    
    	2) Please select your online course:
    	
    	<select name="cnames2" class="clearance-select">									
    		<option value="">Choose Below</option>
    		<option value="1">1</option>		
    		<option value="2">2</option>
    		<option value="3">3</option>		
    		<option value="4">4</option>
    	</select>
    
    	<p>
    		<span class="bold">Choose a session:</span>
    		<input type="radio" name="choosesession2" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession2" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>	
    	
    	
    		3) Please select your online course:
    	
    	<select name="cnames3" class="clearance-select">									
    		<option value="">Choose Below</option>
    		<option value="1">1</option>		
    		<option value="2">2</option>
    		<option value="3">3</option>		
    		<option value="4">4</option>
    	</select>
    
    	<p>
    		<span class="bold">Choose a session:</span>
    		<input type="radio" name="choosesession3" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession3" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>	
    	
    		4) Please select your online course:
    	
    	<select name="cnames4" class="clearance-select">									
    		<option value="">Choose Below</option>
    		<option value="1">1</option>		
    		<option value="2">2</option>
    		<option value="3">3</option>		
    		<option value="4">4</option>
    	</select>
    
    	<p>
    		<span class="bold">Choose a session:</span>
    		<input type="radio" name="choosesession4" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession4" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>

  2. #2
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only issue I notice in the javascript you have is that you are attempting to pull the selected value out of the select boxes incorrectly.

    var select_course1 = document.info.cnames1.value; will not work

    try this
    var select_course1 = document.info.cnames1.options[document.info.cnames1.selectedIndex].value;

    Rick

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I got the validation to work. But how it works now is once they select the option for one class and it passes the validation it goes the same process for rest of the option. But what if that person only has one course to take instead of four. How do I make it so that its okay to just pick one course?

    This is the updated javascript code;
    Code:
    function validateAll()
    {
    
    	var passval = true;
            var select_course1 = document.info.cnames1.options[document.info.cnames1.selectedIndex];
    	var select_course2 = document.info.cnames2.options[document.info.cnames2.selectedIndex];
    	var select_course3 = document.info.cnames3.options[document.info.cnames3.selectedIndex];
    	var select_course4 = document.info.cnames4.options[document.info.cnames4.selectedIndex];
    		
    	var session1_1 = document.info.choosesession1[0].checked;
    	var session1_2 = document.info.choosesession1[1].checked;
    	
    	if (select_course1.value == '' && session1_2 == false && session1_2 == false)
    	{
    		document.getElementById("form-wrong-done").style.color = "#CC0000";
    		document.getElementById("form-wrong-radioone").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	var session2_1 = document.info.choosesession2[0].checked;
    	var session2_2 = document.info.choosesession2[1].checked;
    	
    	if (select_course1.value != '' && select_course2.value == '' && session2_1 == false && session2_2 == false)
    	{
    		document.getElementById("form-wrong-dtwo").style.color = "#CC0000";
    		document.getElementById("form-wrong-radiotwo").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	var session3_1 = document.info.choosesession3[0].checked;
    	var session3_2 = document.info.choosesession3[1].checked;
    	
    	if (select_course1.value != '' && select_course2.value != '' && select_course3.value == '' && session3_1 == false && session3_2 == false)
    	{
    		document.getElementById("form-wrong-dthree").style.color = "#CC0000";
    		document.getElementById("form-wrong-radiothree").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	var session4_1 = document.info.choosesession4[0].checked;
    	var session4_2 = document.info.choosesession4[1].checked;
    	
    	if (select_course1.value != '' && select_course2.value != '' && select_course3.value != '' && select_course4.value == '' && session4_1 == false && session4_2 == false)
    	{
    		document.getElementById("form-wrong-dfour").style.color = "#CC0000";
    		document.getElementById("form-wrong-radiofour").style.color = "#CC0000";
    		passval = false;
    	}
    
    	if (document.info.signature.value== '')
    	{
    		document.getElementById("form-wrong-sig").style.color = "#CC0000";
    		document.getElementById("form-wrong-sig").style.fontWeight = 'bold';	
    		passval = false;
    	}
    	
    	
    	if (passval == false)
    	{
    		
    		return false;
    	}
    	
    	else
    	{
    		document.getElementById("invalid-form").style.visibility = "hidden";
    		return true;
    	}
    	
    }

  4. #4
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would need to set a global variable, perhaps intCoursesSelected.
    Set that variable to 0 at the top
    Then on the first loop, increment the value, intCoursesSelected++
    Add the conditional to your if logic for the remainder that it only sets passval = false if the intCoursesSelected == 0

    Rick

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright this is what I have and not sure if this is what you were talking about.

    Code:
    var intCoursesSelected = 0;
    
    function validateAll()
    {
    
    	var passval = true;
    
    
    	var select_course1 = document.info.cnames1.options[document.info.cnames1.selectedIndex];
    	var select_course2 = document.info.cnames2.options[document.info.cnames2.selectedIndex];
    	var select_course3 = document.info.cnames3.options[document.info.cnames3.selectedIndex];
    	var select_course4 = document.info.cnames4.options[document.info.cnames4.selectedIndex];
    		
    	var session1_1 = document.info.choosesession1[0].checked;
    	var session1_2 = document.info.choosesession1[1].checked;
    	var session2_1 = document.info.choosesession2[0].checked;
    	var session2_2 = document.info.choosesession2[1].checked;
    	var session3_1 = document.info.choosesession3[0].checked;
    	var session3_2 = document.info.choosesession3[1].checked;
    	var session4_1 = document.info.choosesession4[0].checked;
    	var session4_2 = document.info.choosesession4[1].checked;
    		
    	
    	for( intCoursesSelected = 0;  intCoursesSelected < 4; intCoursesSelected++) {
    		
    		if (select_course1.value == '' && session1_2 == false && session1_2 == false)
    		{
    			document.getElementById("form-wrong-done").style.color = "#CC0000";
    			document.getElementById("form-wrong-radioone").style.color = "#CC0000";
    			intCoursesSelected == 0;
    			passval = false;
    		}
    		
    		
    		if (select_course1.value != '' && select_course2.value == '' && session2_1 == false && session2_2 == false)
    		{
    			document.getElementById("form-wrong-dtwo").style.color = "#CC0000";
    			document.getElementById("form-wrong-radiotwo").style.color = "#CC0000";
    			intCoursesSelected == 0;
    			passval = false;
    		}
    		
    		if (select_course1.value != '' && select_course2.value != '' && select_course3.value == '' && session3_1 == false && session3_2 == false)
    		{
    			document.getElementById("form-wrong-dthree").style.color = "#CC0000";
    			document.getElementById("form-wrong-radiothree").style.color = "#CC0000";
    			intCoursesSelected == 0;
    			passval = false;
    		}
    		
    		
    		if (select_course1.value != '' && select_course2.value != '' && select_course3.value != '' && select_course4.value == '' && session4_1 == false && session4_2 == false)
    		{
    			document.getElementById("form-wrong-dfour").style.color = "#CC0000";
    			document.getElementById("form-wrong-radiofour").style.color = "#CC0000";
    			intCoursesSelected == 0;
    			passval = false;
    		}
    	}	
    	
    	
    	if (passval == false)
    	{
    		
    		return false;
    	}
    	
    	else
    	{
    		document.getElementById("invalid-form").style.visibility = "hidden";
    		return true;
    	}
    	
    }
    But it is still not working. Any help?

  6. #6
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this... the intCoursesSelected is incremented each time the course selection passes validation. Then the validation check will pass anytime the intCoursesSelected variable is greater than zero.

    Code:
    var intCoursesSelected = 0;
    
    function validateAll()
    {
    
    	var passval = true;
    
    	var select_course1 = document.info.cnames1.options[document.info.cnames1.selectedIndex];
    	var select_course2 = document.info.cnames2.options[document.info.cnames2.selectedIndex];
    	var select_course3 = document.info.cnames3.options[document.info.cnames3.selectedIndex];
    	var select_course4 = document.info.cnames4.options[document.info.cnames4.selectedIndex];
    		
    	var session1_1 = document.info.choosesession1[0].checked;
    	var session1_2 = document.info.choosesession1[1].checked;
    	var session2_1 = document.info.choosesession2[0].checked;
    	var session2_2 = document.info.choosesession2[1].checked;
    	var session3_1 = document.info.choosesession3[0].checked;
    	var session3_2 = document.info.choosesession3[1].checked;
    	var session4_1 = document.info.choosesession4[0].checked;
    	var session4_2 = document.info.choosesession4[1].checked;
    		
    	
    	for( intCoursesSelected = 0;  intCoursesSelected < 4; intCoursesSelected++) {
    		
    		if (select_course1.value == '' && session1_2 == false && session1_2 == false)
    		{
    			document.getElementById("form-wrong-done").style.color = "#CC0000";
    			document.getElementById("form-wrong-radioone").style.color = "#CC0000";
    			passval = false;
    		}
    		else intCoursesSelected++;
    		
    		
    		if (select_course1.value != '' && select_course2.value == '' && session2_1 == false && session2_2 == false && intCoursesSelected == 0)
    		{
    			document.getElementById("form-wrong-dtwo").style.color = "#CC0000";
    			document.getElementById("form-wrong-radiotwo").style.color = "#CC0000";
    			passval = false;
    		}
    		else intCoursesSelected++;
    		
    		if (select_course1.value != '' && select_course2.value != '' && select_course3.value == '' && session3_1 == false && session3_2 == false && intCoursesSelected == 0)
    		{
    			document.getElementById("form-wrong-dthree").style.color = "#CC0000";
    			document.getElementById("form-wrong-radiothree").style.color = "#CC0000";
    			passval = false;
    		}
    		else intCoursesSelected++;
    		
    		
    		if (select_course1.value != '' && select_course2.value != '' && select_course3.value != '' && select_course4.value == '' && session4_1 == false && session4_2 == false && intCoursesSelected == 0)
    		{
    			document.getElementById("form-wrong-dfour").style.color = "#CC0000";
    			document.getElementById("form-wrong-radiofour").style.color = "#CC0000";
    			passval = false;
    		}
    		else intCoursesSelected++;
    	}	
    	
    	
    	if (passval == false)
    	{
    		
    		return false;
    	}
    	
    	else
    	{
    		document.getElementById("invalid-form").style.visibility = "hidden";
    		return true;
    	}
    	
    }

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay well this is for sure a start. The issue though, is when I just select a course from the drop down with out selecting the radio button. It still passed validation for the first part. Why is that?

    Also when I pass the validation to the first one and I just fill in the drop down and click submit it doesn't validate the second part.

  8. #8
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a simplified version of the script, that I tested and seems to work the way you are wanting it to work.

    Code:
    function validateAll() {
    
    	var passval = true;
    	var intCoursesSelected = 0;
    
    	for (x = 1; x < 5; x++) {
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x]
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") {
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) {
    				//the user selected a course, but not a session
    				passval = false;
    				}
    			else intCoursesSelected++;
    			}
    		else {
    			//it doesn't matter here, because the user did not select a course
    			}
    		}
    	
    	if (intCoursesSelected == 0) {
    		passval = false;
    		document.getElementById("form-wrong-done").style.color = "#CC0000";
    		document.getElementById("form-wrong-radioone").style.color = "#CC0000";
    		}
    	
    	return passval;
    	}

  9. #9
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First part was answered. Thank you very much. But the second part is not and that is becasue of this section of the code. The elementbyid they are not all the same, I named it dtwo, radiotwo, dthree, radiothree, dfour, radiofour. Is there a way to able to add those in there?

    Code:
    document.getElementById("form-wrong-done").style.color = "#CC0000";
    		document.getElementById("form-wrong-radioone").style.color = "#CC0000";
    		}

  10. #10
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I would recommend renaming the ids of those elements so you are not limited in future... but to deal with it as is, below I created two arrays, one to hold the indexes of the sections that did not pass validation and another static array to hold the spelled out versions of the numbers.

    Give this a shot.

    Code:
    function validateAll() {
    
    	var passval = true;
    	var intCoursesSelected = 0;
    	var arrBad = new Array();
    	var arrTextNum = new Array("one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten")
    
    	for (x = 1; x < 5; x++) {
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x]
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") {
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) {
    				//the user selected a course, but not a session
    				passval = false;
    				arrBad[x] = true;
    				}
    			else {
    				intCoursesSelected++;
    				arrBad[x] = false;
    				}
    			}
    		else {
    			//it doesn't matter here, because the user did not select a course
    			arrBad[x] = false;
    			}
    		}
    	
    	if (intCoursesSelected == 0) {
    		passval = false;
    		for (b in arrBad) {
    			if (arrBad[b] == true) {
    				document.getElementById("form-wrong-d" + arrTextNum[b]).style.color = "#CC0000";
    				document.getElementById("form-wrong-radio" + arrTextNum[b]).style.color = "#CC0000";
    				}
    			}
    		}
    	
    	return passval;
    	}

  11. #11
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did the previous one first and I did the renaming of the id so that all of them had form-wrong-radio and form-wrong-d. That still didn't work. It wouldn't validate the other ones.

    Then I did the second one your did as an array and that still didn't work either. I checked the error console on firefox and there was no error.

    The main issue is that it's not validating the rest of the drop down and radio button after the first part if one of the field is not filled in correctly.

  12. #12
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Renaming the divs was a great choice. I just used this javascript below and it worked Beautifully.

    Code:
    function validateAll() {
    
    	var passval = true;
    	var intCoursesSelected = 0;
    	var arrBad = new Array();
    
    	for (x = 1; x < 5; x++) {
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x]
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") {
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) {
    				//the user selected a course, but not a session
    				passval = false;
    				document.getElementById("form-wrong-d" + x).style.color = "#CC0000";
    				document.getElementById("form-wrong-radio" + x).style.color = "#CC0000";
    				}
    			else {
    				intCoursesSelected++;
    				arrBad[x] = false;
    				}
    			}
    		else {
    			//it doesn't matter here, because the user did not select a course
    			arrBad[x] = false;
    			}
    		}
    	
    	if (passval == false) {
    		alert("You must select a session for each course you select");
    		return false;
    		}
    	else if (intCoursesSelected == 0) {
    		alert("You must select at least one course.");
    		return false;
    		}
    	else return true;
    	}

  13. #13
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For some reason the code that you gave me is alerting every time to make sure that all four options and radio get selected. Just want to make the first choice mandatory but if they chose the other three then those have to be filled out correctly. You know what I mean?

  14. #14
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I understand completely, but it is not doing that to me. On my localhost I setup a page to test this and I am able to select a course in the first drop down box and a session to go with it and nothing else and it passes validation just fine. Below is the complete page that I put up on my localhost - there must be something different about your version.

    Code:
    <html> 
     
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
    <title>1</title> 
    <script type="text/javascript"> 
    function validateAll() {
     
    	var passval = true;
    	var intCoursesSelected = 0;
    	var arrBad = new Array();
     
    	for (x = 1; x < 5; x++) {
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x]
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") {
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) {
    				//the user selected a course, but not a session
    				passval = false;
    				//the two lines below are commented out since those elements do not exist in the html, to avoid the error, but it does not change the logic flow of the script.
    				//document.getElementById("form-wrong-d" + x).style.color = "#CC0000";
    				//document.getElementById("form-wrong-radio" + x).style.color = "#CC0000";
    				}
    			else {
    				intCoursesSelected++;
    				arrBad[x] = false;
    				}
    			}
    		else {
    			//it doesn't matter here, because the user did not select a course
    			arrBad[x] = false;
    			}
    		}
    	
    	if (passval == false) {
    		alert("You must select a session for each course you select");
    		return false;
    		}
    	else if (intCoursesSelected == 0) {
    		alert("You must select at least one course.");
    		return false;
    		}
    	else return true;
    	}
    </script> 
    </head> 
     
    <body> 
    <form name="info"> 
    1) Please select your online course:
    	
    	<select name="cnames1" class="clearance-select">									
    		<option value="">Choose Below</option> 
    		<option value="1">1</option>		
    		<option value="2">2</option> 
    		<option value="3">3</option>		
    		<option value="4">4</option> 
    	</select> 
     
    	<p> 
    		<span class="bold">Choose a session:</span> 
    		<input type="radio" name="choosesession1" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession1" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>							
     
    	2) Please select your online course:
    	
    	<select name="cnames2" class="clearance-select">									
    		<option value="">Choose Below</option> 
    		<option value="1">1</option>		
    		<option value="2">2</option> 
    		<option value="3">3</option>		
    		<option value="4">4</option> 
    	</select> 
     
    	<p> 
    		<span class="bold">Choose a session:</span> 
    		<input type="radio" name="choosesession2" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession2" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>	
    	
    	
    		3) Please select your online course:
    	
    	<select name="cnames3" class="clearance-select">									
    		<option value="">Choose Below</option> 
    		<option value="1">1</option>		
    		<option value="2">2</option> 
    		<option value="3">3</option>		
    		<option value="4">4</option> 
    	</select> 
     
    	<p> 
    		<span class="bold">Choose a session:</span> 
    		<input type="radio" name="choosesession3" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession3" class="radio-clearance" value="2nd Session" /> 2nd
    	</p>	
    	
    		4) Please select your online course:
    	
    	<select name="cnames4" class="clearance-select">									
    		<option value="">Choose Below</option> 
    		<option value="1">1</option>		
    		<option value="2">2</option> 
    		<option value="3">3</option>		
    		<option value="4">4</option> 
    	</select> 
     
    	<p> 
    		<span class="bold">Choose a session:</span> 
    		<input type="radio" name="choosesession4" class="radio-clearance" value="1st Session" /> 1st
    		<input type="radio" name="choosesession4" class="radio-clearance" value="2nd Session" /> 2nd
    	</p> 
    	
    	<input type="button" value="submit" onclick="validateAll()"> 
    </form> 
    </body> 
     
    </html>

  15. #15
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is something different just not sure how to fix it.

    here is my javascript full page;

    Code:
    //make sure that in the form tag it says: onsubmit="return validateAll();"
    //and right before the </form> tag it should say <input type="submit" name = "submit" value = "Submit Query" />
    
    
    
    //this is is the function that holds all the validations
    function validateAll()
    {
    
    	var passval = true;
    	var intCoursesSelected = 0;
    	var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    	
    	// This resets the div carrying the error messages
    	document.getElementById("invalid-form").style.visibility = "visible";
    	
    	document.getElementById("form-wrong-first").style.color = "#555555";
    	document.getElementById("form-wrong-first").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-last").style.color = "#555555";
    	document.getElementById("form-wrong-last").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-studid").style.color = "#555555";
    	document.getElementById("form-wrong-studid").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-phone").style.color = "#555555";
    	document.getElementById("form-wrong-phone").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-email").style.color = "#555555";
    	document.getElementById("form-wrong-email").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-one").style.color = "#555555";
    	document.getElementById("form-wrong-one").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-two").style.color = "#555555";
    	document.getElementById("form-wrong-two").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-three").style.color = "#555555";
    	document.getElementById("form-wrong-three").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-four").style.color = "#555555";
    	document.getElementById("form-wrong-four").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-five").style.color = "#555555";
    	document.getElementById("form-wrong-five").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-six").style.color = "#555555";
    	document.getElementById("form-wrong-six").style.fontWeight = 'normal';		
    	
    	document.getElementById("form-wrong-seven").style.color = "#555555";
    	document.getElementById("form-wrong-seven").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-eight").style.color = "#555555";
    	document.getElementById("form-wrong-eight").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-nine").style.color = "#555555";
    	document.getElementById("form-wrong-nine").style.fontWeight = 'normal';	
    	
    	document.getElementById("form-wrong-ten").style.color = "#555555";
    	document.getElementById("form-wrong-ten").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-eleven").style.color = "#555555";
    	document.getElementById("form-wrong-eleven").style.fontWeight = 'normal';	
    	
    	document.getElementById("form-wrong-sig").style.color = "#555555";
    	document.getElementById("form-wrong-sig").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-enroll").style.color = "#555555";
    	
    	document.getElementById("form-wrong-status").style.color = "#555555";
    	
    	document.getElementById("form-wrong-graduate").style.color = "#555555";
    	
    	document.getElementById("form-wrong-probation").style.color = "#555555";
    	
    	document.getElementById("form-wrong-d1").style.color = "#555555";
    	document.getElementById("form-wrong-radio1").style.color = "#555555";
    	
    	document.getElementById("form-wrong-d2").style.color = "#555555";
    	document.getElementById("form-wrong-radio2").style.color = "#555555";
    
    	document.getElementById("form-wrong-d3").style.color = "#555555";
    	document.getElementById("form-wrong-radio3").style.color = "#555555";
    
    	document.getElementById("form-wrong-d4").style.color = "#555555";
    	document.getElementById("form-wrong-radio4").style.color = "#555555";
    	
    	
    	if (document.getElementById('fname').value == '')
    	{
    		document.getElementById("form-wrong-first").style.color = "#CC0000";
    		document.getElementById("form-wrong-first").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.getElementById('lname').value == '')
    	{
    		document.getElementById("form-wrong-last").style.color = "#CC0000";
    		document.getElementById("form-wrong-last").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.getElementById('studentid').value == '')
    	{
    		document.getElementById("form-wrong-studid").style.color = "#CC0000";
    		document.getElementById("form-wrong-studid").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.getElementById('phone').value == '')
    	{
    		document.getElementById("form-wrong-phone").style.color = "#CC0000";
    		document.getElementById("form-wrong-phone").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	if (!filter.test(document.getElementById('email').value)) 
    	{
    		document.getElementById("form-wrong-email").style.color = "#CC0000";
    		document.getElementById("form-wrong-email").style.fontWeight = 'bold';	
    		passval = false;
    	}
    	
    	if (document.info.initial01.value == '')
    	{
    		document.getElementById("form-wrong-one").style.color = "#CC0000";
    		document.getElementById("form-wrong-one").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial02.value == '')
    	{
    		document.getElementById("form-wrong-two").style.color = "#CC0000";
    		document.getElementById("form-wrong-two").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial03.value == '')
    	{
    		document.getElementById("form-wrong-three").style.color = "#CC0000";
    		document.getElementById("form-wrong-three").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial04.value == '')
    	{
    		document.getElementById("form-wrong-four").style.color = "#CC0000";
    		document.getElementById("form-wrong-four").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial05.value == '')
    	{
    		document.getElementById("form-wrong-five").style.color = "#CC0000";
    		document.getElementById("form-wrong-five").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial06.value == '')
    	{
    		document.getElementById("form-wrong-six").style.color = "#CC0000";
    		document.getElementById("form-wrong-six").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial07.value == '')
    	{
    		document.getElementById("form-wrong-seven").style.color = "#CC0000";
    		document.getElementById("form-wrong-seven").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial08.value == '')
    	{
    		document.getElementById("form-wrong-eight").style.color = "#CC0000";
    		document.getElementById("form-wrong-eight").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial09.value == '')
    	{
    		document.getElementById("form-wrong-nine").style.color = "#CC0000";
    		document.getElementById("form-wrong-nine").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	if (document.info.initial10.value == '')
    	{
    		document.getElementById("form-wrong-ten").style.color = "#CC0000";
    		document.getElementById("form-wrong-ten").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	if (document.info.initial11.value == '')
    	{
    		document.getElementById("form-wrong-eleven").style.color = "#CC0000";
    		document.getElementById("form-wrong-eleven").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	var online = document.info.onlineground[0].checked;
    	var ground = document.info.onlineground[1].checked;
    	var new_re = document.info.status[0].checked;
    	var continuing = document.info.status[1].checked;
    	var grad_yes = document.info.graduating[0].checked;
    	var grad_no = document.info.graduating[1].checked;
    	var prob_yes = document.info.probation[0].checked;
    	var prob_no = document.info.probation[1].checked;
    	
    	if (online == false && ground == false)
    	{
    		document.getElementById("form-wrong-enroll").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	if (new_re == false && continuing == false)
    	{
    		document.getElementById("form-wrong-status").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	if (grad_yes == false && grad_no == false)
    	{
    		document.getElementById("form-wrong-graduate").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	if (prob_yes == false && prob_no == false)
    	{
    		document.getElementById("form-wrong-probation").style.color = "#CC0000";
    		passval = false;
    	}
    
    
    	var arrBad = new Array();
     
    	for (x = 1; x < 5; x++) {
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x]
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") {
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) {
    				//the user selected a course, but not a session
    				passval = false;
    				//the two lines below are commented out since those elements do not exist in the html, to avoid the error, but it does not change the logic flow of the script.
    				document.getElementById("form-wrong-d" + x).style.color = "#CC0000";
    				document.getElementById("form-wrong-radio" + x).style.color = "#CC0000";
    				}
    			else {
    				intCoursesSelected++;
    				arrBad[x] = false;
    				}
    			}
    		else {
    			//it doesn't matter here, because the user did not select a course
    			arrBad[x] = false;
    			}
    			
    		}
    		
    	if (document.info.signature.value== '')
    	{
    		document.getElementById("form-wrong-sig").style.color = "#CC0000";
    		document.getElementById("form-wrong-sig").style.fontWeight = 'bold';	
    		passval = false;
    	}
    	
    	if (passval == false)
    	{
    		return false;
    	}
    	
    	else
    	{
    		document.getElementById("invalid-form").style.visibility = "hidden";
    		return true;
    	}
    	
    }
    My php page

    Code:
    <?php
    	
    	ob_start();
    	$title = 'Registration Clearance Form';
    	include('includes/header.php');
    
    ?>
    
    
    <!-- Main Wrapper -->
    <div id="main-wrapper">
    
    	<!-- Main Content -->     
        <div id="main-content">      
        
        
    	    <h3>Registration Clearance Form</h3>
    
    		<form method="post" action="clearance-form-submit.php" onsubmit="return validateAll();" name="info">
    		
    			<div id="invalid-form">	    
    				Please fix the areas highlighted in red before it can be sent via email.	    	
    			</div>	  
    		
    	        <table width="900" border="0" cellspacing="0" cellpadding="5">
    	          
    	          <tr valign="top">
    	            <td><label><span id="form-wrong-first">First Name</span> </label></td>
    	            <td><input type="text" id="fname" name="fname" size="20" value="" /></td>
    	          </tr>
    	          
    	          <tr valign="top">
    	            <td width="100" ><label><span id="form-wrong-last">Last Name</span> </label></td>
    	            <td ><input type="text" id="lname" name="lname" size="20" value="" /></td>
    	          </tr>
    	            
    	          <tr valign="top">
    	            <td ><label><span id="form-wrong-studid">Student ID:</span></label></td>
    	            <td ><input type="text" id="studentid" name="studentid" size="20" value="" /></td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td ><label><span id="form-wrong-phone">Phone #:</span></label></td>
    	            <td ><input type="text" id="phone" name="phone" size="20" value="" /></td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td ><label><span id="form-wrong-email">Email:</span></label></td>
    	            <td ><input type="text" id="email" name="email" size="20" value="" /></td>
    	          </tr>
    	        </table>
    	        <br/>
    	              <h4>Please read and initial each statement below:</h4>
    	              
    	        <table width="900" border="0" cellspacing="10"  cellpadding="0">
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-one">1)</span></label></td>
    	            <td  align="center"><input name="initial01" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left"> I understand that online courses adhere to the same add/drop schedule as on-ground courses. If I wish to drop a course after the normal add/drop period, I will be responsible for 100% of the course tuition.</td>
    	        </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-two">2)</span></label></td>
    	            <td  align="center"><input name="initial02" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that if I am taking more/less credits than I am planned for, it is my responsibility to have my credit load cleared with Student Financial Services to ensure it meets the requirements of my financial plan.</b></td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-three">3)</span></label></td>
    	            <td  align="center"><input name="initial03" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that there is a $100 lab fee per online class.</td>
    	          </tr>
    	         
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-four">4)</span></label></td>
    	            <td  align="center"><input name="initial04" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that the online classes are 5 1/2 weeks and therefore will move at a more accelerated pace than a traditional 11 week class. If needed, I am prepared to assign 12-15 hours of work per week for each of the online classes in which I'm enrolled.</td>
    	          </tr>
    	          
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-five">5)</span></label></td>
    	            <td  align="center"><input name="initial05" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that I must log into my online class 4 days a week and also contribute a post to the class discussion at least 4 out of 7 days each week. The quality of those postings will be the main determinant in receiving full participation points.</td>
    	          </tr>	          
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-six">6)</span></label></td>
    	            <td  align="center"><input name="initial06" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that participation in the discussion area must be completed before 5:00 a.m. Eastern Standard Time (a one-day period is defined as that period of 24 hours from 5:01 a.m. EST to 5:00 a.m. EST the following day.) For participation to count for grades or assignments, they must be within this time period. If a student participates on Tuesday at 4:58 am, it counts as participation on Monday. If the same student participates on Tuesday at 5:05 a.m. it counts as participation on Tuesday.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-seven">7)</span></label></td>
    	            <td  align="center"><input name="initial07" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that I cannot purchase my textbooks through the Art Institute of California - San Diego bookstore. Books for online courses must be ordered online thru AIO's online bookstore or through any other off campus source. Similarly, I understand that there may be additional software and technology requirements associated with online classes.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-eight">8)</span></label></td>
    	            <td  align="center"><input name="initial08" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that course equivalencies have been set by our campus for the courses offered on the online campus. Therefore, course names, course codes, and sometimes actual course content used on our campus courses may be different when taken on the online campus. For example, our MS334 Environmental Science equivalent to the online campus's BIO1010 Biology Online. It is my responsibility to review the online course descriptions to ensure the online class fits my needs.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-nine">9)</span></label></td>
    	            <td  align="center"><input name="initial09" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that I must review my degree audit with an Academic Advisor or Academic Director to ensure that I have chosen the appropriate online courses needed to complete my field of study.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-ten">10)</span></label></td>
    	            <td  align="center"><input name="initial10" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that before I am allowed to begin my online class, I must complete the Online Orientation through the eCollege site. I understand that inability to complete Orientation by the deadline will result in my online class being dropped or withdrawn.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-eleven">11)</span></label></td>
    	            <td  align="center"><input name="initial11" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that all communication (even time sensitive information) regarding my online class will be sent to me via email. Therefore I understand that I am responsible for checking my email daily.</td>
    	          </tr>
    	                
    	        </table>
    	        
    			<table width="900" cellpadding="0" cellspacing="10">
    
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-enroll">I am enrolling in: </span>
    						<input type="radio" name="onlineground" class="radio-clearance" value="Only Online Classes" /> ONLY ONLINE CLASSES
    					  	<input type="radio" name="onlineground" class="radio-clearance" value="Both Campus and Online Classes" /> BOTH ON CAMPUS &amp; ONLINE CLASSES
    					</td>
    				</tr>	
    				
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-status">My status is as follows: </span>
    						<input type="radio" name="status" class="radio-clearance" value="New To Online" /> New to Online at the AI-San Diego
    						<input type="radio" name="status" class="radio-clearance" value="already Taken Online" /> Already taken Online Classes at Ai-San Diego 
    					</td>
    				</tr>
    						
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-graduate">I am graduating this upcoming quarter: </span>
    						<input type="radio" name="graduating" class="radio-clearance" value="yes" /> Yes
    						<input type="radio" name="graduating" class="radio-clearance" value="no" /> No
    					</td>
    				</tr>
    				
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-probation">I am on Academic Probation: </span>
    						<input type="radio" name="probation" class="radio-clearance" value="Yes" /> Yes
    						<input type="radio" name="probation" class="radio-clearance" value="No" /> No
    					</td>
    				</tr>				
    
    			
    				<tr valign="top">			
    					<td>
    						<span class="bold" id="form-wrong-d1">1) Please select your online course:</span>
    						<select name="cnames1" class="clearance-select">									
    							<option value="">Choose Below</option>
    									
    							<?php
    											
    								$majorsql1 = mysql_query("select coursename from classes");							
    								while ($majorrow1 = mysql_fetch_array($majorsql1))
    								{
    									$courses1 = $majorrow1['coursename']; 	
    									
    														
    									echo "<option value = \"$courses1\" >$courses1</option>";	
    								}
    							
    							?>
    						
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio1">Choose a session:</span>
    							<input type="radio" name="choosesession1" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession1" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>							
    					</td>
    
    					<td>
    						<span class="bold" id="form-wrong-d2">2) Please select your online course:</span>
    						<select name="cnames2" class="clearance-select">
    										
    							<option value="">Choose Below</option>
    							
    							<?php
    			
    								$majorsql2 = mysql_query("select coursename from classes");							
    								while ($majorrow2 = mysql_fetch_array($majorsql2))
    								{
    									$courses2 = $majorrow2['coursename']; 	
    									
    														
    									echo "<option value = \"$courses2\" >$courses2</option>";	
    								}
    							
    							?>
    										
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio2">Choose a Session:</span>
    							<input type="radio" name="choosesession2" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession2" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>
    					</td>
    				</tr>
    			
    				<tr valign="top">
    					<td>
    						<span class="bold" id="form-wrong-d3">3) Please select your online course:</span>
    						<select name="cnames3" class="clearance-select">			
    						
    							<option value="">Choose Below</option>
    							
    							<?php
    			
    								$majorsql3 = mysql_query("select coursename from classes");																
    								while ($majorrow3 = mysql_fetch_array($majorsql3))
    								{
    									$courses3 = $majorrow3['coursename']; 	
    									
    														
    									echo "<option value = \"$courses3\" >$courses3</option>";	
    								}
    							
    							?>
    										
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio3">Choose a Session:</span>
    							<input type="radio" name="choosesession3" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession3" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>
    					</td>
    
    					<td>
    						<span class="bold" id="form-wrong-d4">4) Please select your online course:</span>
    						<select name="cnames4" class="clearance-select">			
    						
    							<option value="">Choose Below</option>
    							
    							<?php
    			
    								$majorsql4 = mysql_query("select coursename from classes");			
    								while ($majorrow4 = mysql_fetch_array($majorsql4))
    								{
    									$courses4 = $majorrow4['coursename']; 	
    									
    														
    									echo "<option value = \"$courses4\" >$courses4</option>";	
    								}
    							
    							?>
    										
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio4">Choose a Session:</span>		
    							<input type="radio" name="choosesession4" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession4" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>
    					</td>
    				</tr>		
    
    
    				<tr valign="top">
    					<td colspan="2">				
    						<p>Please email the <a href="contact">Online Advocate</a>, if you want to include alternate course selections.</p>		
    						<p>Note: If you are enrolling in only one session of online courses, you need to also enroll in at least one on-ground class to be considered CONTINUOUSLY ENROLLED.</p>
    					</td>
    				</tr>
    					
    				<tr valign="top">
    				
    					<td colspan="2">
    						<p><span id="form-wrong-sig">Please enter student name for electronic signature:</span> <input type="text" name="signature" size="40" value="" /></p>
    					</td>
    				
    				</tr>	
    				
    				<tr valign="top">	
    					<td>
    						<input type="submit" name = "submit" value = "Submit" class="submit" onclick="validateAll()" />
    					</td>
    					
    				</tr>
    
    			</table>	
    
    		</form>
    			
    
        </div>
        <!-- End Main Content -->
    
    </div>
    <!-- End Main Wrapper -->
    
    
    <?php
    
    	include('includes/footer.php');
    
    ?>

  16. #16
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the html after php has created it. It is a client side issue and since I do not have access to your data source, it would be more helpful to see the HTML as the client (browser) has it.

    Rick

  17. #17
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the html

    Code:
    	
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    	
    	<head>
        
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>Registration Clearance Form</title>
    		
            <link rel="stylesheet" type="text/css" media="screen"  href="css/style.css" />
      		<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
    		<link rel="stylesheet" type="text/css" media="screen" href="css/iehover.css" />
    
    		<!--[if lte IE 7]>
        		<link rel="stylesheet" type="text/css" media="screen" href="css/ie.css" />
    		<![endif]-->
            
            <!--[if lt IE 7]>
            	<script type="text/javascript" src="js/unitpngfix.js"></script>
    		<![endif]--> 
            
            <script type="text/javascript" src="js/mootools/mootools.js"></script>
    		<script type="text/javascript" src="js/mootools/accordion.js"></script>
            <script type="text/javascript" src="js/form_validator.js"></script>
            <script type="text/javascript" src="js/form_clearance.js"></script>
    
    		
    	</head>
    
    	<body>
    
    <!-- Header -->	
    		<div id="header">
    			
    			<div id="nav-container">		
    				
                    <ul id="navlist">
                    	<li><a href="index" >Home</a></li>
                       	<li><a href="courses" >Courses</a></li>
                    	<li><a href="registrations" >Registrations</a></li>
                    	<li><a href="textbooks" >Textbooks</a></li>
                    	<li><a href="faq" >FAQ</a></li>
                    	<li><a href="contact" >Contact</a></li>
                    </ul>
                
    			</div>
    		
    			<div id="logo">
    					
    				<a href="index"><span class="hide">Home</span></a>
    			
    			</div>
    		
    		</div>
    <!-- End Header -->
    
    <!-- Main Wrapper -->
    <div id="main-wrapper">
    
    	<!-- Main Content -->     
        <div id="main-content">      
        
        
    	    <h3>Registration Clearance Form</h3>
    
    		<form method="post" action="clearance-form-submit.php" onsubmit="return validateAll();" name="info">
    		
    			<div id="invalid-form">	    
    				Please fix the areas highlighted in red before it can be sent via email.	    	
    			</div>	  
    		
    	        <table width="900" border="0" cellspacing="0" cellpadding="5">
    	          
    	          <tr valign="top">
    	            <td><label><span id="form-wrong-first">First Name</span> </label></td>
    	            <td><input type="text" id="fname" name="fname" size="20" value="" /></td>
    	          </tr>
    	          
    	          <tr valign="top">
    	            <td width="100" ><label><span id="form-wrong-last">Last Name</span> </label></td>
    	            <td ><input type="text" id="lname" name="lname" size="20" value="" /></td>
    	          </tr>
    	            
    	          <tr valign="top">
    	            <td ><label><span id="form-wrong-studid">Student ID:</span></label></td>
    	            <td ><input type="text" id="studentid" name="studentid" size="20" value="" /></td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td ><label><span id="form-wrong-phone">Phone #:</span></label></td>
    	            <td ><input type="text" id="phone" name="phone" size="20" value="" /></td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td ><label><span id="form-wrong-email">Email:</span></label></td>
    	            <td ><input type="text" id="email" name="email" size="20" value="" /></td>
    	          </tr>
    	        </table>
    	        <br/>
    	              <h4>Please read and initial each statement below:</h4>
    	              
    	        <table width="900" border="0" cellspacing="10"  cellpadding="0">
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-one">1)</span></label></td>
    	            <td  align="center"><input name="initial01" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left"> I understand that online courses adhere to the same add/drop schedule as on-ground courses. If I wish to drop a course after the normal add/drop period, I will be responsible for 100% of the course tuition.</td>
    	        </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-two">2)</span></label></td>
    	            <td  align="center"><input name="initial02" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that if I am taking more/less credits than I am planned for, it is my responsibility to have my credit load cleared with Student Financial Services to ensure it meets the requirements of my financial plan.</b></td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-three">3)</span></label></td>
    	            <td  align="center"><input name="initial03" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that there is a $100 lab fee per online class.</td>
    	          </tr>
    	         
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-four">4)</span></label></td>
    	            <td  align="center"><input name="initial04" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that the online classes are 5 1/2 weeks and therefore will move at a more accelerated pace than a traditional 11 week class. If needed, I am prepared to assign 12-15 hours of work per week for each of the online classes in which I'm enrolled.</td>
    	          </tr>
    	          
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-five">5)</span></label></td>
    	            <td  align="center"><input name="initial05" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that I must log into my online class 4 days a week and also contribute a post to the class discussion at least 4 out of 7 days each week. The quality of those postings will be the main determinant in receiving full participation points.</td>
    	          </tr>	          
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-six">6)</span></label></td>
    	            <td  align="center"><input name="initial06" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that participation in the discussion area must be completed before 5:00 a.m. Eastern Standard Time (a one-day period is defined as that period of 24 hours from 5:01 a.m. EST to 5:00 a.m. EST the following day.) For participation to count for grades or assignments, they must be within this time period. If a student participates on Tuesday at 4:58 am, it counts as participation on Monday. If the same student participates on Tuesday at 5:05 a.m. it counts as participation on Tuesday.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-seven">7)</span></label></td>
    	            <td  align="center"><input name="initial07" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that I cannot purchase my textbooks through the Art Institute of California - San Diego bookstore. Books for online courses must be ordered online thru AIO's online bookstore or through any other off campus source. Similarly, I understand that there may be additional software and technology requirements associated with online classes.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-eight">8)</span></label></td>
    	            <td  align="center"><input name="initial08" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that course equivalencies have been set by our campus for the courses offered on the online campus. Therefore, course names, course codes, and sometimes actual course content used on our campus courses may be different when taken on the online campus. For example, our MS334 Environmental Science equivalent to the online campus's BIO1010 Biology Online. It is my responsibility to review the online course descriptions to ensure the online class fits my needs.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-nine">9)</span></label></td>
    	            <td  align="center"><input name="initial09" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that I must review my degree audit with an Academic Advisor or Academic Director to ensure that I have chosen the appropriate online courses needed to complete my field of study.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-ten">10)</span></label></td>
    	            <td  align="center"><input name="initial10" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that before I am allowed to begin my online class, I must complete the Online Orientation through the eCollege site. I understand that inability to complete Orientation by the deadline will result in my online class being dropped or withdrawn.</td>
    	          </tr>
    	        
    	          <tr valign="top">
    	            <td  align="right"><label><span id="form-wrong-eleven">11)</span></label></td>
    	            <td  align="center"><input name="initial11" type="text" size="5" value="" class="form-in" /></td>
    	          <td  align="left">I understand that all communication (even time sensitive information) regarding my online class will be sent to me via email. Therefore I understand that I am responsible for checking my email daily.</td>
    	          </tr>
    	                
    	        </table>
    	        
    			<table width="900" cellpadding="0" cellspacing="10">
    
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-enroll">I am enrolling in: </span>
    						<input type="radio" name="onlineground" class="radio-clearance" value="Only Online Classes" /> ONLY ONLINE CLASSES
    					  	<input type="radio" name="onlineground" class="radio-clearance" value="Both Campus and Online Classes" /> BOTH ON CAMPUS &amp; ONLINE CLASSES
    					</td>
    				</tr>	
    				
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-status">My status is as follows: </span>
    						<input type="radio" name="status" class="radio-clearance" value="New To Online" /> New to Online at the AI-San Diego
    						<input type="radio" name="status" class="radio-clearance" value="already Taken Online" /> Already taken Online Classes at Ai-San Diego 
    					</td>
    				</tr>
    						
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-graduate">I am graduating this upcoming quarter: </span>
    						<input type="radio" name="graduating" class="radio-clearance" value="yes" /> Yes
    						<input type="radio" name="graduating" class="radio-clearance" value="no" /> No
    					</td>
    				</tr>
    				
    				<tr valign="top">
    					<td colspan="2">
    						<span class="bold" id="form-wrong-probation">I am on Academic Probation: </span>
    						<input type="radio" name="probation" class="radio-clearance" value="Yes" /> Yes
    						<input type="radio" name="probation" class="radio-clearance" value="No" /> No
    					</td>
    				</tr>				
    
    			
    				<tr valign="top">			
    					<td>
    						<span class="bold" id="form-wrong-d1">1) Please select your online course:</span>
    						<select name="cnames1" class="clearance-select">									
    							<option value="">Choose Below</option>
    									
    							<option value = "MS135 / BIO2010 Nutrition Science" >MS135 / BIO2010 Nutrition Science</option><option value = "MS334 / BIO1010 Environmental Science" >MS334 / BIO1010 Environmental Science</option><option value = "AD1110 / FND155 Fundamentals of Advertising" >AD1110 / FND155 Fundamentals of Advertising</option><option value = "AD2220 / A221 Fundamentals of Marketing" >AD2220 / A221 Fundamentals of Marketing</option><option value = "CM3301 / FND154 Purchasing" >CM3301 / FND154 Purchasing</option><option value = "GA1121 / GAD101 Survey of the Game Industry" >GA1121 / GAD101 Survey of the Game Industry</option><option value = "GD2243 / G211 Typography II" >GD2243 / G211 Typography II</option><option value = "GD2242 / G410 Illustrative Concept Design" >GD2242 / G410 Illustrative Concept Design</option><option value = "ID1129 / ID221 Introduction to AutoCAD" >ID1129 / ID221 Introduction to AutoCAD</option><option value = "sadfsadf" >sadfsadf</option><option value = "fds" >fds</option><option value = "Design Layout" >Design Layout</option><option value = "CNN" >CNN</option><option value = "ESPN" >ESPN</option>						
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio1">Choose a session:</span>
    							<input type="radio" name="choosesession1" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession1" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>							
    					</td>
    
    					<td>
    						<span class="bold" id="form-wrong-d2">2) Please select your online course:</span>
    						<select name="cnames2" class="clearance-select">
    										
    							<option value="">Choose Below</option>
    							
    							<option value = "MS135 / BIO2010 Nutrition Science" >MS135 / BIO2010 Nutrition Science</option><option value = "MS334 / BIO1010 Environmental Science" >MS334 / BIO1010 Environmental Science</option><option value = "AD1110 / FND155 Fundamentals of Advertising" >AD1110 / FND155 Fundamentals of Advertising</option><option value = "AD2220 / A221 Fundamentals of Marketing" >AD2220 / A221 Fundamentals of Marketing</option><option value = "CM3301 / FND154 Purchasing" >CM3301 / FND154 Purchasing</option><option value = "GA1121 / GAD101 Survey of the Game Industry" >GA1121 / GAD101 Survey of the Game Industry</option><option value = "GD2243 / G211 Typography II" >GD2243 / G211 Typography II</option><option value = "GD2242 / G410 Illustrative Concept Design" >GD2242 / G410 Illustrative Concept Design</option><option value = "ID1129 / ID221 Introduction to AutoCAD" >ID1129 / ID221 Introduction to AutoCAD</option><option value = "sadfsadf" >sadfsadf</option><option value = "fds" >fds</option><option value = "Design Layout" >Design Layout</option><option value = "CNN" >CNN</option><option value = "ESPN" >ESPN</option>										
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio2">Choose a Session:</span>
    							<input type="radio" name="choosesession2" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession2" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>
    					</td>
    				</tr>
    			
    				<tr valign="top">
    					<td>
    						<span class="bold" id="form-wrong-d3">3) Please select your online course:</span>
    						<select name="cnames3" class="clearance-select">			
    						
    							<option value="">Choose Below</option>
    							
    							<option value = "MS135 / BIO2010 Nutrition Science" >MS135 / BIO2010 Nutrition Science</option><option value = "MS334 / BIO1010 Environmental Science" >MS334 / BIO1010 Environmental Science</option><option value = "AD1110 / FND155 Fundamentals of Advertising" >AD1110 / FND155 Fundamentals of Advertising</option><option value = "AD2220 / A221 Fundamentals of Marketing" >AD2220 / A221 Fundamentals of Marketing</option><option value = "CM3301 / FND154 Purchasing" >CM3301 / FND154 Purchasing</option><option value = "GA1121 / GAD101 Survey of the Game Industry" >GA1121 / GAD101 Survey of the Game Industry</option><option value = "GD2243 / G211 Typography II" >GD2243 / G211 Typography II</option><option value = "GD2242 / G410 Illustrative Concept Design" >GD2242 / G410 Illustrative Concept Design</option><option value = "ID1129 / ID221 Introduction to AutoCAD" >ID1129 / ID221 Introduction to AutoCAD</option><option value = "sadfsadf" >sadfsadf</option><option value = "fds" >fds</option><option value = "Design Layout" >Design Layout</option><option value = "CNN" >CNN</option><option value = "ESPN" >ESPN</option>										
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio3">Choose a Session:</span>
    							<input type="radio" name="choosesession3" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession3" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>
    					</td>
    
    					<td>
    						<span class="bold" id="form-wrong-d4">4) Please select your online course:</span>
    						<select name="cnames4" class="clearance-select">			
    						
    							<option value="">Choose Below</option>
    							
    							<option value = "MS135 / BIO2010 Nutrition Science" >MS135 / BIO2010 Nutrition Science</option><option value = "MS334 / BIO1010 Environmental Science" >MS334 / BIO1010 Environmental Science</option><option value = "AD1110 / FND155 Fundamentals of Advertising" >AD1110 / FND155 Fundamentals of Advertising</option><option value = "AD2220 / A221 Fundamentals of Marketing" >AD2220 / A221 Fundamentals of Marketing</option><option value = "CM3301 / FND154 Purchasing" >CM3301 / FND154 Purchasing</option><option value = "GA1121 / GAD101 Survey of the Game Industry" >GA1121 / GAD101 Survey of the Game Industry</option><option value = "GD2243 / G211 Typography II" >GD2243 / G211 Typography II</option><option value = "GD2242 / G410 Illustrative Concept Design" >GD2242 / G410 Illustrative Concept Design</option><option value = "ID1129 / ID221 Introduction to AutoCAD" >ID1129 / ID221 Introduction to AutoCAD</option><option value = "sadfsadf" >sadfsadf</option><option value = "fds" >fds</option><option value = "Design Layout" >Design Layout</option><option value = "CNN" >CNN</option><option value = "ESPN" >ESPN</option>										
    						</select>
    
    						<p>
    							<span class="bold" id="form-wrong-radio4">Choose a Session:</span>		
    							<input type="radio" name="choosesession4" class="radio-clearance" value="1st Session" /> 1st
    							<input type="radio" name="choosesession4" class="radio-clearance" value="2nd Session" /> 2nd
    						</p>
    					</td>
    				</tr>		
    
    
    				<tr valign="top">
    					<td colspan="2">				
    						<p>Please email the <a href="contact">Online Advocate</a>, if you want to include alternate course selections.</p>		
    						<p>Note: If you are enrolling in only one session of online courses, you need to also enroll in at least one on-ground class to be considered CONTINUOUSLY ENROLLED.</p>
    					</td>
    				</tr>
    					
    				<tr valign="top">
    				
    					<td colspan="2">
    						<p><span id="form-wrong-sig">Please enter student name for electronic signature:</span> <input type="text" name="signature" size="40" value="" /></p>
    					</td>
    				
    				</tr>	
    				
    				<tr valign="top">	
    					<td>
    						<input type="submit" name = "submit" value = "Submit" class="submit" onclick="validateAll()" />
    					</td>
    					
    				</tr>
    
    			</table>	
    
    		</form>
    			
    
        </div>
        <!-- End Main Content -->
    
    </div>
    <!-- End Main Wrapper -->
    
    
    <!-- Footer -->
    		<div id="footer-wrapper">
    
    			<div id="footer">
    			
    				<div class="col-two">
    					<h1>Contact Me</h1>
    		
    					<p><span class="bold">Jeremiah San Pedro</span> <br /> Tel: 1.858.598.1462 <br />Toll-Free Tel: 1.866.275.2422 Ext. 1462 <br />Fax: 1.858.598.1550 attn: Online Advocate <br />Email: <a href="contact">jsanpedro@aii.edu</a></p>
    				</div>
    				
    				<div class="col-one">	
    					
    					<div class="float-right">					
    						<blockquote>
    							<p>As your Online Advocate I am dedicated to making sure you get the most of your online learning experience.  If you have any questions regarding any part of online learning at the Art Institute, I would be more than happy to assist you.</p>
    						</blockquote>
    					</div>
    					
    					<img src="images/small.jpg" width="70" height="70" alt="Jeremiah San Pedro" />
    					
    				</div>
    			
    			</div>					
    		
    		</div>
    		
    		<div id="footer-nav">
    
    		    <ul id="footer-list">
    		    	<li><a href="/dev/">Home</a></li>
    		       	<li><a href="courses">Courses</a></li>
    		    	<li><a href="registrations">Registrations</a></li>
    		    	<li><a href="textbooks">Textbooks</a></li>
    		    	<li><a href="faq">FAQ</a></li>
    		    	<li><a href="contact">Contact</a></li>
    		    </ul>
    		    
    		    <p>&copy; 2008 The Art Institute Of California - San Diego :: Online Advocate</p>
    		    
    		    <p class="valid">
    		    	<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
      			</p>
         
    		
    		</div>
    <!-- End Footer -->
    		
    
    	</body>
    
    </html>

  18. #18
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    I did two things and it is working for me.

    1) I added this to the javascript after the end of the for loop
    Code:
    	if (intCoursesSelected == 0) {
    		document.getElementById("form-wrong-d1").style.color = "#CC0000";
    		}
    2) I changed the submit button to (you do not need the onclick event of the submit button since you have an onsubmit event for the form itself.
    Code:
    <input type="submit" name="submit" value="Submit" class="submit" />

  19. #19
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rick,

    I did the following you said. There is only one thing that is not working and that is when I only select the radio buttons instead of the drop down it does not validate like how it does with the drop down. For the submit I did a onclick in the input tag of submit.

    Code:
    	var arrBad = new Array();
     
    	for (x = 1; x < 5; x++) {
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x]
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") {
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) {
    				//the user selected a course, but not a session
    				passval = false;
    				//the two lines below are commented out since those elements do not exist in the html, to avoid the error, but it does not change the logic flow of the script.
    				document.getElementById("form-wrong-d" + x).style.color = "#CC0000";
    				document.getElementById("form-wrong-radio" + x).style.color = "#CC0000";
    				}
    			else {
    				intCoursesSelected++;
    				arrBad[x] = false;
    				}
    			}
    		else {
    			//it doesn't matter here, because the user did not select a course
    			arrBad[x] = false;
    			}
    			
    		}
    		
    		if (intCoursesSelected == 0) {
    			document.getElementById("form-wrong-d1").style.color = "#CC0000";
    			document.getElementById("form-wrong-radio1").style.color = "#CC0000";
    
    		}

  20. #20
    SitePoint Enthusiast ricktheartist's Avatar
    Join Date
    Mar 2008
    Location
    Virginia, USA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are absolutely right, I was under the impression that the radio buttons did not matter if they do not select a course (hence the comment in the code "//it doesn't matter here, because the user did not select a course"). If you want to check for the case where a radio button is checked but no course is selected, then put that code inside the else (where the comment mentioned above resides).

  21. #21
    SitePoint Zealot
    Join Date
    Sep 2004
    Location
    new york
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I took this a little bit deeper than I originally plan and I got the radio to be validated. Thanks by the way. I just want to thank you for all that you have helped me on so far.

    I am confuse on a couple of things and maybe you can help clarify for me.

    1) Lets say I did not go to number one section and went to number two section. I select just the radio button. I click submit and the number one section and number two section drop down are all highlighted. But then when I fill in number two section drop-down and nothing else. The entire highlights are gone. Why is that? (This is also vice-a-versa when I just click the drop-down instead of the radio button in the first step.)

    2) One last thing is when I click submit it highlights everything how it should. But then if I just select the radio button and click submit, the radio button text is still highlighted along with the drop down text. How can I fix that once it is selected but the drop-down is not then remove the highlight on the radio only?


    Code:
    function validateAll()
    {
    
    	var passval = true;
    	var intCoursesSelected = 0;
    	var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    	
    	// This resets the div carrying the error messages
    	document.getElementById("invalid-form").style.visibility = "visible";
    	
    	document.getElementById("form-wrong-first").style.color = "#555555";
    	document.getElementById("form-wrong-first").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-last").style.color = "#555555";
    	document.getElementById("form-wrong-last").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-studid").style.color = "#555555";
    	document.getElementById("form-wrong-studid").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-phone").style.color = "#555555";
    	document.getElementById("form-wrong-phone").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-email").style.color = "#555555";
    	document.getElementById("form-wrong-email").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-one").style.color = "#555555";
    	document.getElementById("form-wrong-one").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-two").style.color = "#555555";
    	document.getElementById("form-wrong-two").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-three").style.color = "#555555";
    	document.getElementById("form-wrong-three").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-four").style.color = "#555555";
    	document.getElementById("form-wrong-four").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-five").style.color = "#555555";
    	document.getElementById("form-wrong-five").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-six").style.color = "#555555";
    	document.getElementById("form-wrong-six").style.fontWeight = 'normal';		
    	
    	document.getElementById("form-wrong-seven").style.color = "#555555";
    	document.getElementById("form-wrong-seven").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-eight").style.color = "#555555";
    	document.getElementById("form-wrong-eight").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-nine").style.color = "#555555";
    	document.getElementById("form-wrong-nine").style.fontWeight = 'normal';	
    	
    	document.getElementById("form-wrong-ten").style.color = "#555555";
    	document.getElementById("form-wrong-ten").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-eleven").style.color = "#555555";
    	document.getElementById("form-wrong-eleven").style.fontWeight = 'normal';	
    	
    	document.getElementById("form-wrong-sig").style.color = "#555555";
    	document.getElementById("form-wrong-sig").style.fontWeight = 'normal';
    	
    	document.getElementById("form-wrong-enroll").style.color = "#555555";
    	
    	document.getElementById("form-wrong-status").style.color = "#555555";
    	
    	document.getElementById("form-wrong-graduate").style.color = "#555555";
    	
    	document.getElementById("form-wrong-probation").style.color = "#555555";
    	
    	document.getElementById("form-wrong-d1").style.color = "#555555";
    	document.getElementById("form-wrong-radio1").style.color = "#555555";
    	
    	document.getElementById("form-wrong-d2").style.color = "#555555";
    	document.getElementById("form-wrong-radio2").style.color = "#555555";
    
    	document.getElementById("form-wrong-d3").style.color = "#555555";
    	document.getElementById("form-wrong-radio3").style.color = "#555555";
    
    	document.getElementById("form-wrong-d4").style.color = "#555555";
    	document.getElementById("form-wrong-radio4").style.color = "#555555";
    	
    	
    	if (document.getElementById('fname').value == '')
    	{
    		document.getElementById("form-wrong-first").style.color = "#CC0000";
    		document.getElementById("form-wrong-first").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.getElementById('lname').value == '')
    	{
    		document.getElementById("form-wrong-last").style.color = "#CC0000";
    		document.getElementById("form-wrong-last").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.getElementById('studentid').value == '')
    	{
    		document.getElementById("form-wrong-studid").style.color = "#CC0000";
    		document.getElementById("form-wrong-studid").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.getElementById('phone').value == '')
    	{
    		document.getElementById("form-wrong-phone").style.color = "#CC0000";
    		document.getElementById("form-wrong-phone").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	if (!filter.test(document.getElementById('email').value)) 
    	{
    		document.getElementById("form-wrong-email").style.color = "#CC0000";
    		document.getElementById("form-wrong-email").style.fontWeight = 'bold';	
    		passval = false;
    	}
    	
    	if (document.info.initial01.value == '')
    	{
    		document.getElementById("form-wrong-one").style.color = "#CC0000";
    		document.getElementById("form-wrong-one").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial02.value == '')
    	{
    		document.getElementById("form-wrong-two").style.color = "#CC0000";
    		document.getElementById("form-wrong-two").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial03.value == '')
    	{
    		document.getElementById("form-wrong-three").style.color = "#CC0000";
    		document.getElementById("form-wrong-three").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial04.value == '')
    	{
    		document.getElementById("form-wrong-four").style.color = "#CC0000";
    		document.getElementById("form-wrong-four").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial05.value == '')
    	{
    		document.getElementById("form-wrong-five").style.color = "#CC0000";
    		document.getElementById("form-wrong-five").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial06.value == '')
    	{
    		document.getElementById("form-wrong-six").style.color = "#CC0000";
    		document.getElementById("form-wrong-six").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial07.value == '')
    	{
    		document.getElementById("form-wrong-seven").style.color = "#CC0000";
    		document.getElementById("form-wrong-seven").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial08.value == '')
    	{
    		document.getElementById("form-wrong-eight").style.color = "#CC0000";
    		document.getElementById("form-wrong-eight").style.fontWeight = 'bold';
    		passval = false;
    	} 
    	
    	if (document.info.initial09.value == '')
    	{
    		document.getElementById("form-wrong-nine").style.color = "#CC0000";
    		document.getElementById("form-wrong-nine").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	if (document.info.initial10.value == '')
    	{
    		document.getElementById("form-wrong-ten").style.color = "#CC0000";
    		document.getElementById("form-wrong-ten").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	if (document.info.initial11.value == '')
    	{
    		document.getElementById("form-wrong-eleven").style.color = "#CC0000";
    		document.getElementById("form-wrong-eleven").style.fontWeight = 'bold';	
    		passval = false;
    	} 
    	
    	var online = document.info.onlineground[0].checked;
    	var ground = document.info.onlineground[1].checked;
    	var new_re = document.info.status[0].checked;
    	var continuing = document.info.status[1].checked;
    	var grad_yes = document.info.graduating[0].checked;
    	var grad_no = document.info.graduating[1].checked;
    	var prob_yes = document.info.probation[0].checked;
    	var prob_no = document.info.probation[1].checked;
    	
    	if (online == false && ground == false)
    	{
    		document.getElementById("form-wrong-enroll").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	if (new_re == false && continuing == false)
    	{
    		document.getElementById("form-wrong-status").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	if (grad_yes == false && grad_no == false)
    	{
    		document.getElementById("form-wrong-graduate").style.color = "#CC0000";
    		passval = false;
    	}
    	
    	if (prob_yes == false && prob_no == false)
    	{
    		document.getElementById("form-wrong-probation").style.color = "#CC0000";
    		passval = false;
    	}
    
    
    	var arrBad = new Array();
     
    	for (x = 1; x < 5; x++) 
    	{
    		var thisSelectBox = document.forms["info"].elements["cnames" + x];
    		var thisRadioButton = document.forms["info"].elements["choosesession" + x];
    		
    		if (thisSelectBox.options[thisSelectBox.selectedIndex].value != "") 
    		{
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == false) 
    			{
    				passval = false;
    				document.getElementById("form-wrong-d" + x).style.color = "#555555";
    				document.getElementById("form-wrong-radio" + x).style.color = "#CC0000";
    			}
    			
    			else 
    			{
    				intCoursesSelected++;
    				arrBad[x] = false;
    			}
    		}
    	
    		else 
    		{
    
    			if (thisRadioButton[0].checked == true && thisRadioButton[1].checked == false && thisSelectBox.options[thisSelectBox.selectedIndex].value == "") 
    			{
    				passval = false;
    				document.getElementById("form-wrong-d" + x).style.color = "#CC0000";
    			}
    			
    			if (thisRadioButton[0].checked == false && thisRadioButton[1].checked == true && thisSelectBox.options[thisSelectBox.selectedIndex].value == "") 
    			{
    				passval = false;
    				document.getElementById("form-wrong-d" + x).style.color = "#CC0000";
    			}
    
    			//it doesn't matter here, because the user did not select a course
    			arrBad[x] = false;
    		}
    			
    	}
    		
    	if (intCoursesSelected == 0) 
    	{
    		document.getElementById("form-wrong-d1").style.color = "#CC0000";
    		document.getElementById("form-wrong-radio1").style.color = "#CC0000";
    	}
    		
    	if (document.info.signature.value== '')
    	{
    		document.getElementById("form-wrong-sig").style.color = "#CC0000";
    		document.getElementById("form-wrong-sig").style.fontWeight = 'bold';	
    		passval = false;
    	}
    	
    	if (passval == false)
    	{
    		return false;
    	}
    	
    	else
    	{
    		document.getElementById("invalid-form").style.visibility = "hidden";
    		return true;
    	}
    	
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •