Validation for radio buttons

i'm running a validation script to check if my radio buttons are selected, but i can't seem to get it to read the value of the field.

heres my form

<form name="cases" action="cases_process.php" method="post" onsubmit="return validate(this)">


<input name="uscan" id="uscan" value="n" checked="checked" type="hidden" />
<input type="radio" name="uscan" id="uscan" value="us" class="radial" tabindex="1" /><label>United States</label>
<input type="radio" name="uscan" id="uscan" value="canada" class="radial" tabindex="2" style="margin-left:30px;" /><label>Canada</label>
<input type="radio" name="uscan" id="uscan" value="other" class="radial" tabindex="3" style="margin-left:30px;" /><label>Other</label>
<div style="float:left;margin:-23px 0 0 370px;" id="cancelcon_uscan"></div>
</div>


<table class="category">
<tr><td><label>Case Name:</label></td><td><input type="text" name="casename" id="casename" class="field" tabindex="6" /></td>
<td><div id="cancelcon_casename"></div></td></tr>
</table>
</form>


i have a hidden checked field with a value of n, so there is a value of "n" for "uscan" if no radio is selected. i then run this code on submit:


function validate(form) {
var uscan = form.uscan.value;
var casename = form.casename.value;

var reWhiteSpace = new RegExp(/^\s+$/);


if(uscan == "n") {
modinputbad('uscan');
var a = "1";
}else {
modinputgood('uscan');
var a = "0";
}



if(casename == "" || reWhiteSpace.test(casename) == true) {
modinputbad('casename');
var b = "1";
}else {
modinputgood('casename');
var b = "0";
}

function modinputbad(id) {
$(id).style.border = '1px solid #b63939';
$(id).style.background = '#ffdfdf';
$('cancelcon_'+id).innerHTML = '<img style="float:left;" src="static/images/cancel_16.png"/>';

}

function modinputgood(id) {
$(id).style.border = '1px solid #D9D9D9';
$(id).style.background = '#F2F4F3';
$('cancelcon_'+id).innerHTML = '';

}


var added = a+b+c+d+e+f;

var dowork = added.indexOf('1');

if(dowork == '-1')return true; else return false;

}

everything works up until the if(uscan == "n") so idk why it cant find what the value of the field is, because ive tested it and it seems to know even know what the value is. anything im doing wrong?

Despite the similar sounding names, Java is not the same as Javascript.
Moving from Java forum to Javascript forum.

There is no such thing as the .value of a *GROUP* of same-named form field objects. No matter whether they are radio buttons or checkboxes or even text fields.

When you have a group of fields with the same name, they are seen by JavaScript as an *ARRAY* of objects.

So to get the value of a radio button group, you could use code such as this:

function rbGroupValue( group )
{
if ( group.length == null )
{
// will get here if the group consists of only one field, after all:
// so return the value of that one radio button if it is checked, else return null
// (if you prefer, return "" instead of null)
return group.checked ? group.value : null;
}
// if here, we *do* have a group, so...
for ( var g = 0; g < group.length; ++g )
{
if ( group[g].checked ) return group[g].value; // return value of checked button
}
return null; // again, return "" if you prefer
}

*NOW* your code that does

var uscan = form.uscan.value;
becomes this:

var uscan = rbGroupValue( form.uscan );


*** HOWEVER ***

It ain't gonna work with that <form>!!!!

You have this hidden form field *also* named uscan:

<input name="uscan" id="uscan" value="n" checked="checked" type="hidden" />

And, as I said, *ALL* form fields with the same name are turned into an array of that name. So this hidden field *WILL* be in that form.uscan array!

And, since it has a checked property, and since it is the first element in the array, you will always get a value of "n" from rbGroupValue(form.uscan) !!

Why is that hidden form field there with the same name????

fou-lu, i apologize for the wrong category, i must have clicked on the first java thing i saw haha

old pedant, thanks for the great analysis! and the reason i had the hidden field was because i first did a php validation where i set the code to be

if ($uscan == "n"){
print "required fields not filled in";
}

but i switched it to javascript because i wanted the field to highlight and i already had a script for that.

so if i dont need the checkbox to know if the radio buttons haven't been selected yet then i can just get rid of it i guess

I don't think that would work for PHP, anyway. If one of the radio buttons *IS* checked, then you would be getting *TWO* values for that uscan name, and PHP requires that fields with multiple values be named with [] to convert them to a PHP array.

I am *NOT* a PHP programmer, but I think that PHP has an easy answer for this, in any case: isSet.

You should *NOT* depend on JavaScript form validation. Use it for the UI aspects, yes, to make your site more friendly. But what do you do if somebody turns off JavaScript in their browser? Or somebody spoofs your site with a fake copy of your <form>? You should always do thorough server-side validation, no matter what client-side code you use.

yea i get what your saying, buts its already going to be in the admin only area, so i think it'll be fine.

and there probably is a php script out there, but i didnt feel like messing with a new cscript when i had this script.



but anyway, will i still be able to get my form to validate with this javascript? or any for that matter?

i tried putting the groupcheck thing and take out the checkbox but it still didnt even check the field.

should this stay as is:?

if(uscan == "") {
modinputbad('uscan');
var a = "1";
}else {
modinputgood('uscan');
var a = "0";
}

Or maybe
if(uscan == null) {
modinputbad('uscan');
var a = "1";
}else {
modinputgood('uscan');
var a = "0";
}

Depending on what you opted to return as "not found" from that function.

But yes, I would think that would be right.

Try a tiny bit of debugging.

Put an
alert(uscan);
just before that "if" test and see what you get for various situations, buttons clicked on or not.

yep that worked, thanks!

actually, another question...


would the same work for a drop down menu?

actually, another question...


would the same work for a drop down menu?

Why not try it and find out?

well i obviously did, thats why i posted again.

i just want to know if the same script can be used, but only slighty modified or something, or would i have to get a new script

There are several ways to capture the value of a select list:-


var val1 = document.myform.selectlist1.value;

var val2 = document.forms["myform"].selectlist1.value;

var val3 = document.getElementById("selectlist1").value;

ok great thanks

and then should i check to see if its null?

if(casename == "null")

ok great thanks

and then should i check to see if its null?

if(casename == "null")

No, the value is the value defined in the select list.

<select name = "myselect" onchange = "getValue()">
<option value = "0" selected> Select something></option>
<option value = "1"> Select first choice></option>
<option value = "2"> Select second choice></option>
<select>

<script type = "text/javascript">
function getValue() {
var val = document.formname.myselect.value;
alert (val);
if (val == 0) {
alert ("You must make a selection");
return false;
}
}
</script>

that worked first try, thanks alot!

its tooo gooood:thumbsup::thumbsup: