undefined field error message

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Xerxes - 27 Feb 2006 16:07 GMT

Hi,
I have a script that is supposed to check if one of the radio buttons
in a form is checked and either display an "alert" or go to another
page.

<html>
<head>
<title></title>
</head>
<body>
<script type="text/Javascript">
function getRadioButtonChecked (radio){
for (var i = 0; i < radio.length; i++){
if (radio[i].checked){
return true;
}
}
return false;
}
</script>

<form name="myform" method="post" action="somefile.php">
<input id="req_any" name="req_any" type="radio" value="AVM-MC1"
onClick="if (this.checked)
document.getElementById('qty_AVM-MC1').value='1'; else
document.getElementById('qty_AVM-MC1').value='0'">Product1<br />
<input type="hidden" id="qty_AVM-MC1" name="qty_AVM-MC1" value="0">
<input id="req_any" name="req_any" type="radio" value="AVM-HTC1"
onClick="if (this.checked)
document.getElementById('qty_AVM-HTC1').value='1'; else
document.getElementById('qty_AVM-HTC1').value='0'">Product2<br />
<input type="hidden" id="qty_AVM-HTC1" name="qty_AVM-HTC1" value="0">
<br />
<span style="margin-left:40%;">
<input name="OK" type="submit" value="Add" onClick="if
(getRadioButtonChecked(document.getElementById('req_any'))){document.location.href='anotherfile.php';
return true;} else{ alert('You must select one of the required
options.'); return false;}">
</span>
<span style="margin-left:50;">
<input name="Cancel" type="button" value="Cancel"
onClick="document.location.href='cancel.php'">
</span>
</form>
</body>

When I click on the "Add" button, I get a javascript error saying
"radio is not defined". What am I doing wrong?

Reply to this Message

Lee - 27 Feb 2006 16:48 GMT

Xerxes said:

>Hi,
>I have a script that is supposed to check if one of the radio buttons
[quoted text clipped - 44 lines]
>When I click on the "Add" button, I get a javascript error saying
>"radio is not defined". What am I doing wrong?

Arranged roughly from serious to minor:

1. You've got two elements with the same id, which is illegal.
2. The action of your form specifies one URL, but the onclick handler of your
submit button specifies another. Maybe you just forgot which bogus name you
were using?
3. You're using getElementById() to get a reference to an element in the same
form.
4. You're validating in the onclick handler of the submit button instead of in
the onsubmit handler of the form.
5. You're including too much Javascript in-line with your HTML instead of in
functions in a <script> block.
6. You've got a script block in the body that would be better in the head.

<html>
<head>
<title></title>
<script type="text/Javascript">
function getRadioButtonChecked (radio){
for (var i = 0; i < radio.length; i++){
if (radio[i].checked){
return true;
}
}
alert('You must select one of the required options.');
return false;
}
</script>
</head>
<body>
<form name="myform"
method="post"
action="somefile.php"
onsubmit="return getRadioButtonChecked(req_any)">
<input name="req_any"
type="radio"
value="AVM-MC1"
onclick="this.form.qty_AVM_MC1=this.checked?1:0">Product1<br />
<input type="hidden"
id="qty_AVM-MC1"
name="qty_AVM-MC1"
value="0">
<input name="req_any"
type="radio"
value="AVM-HTC1"
onclick="this.form.qty_AVM_HTC1=this.checked?1:0">Product2<br />
<input type="hidden"
id="qty_AVM-HTC1"
name="qty_AVM-HTC1"
value="0">
<br />
<span style="margin-left:40%;">
<input name="OK"
type="submit"
value="Add">
</span>
<span style="margin-left:50;">
<input name="Cancel"
type="button"
value="Cancel"
onClick="document.location.href='cancel.php'">
</span>
</form>
</body>
</html>

Reply to this Message

Xerxes - 28 Feb 2006 02:09 GMT

Hi Lee,
thanks a lot for the info.
The page is generated dynamically through a php file. I made the
changes you suggested and thsi the resuting page, which seems to
satisfy your suggestions. Thejavascript console still shows the same
error message: "error: radio is not defined".

<html>
<head>
<title></title>
<script type="text/Javascript">
function getRadioButtonChecked (radio){
for (var i = 0; i < radio.length; i++){
if (radio[i].checked){
alert(radio+i+' is checked');
return true;
}
}
alert("You must select one of the required options.");
return false;
}
</script>
</head>

<body topmargin="70">
<form name="error_form" method="post" action="add_additional.php"
onsubmit="return getRadioButtonChecked('req_any')">
<div class="msgDiv">
<div width="300" class="contentMsgHeader">
Error message is printed here...<br />
</div>
<span class="contentMsg">
<input class="errorFormInput"
name="req_any"
type="radio"
value="AVM-MC1"
onClick="this.form.qty_AVM-MC1.value=if
(this.checked)?1:0">Prodcut1</span><br />
<input type="hidden"
id="qty_AVM-MC1"
name="qty_AVM-MC1" value="0">
<span class="contentMsg">
<input class="errorFormInput"
name="req_any"
type="radio"
value="AVM-HTC1"
onClick="this.form.qty_AVM-HTC1.value=if
(this.checked)?1:0">Prodcut2</span><br />
<input type="hidden"
id="qty_AVM-HTC1"
name="qty_AVM-HTC1"
value="0">
</div>
</div>
<br /><span style="margin-left:40%;">
<input name="OK"
type="submit"
value="Add Additional">
</span>
<span style="margin-left:50;">

<input name="Cancel"
type="button"
value="Cancel"
onClick="document.location.href='cancel_addition.php'">
</span>
</form>
</body>

Thanks for your help.

Reply to this Message

web.dev - 28 Feb 2006 02:53 GMT

> Hi Lee,
> thanks a lot for the info.
> The page is generated dynamically through a php file. I made the
> changes you suggested and thsi the resuting page, which seems to
> satisfy your suggestions. Thejavascript console still shows the same
> error message: "error: radio is not defined".

The error message is correct.

> function getRadioButtonChecked (radio){
> for (var i = 0; i < radio.length; i++){
[quoted text clipped - 6 lines]
> return false;
> }

You have an input element with the value of "req_any" for the name
attribute. When the form gets submitted, you pass a _string_ to your
function getRadioButtonChecked. However, in your function, you're
trying to use "radio" as an object, when in reality you passed to it a
string. Try modifying your code like so:

javascript:

function getRadioButtonChecked(myForm)
{
for(var i = 0; i < myForm.elements["req_any"].length; i++)
{
if(myForm.elements["req_any"][i].checked)
{
alert("radio " + i + " is checked");

return true;
}
}

alert("You must select one of the required options.");

return false;
}

html:

<form [...add form attributes...] onsubmit = "return
getRadioButtonChecked(this)">
[...add your form controls...]
</form>

Reply to this Message

Xerxes - 28 Feb 2006 05:39 GMT

Thanks alot for your help. Your suggestion worked.

Reply to this Message

Lee - 28 Feb 2006 14:42 GMT

Xerxes said:

>Hi Lee,
>thanks a lot for the info.
[quoted text clipped - 23 lines]
><form name="error_form" method="post" action="add_additional.php"
>onsubmit="return getRadioButtonChecked('req_any')">

Remove the quotes from around req_any.
You want to pass a reference to the form element req_any,
not the name of the element.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2006

undefined field error message