468,771 Members | 1,962 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,771 developers. It's quick & easy.

Validating Radio Buttons in JavaScript

I am attempting to validate radio buttons in Netscape with JavaScript.

Everything works excellent in Explorer, but refuses to work in Netscape
(all versions).
=========== JAVASCRIPT CODE ========================

function ValidateTest()
{
var q1 = false;
var q2 = false;

for (counter = 0; counter < TEST.Q1.length; counter++)
{
if (TEST.Q1[counter].checked)
q1 = true;
}
for (counter = 0; counter < TEST.Q2.length; counter++)
{
if (TEST.Q2[counter].checked)
q2 = true;
}

if (!q1)
{
alert("Please select an answer for Question #1.");
return false;
}
else if (!q2)
{
alert("Please select an answer for Question #2.");
return false;
}

document.TEST.submit();
}

=========== HTML FORM CODE =========================

<form name="TEST" method="post" action="evaluation-e.cfm">
<ol>
<li>Question 1?<br>
<input type="radio" name="Q1" value="1">1<br>
<input type="radio" name="Q1" value="2">2<br>
<input type="radio" name="Q1" value="3">3<br>
<input type="radio" name="Q1" value="4">4<br>
<input type="radio" name="Q1" value="5">5<br><br>
</li>
<li>Question 2?
<br><input type="radio" name="Q2" value="1">1<br>
<input type="radio" name="Q2" value="2">2<br>
<input type="radio" name="Q2" value="3">3<br>
<input type="radio" name="Q2" value="4">4<br>
<input type="radio" name="Q2" value="5">5<br><br>
</li>
</ol>
<input type="button" value="Continue" onClick="ValidateTest()">
</form>

================================================== ==

The JavaScript error that I receive is the following:

"TEST is not defined."

================================================== ==

TEST is the name of my form. Is there any quick fix that I can do to
the code above to make it work in Netscape?

Sincerely,

Marc

Jul 23 '05 #1
6 1785


<!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>
<title>feh!</title>
<script type="text/javascript">
//<![CDATA[

function isChecked(radgrp)
{
var i = radgrp.length;
do
if (radgrp[--i].checked)
return true;
while (i);
return false;
}

function validateTest(els)
{
var focus_me = null, msg = "";
if (!isChecked(els.Q1))
{
msg += " Question #1\n";
focus_me = focus_me || els.Q1[0];
}
if (!isChecked(els.Q2))
{
msg += " Question #2\n";
focus_me = focus_me || els.Q2[0];
}
if (msg != "")
{
var prefix = "\nThe following Question(s) were not answered:\n\n";
var suffix = "\nPlease correct and re-submit. Thank you.\n";
alert(prefix + msg + suffix);
if (focus_me)
focus_me.focus();
return false;
}
return true;
}

//]]>
</script>
</head>
<body>
<form name="TEST" method="post" action="evaluation-e.cfm"
onsubmit="return validateTest(this.elements)">
<ol>
<li>Question 1?<br>
<input type="radio" name="Q1" value="1">1<br>
<input type="radio" name="Q1" value="2">2<br>
<input type="radio" name="Q1" value="3">3<br>
<input type="radio" name="Q1" value="4">4<br>
<input type="radio" name="Q1" value="5">5<br><br>
</li>
<li>Question 2?
<br><input type="radio" name="Q2" value="1">1<br>
<input type="radio" name="Q2" value="2">2<br>
<input type="radio" name="Q2" value="3">3<br>
<input type="radio" name="Q2" value="4">4<br>
<input type="radio" name="Q2" value="5">5<br><br>
</li>
</ol>
<input type="submit" value="Continue">
</form>
</body>
</html>

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #2
On 7 Dec 2004 10:26:47 -0800, sakms <ma**************@pwgsc.gc.ca> wrote:

[snip]
Everything works excellent in Explorer, but refuses to work in Netscape
(all versions).
IE allows the name or id of an element to be a reference to that element.
Frankly its nonsense and most browsers treat it as an error. The correct
way to refer to the form is

document.forms['form-name-or-id']

or

document.forms[n]

where n is a number representing the 'n'th form in the document.

However, there's a simpler way if you modify how the function is called.

var questions = 2;

function validate(form) {var element;
for(var i = 1, j, n; i <= questions; ++i) {
/* Obtain a reference to the ith question. */
element = form.elements['Q' + i];
j = 0; n = element.length;

/* At the end of this loop, j will hold
* the index of the selected value.
*/
while((j < n) && element[j].checked) {++j;}

/* If no item is selected, j will
* equal the number of items.
*/
if(j == n) {
alert('Please select an answer for question ' + i);
return false;
}
}
return true;
}

and call it with

<form ... onsubmit="return validate(this);">

This way, you don't even need to name the form[1].

[snip]
<form name="TEST" method="post" action="evaluation-e.cfm">
<ol>
<li>Question 1?<br>
<input type="radio" name="Q1" value="1">1<br>
<input type="radio" name="Q1" value="2">2<br>
<input type="radio" name="Q1" value="3">3<br>
<input type="radio" name="Q1" value="4">4<br>
<input type="radio" name="Q1" value="5">5<br><br>


This should *really* be a nested list:

<ol>
<li>Blah blah blah?
<ol>
<li><label><input type="radio" name="Q1" value="...">
Blah</label></li>
<li><label><input type="radio" name="Q1" value="...">
Blah</label></li>
<li><label><input type="radio" name="Q1" value="...">
Blah</label></li>
<li><label><input type="radio" name="Q1" value="...">
Blah</label></li>
</ol>
</li>
<li>Blah blah blah?
<ol>
<li><label><input type="radio" name="Q2" value="...">
Blah</label></li>
<li><label><input type="radio" name="Q2" value="...">
Blah</label></li>
<li><label><input type="radio" name="Q2" value="...">
Blah</label></li>
<li><label><input type="radio" name="Q2" value="...">
Blah</label></li>
</ol>
</li>
</ol>

and styled with

ol {
list-style-type: decimal;
margin: 1em 0 0 2em;
padding: 0;
}
ol ol {
list-style-type: lower-alpha;
margin: 0 0 1em 1em;
}

Or, if you're not interested in having inner numbering, change the nested
lists to UL elements, and the second rule to:

ol ul {
list-style-type: none;
margin: 0 0 1em 0;
}

[snip]

Hope that helps,
Mike
[1] And you shouldn't: forms should be identified using the id attribute
unless you're supporting an old browser like NN4 which doesn't support ids.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #3
Michael Winter wrote:

(snip)
/* At the end of this loop, j will hold
* the index of the selected value.
*/
while((j < n) && element[j].checked) {++j;} /* If no item is selected, j will
* equal the number of items.
*/


(snip)

Mike:

while((j < n) && !element[j].checked) {++j;}

like mine better, tho ;)

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4
On Tue, 07 Dec 2004 19:34:02 GMT, Rob B <fe******@hotmail.com> wrote:

[snip]
Mike:

while((j < n) && !element[j].checked) {++j;}

like mine better, tho ;)


But it has the overhead of a function call. :P

An alternative way of writing it would be:

function isChecked(group) {
var i = group.length;
while(i--) {if(group[i].checked) {return true;}}
return false;
}

which avoids the 'do'.

By the way, you didn't alter the mark-up to conform to XHTML rules. All
those BR and INPUT elements should end />. Well, the BR elements shouldn't
be there at all as I said in my post, but if they must, they should be <br
/>. :)

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #5
JRS: In article <11**********************@f14g2000cwb.googlegroups .com>
, dated Tue, 7 Dec 2004 10:26:47, seen in news:comp.lang.javascript,
sakms <ma**************@pwgsc.gc.ca> posted :
I am attempting to validate radio buttons in Netscape with JavaScript.


Another approach would be to add a new member to every set of buttons,
default checked; put all of them at the bottom marked "Office Use Only",
and test on submit that each is now clear.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #6
Dr John Stockton wrote:
[...]
Another approach would be to add a new member to every set of buttons,
default checked; put all of them at the bottom marked "Office Use Only",
and test on submit that each is now clear.


And if they had style="display: none;" they can't be clicked on, saving
user confusion and defeating attempts by contrary questioners to select
them for the sole purpose of annoying the examiner...

--
Rob
Jul 23 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

6 posts views Thread by Craig Keightley | last post: by
6 posts views Thread by Blinky | last post: by
6 posts views Thread by Advo | last post: by
2 posts views Thread by forbes | last post: by
1 post views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.