PDA

View Full Version : Disable more than one checkboxes when a master check box is selected



gulluman
02-01-2006, 06:41 PM
Hello gurus,
i need some help please.

I have 7 checkboxes. i need to validate them. First condition: if the 7th checkbox is checked then other 6 will get unchecked automatically.

Second condition:
If the 7 th checkbox is selected then a TEXT box must be filled in and user will be notified with a message to do that.

i have been trying it myself but since i am a newbie i am stuck.

Please someone help

Thanks a lot

Here is the code for the checkboxes


<div><label for="chck1"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="1" id="chck1">Advanced Placement (AP)</label></div>

<div><label for="chck2"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="2" id="chck2">International Baccalaureate (IB) Diploma</label></div>

<div><label for="chck3"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="3" id="chck3">International Baccalaureate (IB) Certificate</label></div>

<div><label for="chck4"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="4" id="chck4">Advanced (A) - Levels</label></div>

<div><label for="chck5"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="5" id="chck5">Advanced Subsidiary (AS)-Levels</label></div>

<div><label for="chck6"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="6" id="chck6">
Courses completed at a college and/or another university</label></div>

<div><label for="chck7"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="7" id="chck7">
I have not written and will not be writing any of the exams listed above</label></div>


This text box must be filled in if the student chooses the 7th checkbox
<INPUT TYPE="text" NAME="1st_Course_Written" VALUE="" SIZE=50 >

Twey
02-01-2006, 07:53 PM
<input type="checkbox" name="Type_Of_Exam_Student_passed"
value="7" id="chck7" onclick="if(checked) {
var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();
}">

gulluman
02-03-2006, 04:42 PM
<input type="checkbox" name="Type_Of_Exam_Student_passed"
value="7" id="chck7" onclick="if(checked) {
var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();
}">

Thanks a lot, it worked but I need some more help with this. Sorry to bother you like this. I will really appreciate if someone could help.

Modified First Condition: Keeping the previous validation same now, if the 7th checkbox is checked and then student tries to check others, this will uncheck the 7th box.

Modified Second Condition: If the 7th Checkbox is checked the student MUST enter data into the textbox
'1st_Course_Written' otherwise he will not be allowed to submit the form, an html messeage will appear at the top in RED, -- But if the student DONOT check the 7th checkbox but checks others, he WILL BE ABLE to submit the form.

Thanks Gurus

Gulluman

Twey
02-03-2006, 05:17 PM
<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
form.elements[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.forms[0]);
</script>Put that before your </form> tag. You may need to edit the 0 in document.forms[0] if your page has more forms on it before this one.

gulluman
02-03-2006, 06:13 PM
<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
form.elements[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.forms[0]);
</script>Put that before your </form> tag. You may need to edit the 0 in document.forms[0] if your page has more forms on it before this one.

Thanks a lot Twey.

I tried as you mentioned but it seemed i am missing something. When I click the first few checkboxes It does not uncheck checkbox 7 which what i want. And it does not force me to write down in the textbox when i trie to submit.

Here is the whole html code. Please let me know what is wrong. Its killing me now. I am stuck for 2 days.


Thanks a lot.

Gulluman





<HTML>

<HEAD>

<TITLE>Test Form</TITLE>


<script language="JavaScript">

function noenter() {
return !(window.event && window.event.keyCode == 13); }

</script>



</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM name="course_approval_form" method="POST"

action="http://www.response-o-matic.com/cgi-bin/rom.pl" onsubmit="validate();">

<H1><CENTER>&nbsp;</CENTER></H1>

<H1><CENTER><FONT COLOR="#000000">B.Sc Course Approval Form</FONT>

</CENTER></H1>

<H3><CENTER>

<INPUT TYPE="hidden" NAME="your_email_address" VALUE="amiasof@30gigs.com">

<INPUT TYPE="hidden" NAME="your_name" VALUE="Webmaster">

<INPUT TYPE="hidden" NAME="email_subject_line" VALUE="B.Sc Course Approval">

<INPUT TYPE="hidden" NAME="required_fields" VALUE="your_email_address">

<INPUT TYPE="hidden" NAME="thank_you_title" VALUE="B.Sc">

<INPUT TYPE="hidden" NAME="return_link_url" VALUE="http://www.msn.com">

<INPUT TYPE="hidden" NAME="return_link_name" VALUE="Back To msn">

<INPUT TYPE="hidden" NAME="background_color" VALUE="#C0C0C0">

<INPUT TYPE="hidden" NAME="text_color" VALUE="#000000">

<INPUT TYPE="hidden" NAME="link_color" VALUE="#0000FF">

<INPUT TYPE="hidden" NAME="visited_link_color" VALUE="#8000FF">

<INPUT TYPE="hidden" NAME="active_link_color" VALUE="#0000FF">

</CENTER></H3>

<H3><CENTER>Test</CENTER></H3>
<P><CENTER>Just complete this form. Click on Submit when ready to

send.</CENTER></P>





<table align="center" width=650 border="0">
<tbody><tr>
<td>

<p><b>Please select any of the following exams you have passed.
If you have not passed any of these select the last line. <font color="red">(*required)</b></b></p>

</TD></TR></tbody></table>

<table align="center" width=650 border="3">
<tbody><tr>
<td>

<div><label for="chck1"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="1" id="chck1">


Advanced Placement (AP)</label></div>

<div><label for="chck2"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="2" id="chck2" >International Baccalaureate (IB) Diploma</label></div>

<div><label for="chck3"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="3" id="chck3" >International Baccalaureate (IB) Certificate</label></div>

<div><label for="chck4"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="4" id="chck4" >Advanced (A) - Levels</label></div>

<div><label for="chck5"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="5" id="chck5" >Advanced Subsidiary (AS)-Levels</label></div>

<div><label for="chck6"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed"
VALUE="6" id="chck6" >
Courses completed at a college and/or another university</label></div>

<div><label for="chck7"><INPUT TYPE="checkbox" NAME="Type_Of_Exam_Student_passed_7"
VALUE="7" id="chck7" onclick="if(checked) {
var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();
}">

I have not written and will not be writing any of the exams listed above</label></div>


</td></tr></tbody></table><br /><br />


<table align="center" width=650 border="0">
<tbody><tr>
<td>
<p>Please tell us which papers you have written or will be writing, and your grades if you know them.
If you do not know them, leave the spaces for the grades blank, and inform your adviser when you have the grades.
You will also need to arrange for the board which administers the exams to send an official copy of your results
to , Registrarís and Recruitment Office.</p>

</td></tr></tbody></table>


<table align=center border="3">
<tbody><tr bgcolor="#87cefa">
<td valign="top">
&nbsp;&nbsp;&nbsp; Name of Paper/Course with Units/Modules&nbsp;&nbsp;&nbsp; </td>
<td valign="top"> &nbsp; Grade (if known)&nbsp;&nbsp; </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">&nbsp;</td>

<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">
</td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_ Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">

</td></tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="3rd_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="3rd_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()"> </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="4th_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="4th_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()" > </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="5th_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="5th_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()"> </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="6th_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="6th_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()" > </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="7th_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()" >
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="7th_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()" > </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="8th_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()" >
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="8th_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()" > </td>
</tr> </tbody></table>

<br /><br />


<script type="text/javascript">
(function(course_approval_form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
course_approval_form.elements[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")
[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.course_approval_form[0]);
</script>

<H4>&nbsp;</H4>
<center>
<BLOCKQUOTE><P><INPUT TYPE="submit" NAME="Submit Form"

VALUE="Submit"><INPUT TYPE="reset" VALUE="Reset"></P>
</BLOCKQUOTE>
</center>
<P>&nbsp;</P>

</FORM>

</BODY>

</HTML>

Twey
02-03-2006, 08:55 PM
/me checks
You may need to edit the 0 in document.forms[0] if your page has more forms on it before this one.to see if it looks anything like "replace every occurrence of 'form' with the name of your form" in the right light, and has to concede it doesn't.

The code works almost as-is in your page. Remove the _7 from the end of the name of your last checkbox, and replace
form.elements[i].onclick = function() { with
z[i].onclick = function() {(that latter is my error, not yours). The code will then work with your page. There is no need to insert the name of your form anywhere in the page (although it is possible to do so, and may be wise: replace
})(document.forms[0]);with
})(document.forms['course_approval_form']);).

gulluman
02-06-2006, 05:25 PM
/me checksto see if it looks anything like "replace every occurrence of 'form' with the name of your form" in the right light, and has to concede it doesn't.

The code works almost as-is in your page. Remove the _7 from the end of the name of your last checkbox, and replace
form.elements[i].onclick = function() { with
z[i].onclick = function() {(that latter is my error, not yours). The code will then work with your page. There is no need to insert the name of your form anywhere in the page (although it is possible to do so, and may be wise: replace
})(document.forms[0]);with
})(document.forms['course_approval_form']);).

Hi Twey,

I really appreciate all your help. The code worked really well.
If you dont mind I have another query :) .

I have another set of Checkboxes where the same kind of validation is done like above except this : - "when you select any of the first 6 checkbox except the last one, a text appears on top of the checkbox saying that the user has to fill in the textarea down below. The user must enter text in the text box before submit but this time the cursor would not take the user to the textfield "

Thanks once again for all your help.

Gulluman

Twey
02-06-2006, 06:47 PM
<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
z[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
var p = document.getElementById("fill_in_text_" + this.id);
if(p) p.innerHTML = "Please fill in the text box below.";
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.forms['course_approval_form']);
</script>Create a text-containing element with an ID of "fill_in_text_" and then the checkbox's ID. When each checkbox is clicked, its respective element will be filled with the message.

For example, if you had a checkbox with id="chck4", you would create an element something like this:
<p id="fill_in_text_chck4"></p>where you wanted the message to appear.

gulluman
02-08-2006, 06:32 PM
Thanks once again.
I am not sure about the changing of ID for the checkboxes. so i copied the code once again BELOW. Please let me know.

And also if the last check box is checked(Chck7) then there WON'T be any window forcing the user to fill in the textbox. The user can submit without filling in the text. The user WILL be forced only if one of the other 6 checkboxes are selected. I was wodering if I should remove the code related to that. I tried once but then the whole thing did not work.

Finally, when i submit this form using netscape, it did not stop submitting when there was a blank. Is it possible to make it compatible easily ?

Thanks in advance.

Gulluman





<HTML>

<HEAD>

<TITLE>Test Form</TITLE>


<script language="JavaScript">

function noenter() {
return !(window.event && window.event.keyCode == 13); }

</script>



</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM name="course_approval_form" method="POST"

action="http://www.response-o-matic.com/cgi-bin/rom.pl" onsubmit="validate();">

<H1><CENTER>&nbsp;</CENTER></H1>

<H1><CENTER><FONT COLOR="#000000">B.Sc Course Approval Form</FONT>

</CENTER></H1>

<H3><CENTER>

<INPUT TYPE="hidden" NAME="your_email_address" VALUE="amiasof@30gigs.com">

<INPUT TYPE="hidden" NAME="your_name" VALUE="Webmaster">

<INPUT TYPE="hidden" NAME="email_subject_line" VALUE="B.Sc Course Approval">

<INPUT TYPE="hidden" NAME="required_fields" VALUE="your_email_address">

<INPUT TYPE="hidden" NAME="thank_you_title" VALUE="B.Sc">

<INPUT TYPE="hidden" NAME="return_link_url" VALUE="http://www.msn.com">

<INPUT TYPE="hidden" NAME="return_link_name" VALUE="Back To msn">

<INPUT TYPE="hidden" NAME="background_color" VALUE="#C0C0C0">

<INPUT TYPE="hidden" NAME="text_color" VALUE="#000000">

<INPUT TYPE="hidden" NAME="link_color" VALUE="#0000FF">

<INPUT TYPE="hidden" NAME="visited_link_color" VALUE="#8000FF">

<INPUT TYPE="hidden" NAME="active_link_color" VALUE="#0000FF">

</CENTER></H3>

<H3><CENTER>Test</CENTER></H3>
<P><CENTER>Just complete this form. Click on Submit when ready to

send.</CENTER></P>





<table align="center" width=650 border="0">
<tbody><tr>
<td>

<p><b>Please select any of the following exams you have passed.
If you have not passed any of these select the last line. <font color="red">(*required)</b></b></p>

</TD></TR></tbody></table>

<TABLE width=650 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV><LABEL for=fill_in_text_chck1><INPUT id=fill_in_text_chck1 type=checkbox value=1
name=Type_Of_Exam_Student_passed> Advanced Placement (AP)</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck2><INPUT id=fill_in_text_chck2 type=checkbox value=2
name=Type_Of_Exam_Student_passed> International Baccalaureate (IB)
Diploma</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck3><INPUT id=fill_in_text_chck3 type=checkbox value=3
name=Type_Of_Exam_Student_passed>International Baccalaureate (IB)
Certificate</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck4><INPUT id=fill_in_text_chck4 type=checkbox value=4
name=Type_Of_Exam_Student_passed>Advanced (A) - Levels</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck5><INPUT id=fill_in_text_chck5 type=checkbox value=5
name=Type_Of_Exam_Student_passed>Advanced Subsidiary
(AS)-Levels</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck6><INPUT id=fill_in_text_chck6 type=checkbox value=6
name=Type_Of_Exam_Student_passed> Courses completed at a college and/or
another university</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck7><INPUT id=fill_in_text_chck7
onclick="if(checked) {

var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();}"
type=checkbox value=7 name=Type_Of_Exam_Student_passed>


I have not written and will not be writing any of the exams listed above</label></div>


</td></tr></tbody></table><br /><br />


<table align="center" width=650 border="0">
<tbody><tr>
<td>
<p>Please tell us which papers you have written or will be writing, and your grades if you know them.
If you do not know them, leave the spaces for the grades blank, and inform your adviser when you have the grades.
</p>

</td></tr></tbody></table>


<table align=center border="3">
<tbody><tr bgcolor="#87cefa">
<td valign="top">
&nbsp;&nbsp;&nbsp; Name of Paper/Course with Units/Modules&nbsp;&nbsp;&nbsp; </td>
<td valign="top"> &nbsp; Grade (if known)&nbsp;&nbsp; </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">&nbsp;</td>

<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">
</td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_ Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">

</td></tr>

</tbody></table>

<br /><br />


<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
z[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
var p = document.getElementById("fill_in_text_" + this.id);
if(p) p.innerHTML = "Please fill in the text box below.";
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.forms['course_approval_form']);
</script>


<H4>&nbsp;</H4>
<center>
<BLOCKQUOTE><P><INPUT TYPE="submit" NAME="Submit Form"

VALUE="Submit"><INPUT TYPE="reset" VALUE="Reset"></P>


</BLOCKQUOTE>
</center>
<P>&nbsp;</P>

</FORM>

</BODY>

</HTML>

Twey
02-08-2006, 07:07 PM
So, something like this (move and style the paragraphs how you want them):

<HTML>

<HEAD>

<TITLE>Test Form</TITLE>


<script language="JavaScript">

function noenter() {
return !(window.event && window.event.keyCode == 13); }

</script>



</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM name="course_approval_form" method="POST"

action="http://www.response-o-matic.com/cgi-bin/rom.pl" onsubmit="validate();">

<H1><CENTER>&nbsp;</CENTER></H1>

<H1><CENTER><FONT COLOR="#000000">B.Sc Course Approval Form</FONT>

</CENTER></H1>

<H3><CENTER>

<INPUT TYPE="hidden" NAME="your_email_address" VALUE="amiasof@30gigs.com">

<INPUT TYPE="hidden" NAME="your_name" VALUE="Webmaster">

<INPUT TYPE="hidden" NAME="email_subject_line" VALUE="B.Sc Course Approval">

<INPUT TYPE="hidden" NAME="required_fields" VALUE="your_email_address">

<INPUT TYPE="hidden" NAME="thank_you_title" VALUE="B.Sc">

<INPUT TYPE="hidden" NAME="return_link_url" VALUE="http://www.msn.com">

<INPUT TYPE="hidden" NAME="return_link_name" VALUE="Back To msn">

<INPUT TYPE="hidden" NAME="background_color" VALUE="#C0C0C0">

<INPUT TYPE="hidden" NAME="text_color" VALUE="#000000">

<INPUT TYPE="hidden" NAME="link_color" VALUE="#0000FF">

<INPUT TYPE="hidden" NAME="visited_link_color" VALUE="#8000FF">

<INPUT TYPE="hidden" NAME="active_link_color" VALUE="#0000FF">

</CENTER></H3>

<H3><CENTER>Test</CENTER></H3>
<P><CENTER>Just complete this form. Click on Submit when ready to

send.</CENTER></P>





<table align="center" width=650 border="0">
<tbody><tr>
<td>

<p><b>Please select any of the following exams you have passed.
If you have not passed any of these select the last line. <font color="red">(*required)</b></b></p>

</TD></TR></tbody></table>

<TABLE width=650 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV><p id="fill_in_text_chck1"></p><LABEL for=chck1><INPUT id=chck1 type=checkbox value=1
name=Type_Of_Exam_Student_passed> Advanced Placement (AP)</LABEL></DIV>
<DIV><p id="fill_in_text_chck2"></p><LABEL for=chck2><INPUT id=chck2 type=checkbox value=2
name=Type_Of_Exam_Student_passed> International Baccalaureate (IB)
Diploma</LABEL></DIV>
<DIV><p id="fill_in_text_chck3"></p><LABEL for=chck3><INPUT id=chck3 type=checkbox value=3
name=Type_Of_Exam_Student_passed>International Baccalaureate (IB)
Certificate</LABEL></DIV>
<DIV><p id="fill_in_text_chck4"></p><LABEL for=chck4><INPUT id=chck4 type=checkbox value=4
name=Type_Of_Exam_Student_passed>Advanced (A) - Levels</LABEL></DIV>
<DIV><p id="fill_in_text_chck5"></p><LABEL for=chck5><INPUT id=fill_in_text_chck5 type=checkbox value=5
name=Type_Of_Exam_Student_passed>Advanced Subsidiary
(AS)-Levels</LABEL></DIV>
<DIV><p id="fill_in_text_chck6"></p><LABEL for=fill_in_text_chck6><INPUT id=chck6 type=checkbox value=6
name=Type_Of_Exam_Student_passed> Courses completed at a college and/or
another university</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck7><INPUT id=chck7
onclick="if(checked) {

var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();}"
type=checkbox value=7 name=Type_Of_Exam_Student_passed>


I have not written and will not be writing any of the exams listed above</label></div>


</td></tr></tbody></table><br /><br />


<table align="center" width=650 border="0">
<tbody><tr>
<td>
<p>Please tell us which papers you have written or will be writing, and your grades if you know them.
If you do not know them, leave the spaces for the grades blank, and inform your adviser when you have the grades.
</p>

</td></tr></tbody></table>


<table align=center border="3">
<tbody><tr bgcolor="#87cefa">
<td valign="top">
&nbsp;&nbsp;&nbsp; Name of Paper/Course with Units/Modules&nbsp;&nbsp;&nbsp; </td>
<td valign="top"> &nbsp; Grade (if known)&nbsp;&nbsp; </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">&nbsp;</td>

<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">
</td>
</tr>
<tr bgcolor="#87cefa">

<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_ Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">

</td></tr>

</tbody></table>

<br /><br />


<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
z[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
var p = document.getElementById("fill_in_text_" + this.id);
if(p && document.getElementById(this.id).checked) p.innerHTML = "Please fill in the text box below.";
else if(p) p.innerHTML = "";
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.forms['course_approval_form']);
</script>


<H4>&nbsp;</H4>
<center>
<BLOCKQUOTE><P><INPUT TYPE="submit" NAME="Submit Form"

VALUE="Submit"><INPUT TYPE="reset" VALUE="Reset"></P>


</BLOCKQUOTE>
</center>
<P>&nbsp;</P>

</FORM>

</BODY>

</HTML>
By the way, your HTML is awful. I strongly suggest you run it through a validator (http://validator.w3.org/).

gulluman
02-10-2006, 05:59 PM
I dont know how to say thanks to you but many many thanks.
Sorry for the HTML, i know its not standard because I created this copying from the original website so i kept whatever relevent. The HTML is perfect in the original website.

I had another question in the previous post. If I use netscape or Mozilla and press the submit button without filling in any fields, the javascript runs but does not work as it submits the form automatically. How do I stop this ?

And how do I create a separate confirmation window with the information submitted in the form before submitting the form finally ?

Thanks a lot in advance, i will definitely send you the original website link after i upload all these.

Thanks a lot in advance.

Gulluman



So, something like this (move and style the paragraphs how you want them):

<HTML>

<HEAD>

<TITLE>Test Form</TITLE>


<script language="JavaScript">

function noenter() {
return !(window.event && window.event.keyCode == 13); }

</script>



</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM name="course_approval_form" method="POST"

action="http://www.response-o-matic.com/cgi-bin/rom.pl" onsubmit="validate();">

<H1><CENTER>&nbsp;</CENTER></H1>

<H1><CENTER><FONT COLOR="#000000">B.Sc Course Approval Form</FONT>

</CENTER></H1>

<H3><CENTER>

<INPUT TYPE="hidden" NAME="your_email_address" VALUE="amiasof@30gigs.com">

<INPUT TYPE="hidden" NAME="your_name" VALUE="Webmaster">

<INPUT TYPE="hidden" NAME="email_subject_line" VALUE="B.Sc Course Approval">

<INPUT TYPE="hidden" NAME="required_fields" VALUE="your_email_address">

<INPUT TYPE="hidden" NAME="thank_you_title" VALUE="B.Sc">

<INPUT TYPE="hidden" NAME="return_link_url" VALUE="http://www.msn.com">

<INPUT TYPE="hidden" NAME="return_link_name" VALUE="Back To msn">

<INPUT TYPE="hidden" NAME="background_color" VALUE="#C0C0C0">

<INPUT TYPE="hidden" NAME="text_color" VALUE="#000000">

<INPUT TYPE="hidden" NAME="link_color" VALUE="#0000FF">

<INPUT TYPE="hidden" NAME="visited_link_color" VALUE="#8000FF">

<INPUT TYPE="hidden" NAME="active_link_color" VALUE="#0000FF">

</CENTER></H3>

<H3><CENTER>Test</CENTER></H3>
<P><CENTER>Just complete this form. Click on Submit when ready to

send.</CENTER></P>





<table align="center" width=650 border="0">
<tbody><tr>
<td>

<p><b>Please select any of the following exams you have passed.
If you have not passed any of these select the last line. <font color="red">(*required)</b></b></p>

</TD></TR></tbody></table>

<TABLE width=650 align=center border=3>
<TBODY>
<TR>
<TD>
<DIV><p id="fill_in_text_chck1"></p><LABEL for=chck1><INPUT id=chck1 type=checkbox value=1
name=Type_Of_Exam_Student_passed> Advanced Placement (AP)</LABEL></DIV>
<DIV><p id="fill_in_text_chck2"></p><LABEL for=chck2><INPUT id=chck2 type=checkbox value=2
name=Type_Of_Exam_Student_passed> International Baccalaureate (IB)
Diploma</LABEL></DIV>
<DIV><p id="fill_in_text_chck3"></p><LABEL for=chck3><INPUT id=chck3 type=checkbox value=3
name=Type_Of_Exam_Student_passed>International Baccalaureate (IB)
Certificate</LABEL></DIV>
<DIV><p id="fill_in_text_chck4"></p><LABEL for=chck4><INPUT id=chck4 type=checkbox value=4
name=Type_Of_Exam_Student_passed>Advanced (A) - Levels</LABEL></DIV>
<DIV><p id="fill_in_text_chck5"></p><LABEL for=chck5><INPUT id=fill_in_text_chck5 type=checkbox value=5
name=Type_Of_Exam_Student_passed>Advanced Subsidiary
(AS)-Levels</LABEL></DIV>
<DIV><p id="fill_in_text_chck6"></p><LABEL for=fill_in_text_chck6><INPUT id=chck6 type=checkbox value=6
name=Type_Of_Exam_Student_passed> Courses completed at a college and/or
another university</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck7><INPUT id=chck7
onclick="if(checked) {

var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();}"
type=checkbox value=7 name=Type_Of_Exam_Student_passed>


I have not written and will not be writing any of the exams listed above</label></div>


</td></tr></tbody></table><br /><br />


<table align="center" width=650 border="0">
<tbody><tr>
<td>
<p>Please tell us which papers you have written or will be writing, and your grades if you know them.
If you do not know them, leave the spaces for the grades blank, and inform your adviser when you have the grades.
</p>

</td></tr></tbody></table>


<table align=center border="3">
<tbody><tr bgcolor="#87cefa">
<td valign="top">
&nbsp;&nbsp;&nbsp; Name of Paper/Course with Units/Modules&nbsp;&nbsp;&nbsp; </td>
<td valign="top"> &nbsp; Grade (if known)&nbsp;&nbsp; </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">&nbsp;</td>

<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">
</td>
</tr>
<tr bgcolor="#87cefa">

<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_ Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">

</td></tr>

</tbody></table>

<br /><br />


<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
z[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
var p = document.getElementById("fill_in_text_" + this.id);
if(p && document.getElementById(this.id).checked) p.innerHTML = "Please fill in the text box below.";
else if(p) p.innerHTML = "";
}
}
form.onsubmit = function() {
if(document.getElementsByName("Type_Of_Exam_Student_passed")[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else return true;
}
})(document.forms['course_approval_form']);
</script>


<H4>&nbsp;</H4>
<center>
<BLOCKQUOTE><P><INPUT TYPE="submit" NAME="Submit Form"

VALUE="Submit"><INPUT TYPE="reset" VALUE="Reset"></P>


</BLOCKQUOTE>
</center>
<P>&nbsp;</P>

</FORM>

</BODY>

</HTML>
By the way, your HTML is awful. I strongly suggest you run it through a validator (http://validator.w3.org/).

Twey
02-10-2006, 07:42 PM
<HTML>

<HEAD>

<TITLE>Test Form</TITLE>


<script language="JavaScript">

function noenter() {
return !(window.event && window.event.keyCode == 13); }

</script>



</HEAD>

<BODY BGCOLOR="#FFFFFF">

<FORM name="course_approval_form" method="POST"

action="http://www.response-o-matic.com/cgi-bin/rom.pl">

<H1><CENTER>&nbsp;</CENTER></H1>

<H1><CENTER><FONT COLOR="#000000">B.Sc Course Approval Form</FONT>

</CENTER></H1>

<H3><CENTER>

<INPUT TYPE="hidden" NAME="your_email_address" VALUE="amiasof@30gigs.com">

<INPUT TYPE="hidden" NAME="your_name" VALUE="Webmaster">

<INPUT TYPE="hidden" NAME="email_subject_line" VALUE="B.Sc Course Approval">

<INPUT TYPE="hidden" NAME="required_fields" VALUE="your_email_address">

<INPUT TYPE="hidden" NAME="thank_you_title" VALUE="B.Sc">

<INPUT TYPE="hidden" NAME="return_link_url" VALUE="http://www.msn.com">

<INPUT TYPE="hidden" NAME="return_link_name" VALUE="Back To msn">

<INPUT TYPE="hidden" NAME="background_color" VALUE="#C0C0C0">

<INPUT TYPE="hidden" NAME="text_color" VALUE="#000000">

<INPUT TYPE="hidden" NAME="link_color" VALUE="#0000FF">

<INPUT TYPE="hidden" NAME="visited_link_color" VALUE="#8000FF">

<INPUT TYPE="hidden" NAME="active_link_color" VALUE="#0000FF">

</CENTER></H3>

<H3><CENTER>Test</CENTER></H3>
<P><CENTER>Just complete this form. Click on Submit when ready to

send.</CENTER></P>





<table align="center" width=650 border="0">
<tbody><tr>
<td>

<p><b>Please select any of the following exams you have passed.
If you have not passed any of these select the last line. <font color="red">(*required)</b></b></p>

</TD></TR></tbody></table>

<TABLE width=650 align=center border=3>
<TBODY>
<TR>
<TD>

<DIV><p id="fill_in_text_chck1"></p><LABEL for=chck1><INPUT id=chck1 type=checkbox value=1
name=Type_Of_Exam_Student_passed> Advanced Placement (AP)</LABEL></DIV>
<DIV><p id="fill_in_text_chck2"></p><LABEL for=chck2><INPUT id=chck2 type=checkbox value=2
name=Type_Of_Exam_Student_passed> International Baccalaureate (IB)
Diploma</LABEL></DIV>
<DIV><p id="fill_in_text_chck3"></p><LABEL for=chck3><INPUT id=chck3 type=checkbox value=3
name=Type_Of_Exam_Student_passed>International Baccalaureate (IB)
Certificate</LABEL></DIV>
<DIV><p id="fill_in_text_chck4"></p><LABEL for=chck4><INPUT id=chck4 type=checkbox value=4
name=Type_Of_Exam_Student_passed>Advanced (A) - Levels</LABEL></DIV>
<DIV><p id="fill_in_text_chck5"></p><LABEL for=chck5><INPUT id=fill_in_text_chck5 type=checkbox value=5
name=Type_Of_Exam_Student_passed>Advanced Subsidiary
(AS)-Levels</LABEL></DIV>

<DIV><p id="fill_in_text_chck6"></p><LABEL for=fill_in_text_chck6><INPUT id=chck6 type=checkbox value=6
name=Type_Of_Exam_Student_passed> Courses completed at a college and/or
another university</LABEL></DIV>
<DIV><LABEL for=fill_in_text_chck7><INPUT id=chck7
onclick="if(checked) {

var e = document.getElementsByName('Type_Of_Exam_Student_passed');
for(var i=0;i<e.length-1;i++) e[i].checked = false;
document.getElementsByName('1st_Course_Written')[0].focus();}"
type=checkbox value=7 name=Type_Of_Exam_Student_passed>


I have not written and will not be writing any of the exams listed above</label></div>


</td></tr></tbody></table><br /><br />


<table align="center" width=650 border="0">

<tbody><tr>
<td>
<p>Please tell us which papers you have written or will be writing, and your grades if you know them.
If you do not know them, leave the spaces for the grades blank, and inform your adviser when you have the grades.
</p>

</td></tr></tbody></table>


<table align=center border="3">
<tbody><tr bgcolor="#87cefa">
<td valign="top">
&nbsp;&nbsp;&nbsp; Name of Paper/Course with Units/Modules&nbsp;&nbsp;&nbsp; </td>

<td valign="top"> &nbsp; Grade (if known)&nbsp;&nbsp; </td>
</tr>
<tr bgcolor="#87cefa">
<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Written" VALUE="" SIZE=50 onkeypress="return noenter()">&nbsp;</td>

<td valign="top"><INPUT TYPE="text" NAME="1st_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">
</td>

</tr>
<tr bgcolor="#87cefa">

<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_ Written" VALUE="" SIZE=50 onkeypress="return noenter()">
&nbsp; </td>
<td valign="top"><INPUT TYPE="text" NAME="2nd_Course_Grade" VALUE="" SIZE=20 onkeypress="return noenter()">

</td></tr>

</tbody></table>

<br /><br />


<script type="text/javascript">
(function(form) {
var z = document.getElementsByName("Type_Of_Exam_Student_passed");
for(var i=0;i<z.length-1;i++) {
z[i].onclick = function() {
document.getElementsByName("Type_Of_Exam_Student_passed")[document.getElementsByName("Type_Of_Exam_Student_passed").length-1].checked = false;
var p = document.getElementById("fill_in_text_" + this.id);
if(p && document.getElementById(this.id).checked) p.innerHTML = "Please fill in the text box below.";
else if(p) p.innerHTML = "";
}
}
form.onsubmit = function() {
var u = document.getElementsByName("Type_Of_Exam_Student_passed");
if(u[6].checked &&
document.getElementsByName('1st_Course_Written')[0].value == "") {
window.alert("Please fill in the text box.");
document.getElementsByName("1st_Course_Written")[0].focus();
return false;
} else for(var l=0;l<u.length;l++) if(u[l].checked) return true;
window.alert("Please tick at least one option.");
return false;
}
})(document.forms['course_approval_form']);
</script>


<H4>&nbsp;</H4>
<center>
<BLOCKQUOTE><P><INPUT TYPE="submit" NAME="Submit Form"

VALUE="Submit"><INPUT TYPE="reset" VALUE="Reset"></P>


</BLOCKQUOTE>

</center>
<P>&nbsp;</P>

</FORM>

</BODY>

</HTML>
That fixes all the problems except the submission-checking one, which is best left to a server-side script.