Facing another Problem in HTML JavaScript coding

[ghosh22]

Hi
Sorry I am posting again. I am trying to make a web form for my new website. I am doing the coding myself because I cannot afford to hire a coder for me. I need some help from you. Please forgive me for all my idiotic questions!
Now, here's the problem. In my web form I am using JavaScript alert system to check for Required fields. But the problem is, its been checking text boxes without any problem, but for Questions with Radio buttons, its not checking! My code is:

if (frm.Gender.value == "") {alert('Please mention your gender.');frm.Gender.focus();return false;}
if (frm.ID.value == "") {alert('ID is required.');frm.ID.focus();return false;}

So it is giving alert message if the ID field is kept blank but it does not work when Gender field is kept blank but both of them are actually required fields.
My HTML code for Gender and ID:

<td><b>Gender*:</b></td>
<td><input id="Male" name="Gender" type="radio" >Male<br/>
    <input id="Female" name="Gender" type="radio">Female</td>
</tr>
<td><b>Please mention your ID*:</b></td>
<td><input id="ID" name="ID" type="text" maxlength="17" style="width:300px; border:1px solid #999999" /></td>
</tr><tr> 

Could you please tell whats wrong here?
Sorry I am amking this long but I have one more question. This form gets mailed to me when user fills the required fields and captcha.
Problem is I am getting my email but the radio fields are coming as "ON"! Suppose, If the user choice was for Gender Male, its giving me "Gender = on", but I need actually Gender=Male. I have also options with three radio buttons and even those are coming as "ON". Any solution for this?
Thanks

[pittabariga]

if((document.getElementById('Male').checked == false) && (document.getElementById('Female').checked == false)) { alert(''); }

use value attribute of input to that value on submission

<input id="Male" name="Gender" type="radio" value="Male">

[EvolutionFallen]

What are you assigning to frm.Gender? If it's document.getElementsByName('Gender'), then you will be getting back an array. You need to iterate through the array:

frm.Gender = document.getElementsByName('Gender');
genderSelected = false;
for(var i=0; i < frm.Gender.length; i++)
    if(frm.Gender[i].checked)
        genderSelected = true;
if(!genderSelected) {alert('Please mention your gender.');frm.Gender.focus();return false;}

Note, I haven't tested this.

[ghosh22]

@pittabargia Your code does give me alert..but it then gets submitted automatically..
@EvolutionFallen sorry its not working

Please note I am using captcha before form submission and I have other required fields after this Gender one..

[EvolutionFallen]

@ghosh22 Please indicate where you're getting frm.Gender from. If I remove the frm. part everywhere, it works fine. You also need to remove frm.Gender.focus();.

See the jsFiddle

[ghosh22]

@EvolutionFiddle thanks for your reply. I can see its working in jsFiddle. But unfortuantely, its not working again in my case..i have pasted now my entire JavaScript part of the code..would you please check?

<form action="http://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);">
<input id="skip_WhereToSend" name="skip_WhereToSend" type="hidden" value="[e-mail]" />
<input id="skip_SnapHostID" name="skip_SnapHostID" type="hidden" value="KD8Y6H8DR28A" />
<input id="skip_WhereToReturn" name="skip_WhereToReturn" type="hidden" value="http://www.dietcoach.cu.cc/Sign Up.html" />
<input id="skip_Subject" name="skip_Subject" type="hidden" value="Sign Up Web Form" />
<input id="skip_ShowUsersIp" name="skip_ShowUsersIp" type="hidden" value="1" />
<input id="skip_SendCopyToUser" name="skip_SendCopyToUser" type="hidden" value="1" />
<script type="text/javascript">
function ValidateForm(frm) {
if (frm.FirstName.value == "") {alert('First Name is required.');frm.FirstName.focus();return false;}
if (frm.LastName.value == "") {alert('Last Name is required.');frm.LastName.focus();return false;}
if (frm.Organization.value == "") {alert('Organization is required.');frm.Organization.focus();return false;}
if (frm.FromEmailAddress.value == "") {alert('Email address is required.');frm.FromEmailAddress.focus();return false;}
if (frm.FromEmailAddress.value.indexOf("@") < 1 || frm.FromEmailAddress.value.indexOf(".") < 1) {alert('Please enter a valid email address.');frm.FromEmailAddress.focus();return false;}
if (frm.StreetAddress1.value == "") {alert('Address is required.');frm.StreetAddress1.focus();return false;}
if (frm.City.value == "") {alert('City is required.');frm.City.focus();return false;}
if (frm.Country.value == "") {alert('Country is required.');frm.Country.focus();return false;}
function checkPackage(){
    var Package = document.getElementsByName('Package');
    packageSelected = false;
    for(var i=0; i < Package.length; i++)
        if(Package[i].checked)
            packageSelected = true;
    if(!packageSelected) { alert('Please select your Package.'); return false; }
}
if (frm.ID.value == "") {alert('ID is required.');frm.ID.focus();return false;}
if (frm.skip_CaptchaCode.value == "") {alert('Enter web form code.');frm.skip_CaptchaCode.focus();return false;}
return true; }
function ReloadCaptchaImage(captchaImageId) {
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false; }
</script>

Please note I have decided to check with Package now instead of gender. But that should work in the same way! I'm sure I have done something wrong..but it seems I am not finding it..Here's the HTML part..

<td><b>Which type of package you chose?*:</b></td>
<td><input id="Pacakage1" name="Package" type="radio" >Package 1<br/>
    <input id="Package2" name="Package" type="radio">Package 2</td>
</tr>
<td><b>Please mention your ID*:</b></td>
<td><input id="ID" name="ID" type="text" maxlength="17" style="width:300px; border:1px solid #999999" /></td>
</tr><tr> 
<td colspan="2" align="center">
<br />
<table border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2" style="padding-bottom:18px;">
<!-- Please check our ProCaptcha service which is ad-free:
http://www.SnapHost.com/captcha/ProCaptchaOverview.aspx -->
<a href="http://www.snaphost.com/captcha/" alt="captcha example" title="captcha example"
style="text-decoration:none; font-size:11px; font-family:Verdana, Arial, Helvetica; color:#000099;">
This web form is protected from SPAM by
<span style="text-decoration:underline;">SnapHost.com</span></a></td></tr>
<tr valign="top">
<td>
<i>Enter web form code*:</i>
<input id="skip_CaptchaCode" name="skip_CaptchaCode" type="text" style="width:80px; border:1px solid #999999" maxlength="6" />
</td><td>
<a href="http://www.snaphost.com/captcha/CaptchaCode.aspx"><img id="CaptchaImage" alt="free html forms" title="free html forms"
style="margin-left:20px; border:1px solid #999999"
src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=KD8Y6H8DR28A&ImgType=2" /></a>
<br /><a href="#" onclick="return ReloadCaptchaImage('CaptchaImage');"><span style="font-size:12px;">reload image</span></a>
</td>
</tr>
</table>
<br />
* - required fields. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<input id="skip_Submit" name="skip_Submit" type="submit" value="Submit" />
</td>
</tr>
</table>
<br />
</form>

Actually I got this source code from a blog or something i don't remember now..the actual code was for a small form..but I have modified it and made it bigger..the JavaScript part was wriiten by the actual coder..Thanks for your help

[almostbob]

the validate function coded by the original author uses a replaceable parameter "frm" function ValidateForm(frm) {
that way the same code can be reused with multiple form ids
the script is called with a default replaceable parameter 'this' which is replaced on execution with the form id
onsubmit="return ValidateForm(this);"
is functionally equivalent to onsubmit='return ValidateForm("ContactUsCaptchaWebForm);'

it is important that form and input names & ids are properly matched to the names and ids within the javascript validation code
( havent actually performed the matching yet, making breakfast. )

[ghosh22]

I think names are matching..I am having problem only in the Package checking part..other checkpoints are working fine..JavaScript is skipping this "Package" part and goes to the next part even if the user has not checked the "Package" question.
Also when I am getting email, the Questions with radio buttons are coming as "On". Is it not possible to know which option the user has chosen actually instead of getting "On"?

[almostbob]

nothing appears to call the checkpackage() function
perhaps include it as a subroutine in the validation script
something like

    17.if (frm.Country.value == "") {alert('Country is required.');frm.Country.focus();return false;
    18.checkpackage()}

its been a long time since I did anything clientside,
you may have to move the checkPackage() function before the validation script, dont remember if declaring a function after its call is invalid or not