Radio button validation problem

[mdel]

I should start by saying that I'm developing this form in the Lotus Domino environment which may or may not be causing some of this "strange" behavior.
A form that I've been working has a section that requires some field validation based on whether a radio button is checked. This section comes in towards the end of the form. Now, I've been able get the validation to work however the form will not submit. After further analysis I found that what it seems not to like is the 'name' tag for the radio button. If I remove the tag the form will submit. However, doing that bypasses my validation. If I leave the name tag in and change from a radio to a button the form will submit. The code I have is as follows:

<input type="radio" name="second" onClick="yes3()" value="Yes" )>Yes <input type="radio" name="second" onClick="no3()" value="No" )>No


I'm using name="second" so I can use the below validation:

if (document.forms[0].second[0].checked && Date2.value=="") {
alert('Please enter a valid Date for your 2nd event.');
Form.Date2.focus();

If I need to use buttons rather than radio's how would I alter the validation code.

Thank you,

Mark

[adios]

Why not post all your code?

For example, this is odd:

if (document.forms[0].second[0].checked && Date2.value=="") {
alert('Please enter a valid Date for your 2nd event.');
Form.Date2.focus();

Presumably it's in a function; you're using an absolute reference for the radio button, a solo name property for the Date2 field - and - I'm assuming - a passed form object (Form) for the last. What you've described is not typical; there's an error somewhere.

[mdel]

Here is all the code currently in the form header:



function refresh () {
_doClick('$Refresh',this,'_self');
}
function yes1() {
ExtVendorDiv.style.display='';
}
function yes2() {
RoomReqDiv.style.display='';
}
function yes3() {
RoomReq2Div.style.display='';
}
function yes4() {
RoomReq3Div.style.display='';
}
function no1() {
ExtVendorDiv.style.display='none';
}
function no3() {
RoomReq2Div.style.display='none';
}
function no4() {
RoomReq3Div.style.display='none';
}
function submitButton ( theForm ) {
AssociateID_1 = document.forms[0].AssociateID_1.value;
Date1 = document.forms[0].Date1.value;
Title1 = document.forms[0].Title1.value;
Time1 = document.forms[0].Time1.value;
EndTime1 = document.forms[0].EndTime1.value;
Participants1 = document.forms[0].Participants1.value;
Date2 = document.forms[0].Date2.value;
Title2 = document.forms[0].Title2.value;
Time2 = document.forms[0].Time2.value;
EndTime2 = document.forms[0].EndTime2.value;
Participants2 = document.forms[0].Participants2.value;
Date3 = document.forms[0].Date3.value;
Title3 = document.forms[0].Title3.value;
Time3 = document.forms[0].Time3.value;
EndTime3 = document.forms[0].EndTime3.value;
Participants3 = document.forms[0].Participants3.value;
if ( AssociateID_1 == "" ) {
alert ("You must enter a valid Associate ID number.");
theForm.AssociateID_1.focus();
}else{
if ( Date1 == "" ) {
alert ("You must enter a valid Event Date.");
theForm.Date1.focus();
}else{
if ( Title1 == "" ) {
alert ("You must enter a valid Event Title.");
theForm.Title1.focus();
}else{
if ( Time1 == "" ) {
alert ("You must enter a valid Start Time.");
theForm.Time1.focus();
}else{
if ( EndTime1 == "" ) {
alert ("You must enter a valid End Time.");
theForm.EndTime1.focus();
}else{
if ( Participants1 == "" ) {
alert ("You must enter a valid Number of Participants.");
theForm.Participants1.focus();
}else{
if (document.forms[0].event2[0].checked && Date2=="") {
alert('Please enter a valid Date for your 2nd event.');
theForm.Date2.focus();
}else{
return;
}else{
theForm.submit();
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}



Below are the form fields in the body:


Requestor Information
Associate ID:


Requestor Name: Division:
Location/Floor: Cost Center:
Telephone #: Facilitator:



Will there be an external vendor?
<input type="radio" name="second" onClick="yes1()" value="Yes" );">Yes <input type="radio" name="second" onClick="no1()" value="No" );">No

[<div id="ExtVendorDiv" style="display:none">][<BR>]

External Vendor Information
[<BR>]
External Company:
External Contact/Facilitator:
Phone Number:

[</DIV>]


<input style='font: bold 12px verdana, arial, default sans-serif; color : #483D8B; background-color : 192,192,192; ' type="button" onClick="yes2()" value="Room Requests" );">

[<div id="RoomReqDiv" style="display:none">][<BR>]

*Event Date: *Event Title:
*Start Time: *End Time:
*Number of Participants: Room Configuration:
Number of Easels: Number of Flip Charts:
Podium: Other:
[<BR>]
Do you need to request another event?

<input type="radio" name="event2" onClick="yes3()" value="Yes" );">Yes <input type="radio" name="event2" onClick="no3()" value="No" );">No
[</div>]

[<BR>]
[<div id="RoomReq2Div" style="display:none">][<BR>]

*Event Date: *Event Title:
*Start Time: *End Time:
*Number of Participants Room Configuration:
Number of Easels: Number of Flip Charts:
Podium: Other:



Do you need to request another event?

<input type="radio" name="event3" onClick="yes4()" value="Yes" );">Yes <input type="radio" name="event3" onClick="no4()" value="No" );">No
[</div>]

[<BR>]
[<div id="RoomReq3Div" style="display:none">][<BR>]

*Event Date: *Event Title:
*Start Time: *End Time:
*Number of Participants: Room Configuration:
Number of Easels: Number of Flip Charts:
Podium: Other:
[</div>]

[adios]

One way to do validation:

Use the form's onsubmit handler:

<form........onsubmit="return submitButton(this)">

You can use:

<input type="submit" onclick="return submitButton(this.form)">

..as well; the first is preferable. Pass the form object; use it something like this:

function submitButton (f) {
if (!f.AssociateID_1.value) {
alert ("You must enter a valid Associate ID number.");
f.AssociateID_1.focus();
return false;
}
if (!f.Date1.value) {
alert ("You must enter a valid Event Date.");
f.Date1.focus();
return false;
}
if (!f.Title1.value) {
alert ("You must enter a valid Event Title.");
f.Title1.focus();
return false;
}

......and so on. Finally:

if (f.event2[0].checked && !f.Date2.value) {
alert('Please enter a valid Date for your 2nd event.');
f.Date2.focus();
return false;
}
return true;
}

Also:

<input type="radio" name="event3" onClick="yes4()" value="Yes" );">Yes

Might want to remove that.

[mdel]

Thanks for the code; it is much cleaner than mine. Unfortunately I still run into the exact problem. The form will not submit once it reaches that radio button validation and the IE browser reports no errors; I just recieve a "page cannot be found". I made the following changes to see what effect it would have.

Left the input type as "radio" and changed the "name" tag to another name (to bypass validation) - Result - form would not submit

Left input type as "radio" and removed the "name" tag entirely - Result - validation bypassed; form would submit

Changed input type to button and left name tag - Result - validation bypassed; form would submit.

I don't know how valid this little test was but it seems have a problem with radio button validation. I did post this on a Domino forum to see if it's the environment but the responses I get back don't seem to support that. Being a novice, I'm not quite sure how to change the code to validate based on a button click but I'd be curious to see if it indeed behaves differently.

Thanks again for your help.

Mark

[adios]

Mark -

Be glad to help more on this. If you can, zip that page up & attach it below; seeing the entire structure always helps. Again - there's nothing obvious in your description (to me) that, in itself, suggests what might be going amiss.

btw: "page cannot be found" usually pops up when a form has been submitted and the action URL can't be located.

adios

[mdel]

Thanks.

[adios]

Here's the basic idea; left out the fancy DHTML stuff; you'd know better what the specific concept is..


<html>
<head>
<script type="text/javascript" language="javascript">

function displayHide(id) {
var el = document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) : null;
if (el && el.style) el.style.display = (el.style.display == 'none') ? '' : 'none';
}

function checkform(f) {
if (!f.AssociateID_1.value) {
alert ('You must enter a valid Associate ID number.');
f.AssociateID_1.focus();
return false;
}
if (!f.Date1.value) {
alert ('You must enter a valid Event Date.');
f.Date1.focus();
return false;
}
if (!f.Title1.value) {
alert ('You must enter a valid Event Title.');
f.Title1.focus();
return false;
}
if (!f.Time1.value) {
alert ('You must enter a valid Event Time.');
f.Time1.focus();
return false;
}
if (!f.EndTime1.value) {
alert ('You must enter a valid Event End Time.');
f.EndTime1.focus();
return false;
}
if (!f.Participants1.value) {
alert ('You must enter a valid Number of Participants.');
f.Participants1.focus();
return false;
}
if (f.event2[0].checked) {
if (!f.Date2.value) {
alert('Please enter a valid Date for your 2nd event.');
f.Date2.focus();
return false;
}
if (!f.Title2.value) {
alert('Please enter a valid Title for your 2nd event.');
f.Title2.focus();
return false;
}
if (!f.Time2.value) {
alert('Please enter a valid Time for your 2nd event.');
f.Time2.focus();
return false;
}
if (!f.EndTime2.value) {
alert('Please enter a valid End Time for your 2nd event.');
f.EndTime2.focus();
return false;
}
if (!f.Participants2.value) {
alert('Please enter a valid Number of Participants for your 2nd event.');
f.Participants2.focus();
return false;
}
}
if (f.event3[0].checked) {
if (!f.Date3.value) {
alert('Please enter a valid Date for your 3rd event.');
f.Date3.focus();
return false;
}
if (!f.Title3.value) {
alert('Please enter a valid Title for your 3rd event.');
f.Title3.focus();
return false;
}
if (!f.Time3.value) {
alert('Please enter a valid Time for your 3rd event.');
f.Time3.focus();
return false;
}
if (!f.EndTime3.value) {
alert('Please enter a valid End Time for your 3rd event.');
f.EndTime3.focus();
return false;
}
if (!f.Participants3.value) {
alert('Please enter a valid Number of Participants for your 3rd event.');
f.Participants3.focus();
return false;
}
}
return true;
}

</script>
</head>
<body>
<form action="javascript&#58;alert('Submitted !')" method=post
onsubmit="return checkform(this)">
<input name="AssociateID_1" type="text"> AssociateID<br>
<input name="Date1" type="text"> Date<br>
<input name="Title1" type="text"> Title<br>
<input name="Time1" type="text"> Time<br>
<input name="EndTime1" type="text"> End Time<br>
<input name="Participants1" type="text"> Participants<hr>
Second event? <input name="event2" type="radio"
onclick="displayHide('second')">yes
<input name="event2" type="radio" checked="checked"
onclick="displayHide('second')">no<hr>
<span id="second" style="display:none;">
<input name="Date2" type="text"> Date<br>
<input name="Title2" type="text"> Title<br>
<input name="Time2" type="text"> Time<br>
<input name="EndTime2" type="text"> End Time<br>
<input name="Participants2" type="text">Participants<hr>
</span>
Third event? <input name="event3" type="radio"
onclick="displayHide('third')">yes
<input name="event3" type="radio" checked="checked"
onclick="displayHide('third')">no<hr>
<span id="third" style="display:none;">
<input name="Date3" type="text"> Date<br>
<input name="Title3" type="text"> Title<br>
<input name="Time3" type="text"> Time<br>
<input name="EndTime3" type="text"> End Time<br>
<input name="Participants3" type="text"> Participants<hr>
</span>
<br><br>
<input type="submit" value="DONE">
</form>
</body>
</html>

[mdel]

I want to thank you for your help. I cleaned up my code based on your sample and it is much cleaner. Unfortunately I'm still running into the same problem. For some reason it seems that the "name" tag is at the root of the problem. With it in there the validation works flawlessly but the form will not submit. With it removed, the form submits fine. I have to suspect that it may have something to do with the Domino environment. I'll do some more investigating on the Domino sites. Again, I appreciate the time you have taken to work with me on this.


Mark