undefined field error message

X

Xerxes

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.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?
 
L

Lee

Xerxes said:
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.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?
Click to expand...


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.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>
 
X

Xerxes

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.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.
 
W

web.dev

Xerxes said:
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".
Click to expand...

The error message is correct.
function getRadioButtonChecked (radio){
for (var i = 0; i < radio.length; i++){
if (radio.checked){
alert(radio+i+' is checked');
return true;
}
}
alert("You must select one of the required options.");
return false;
}
Click to expand...


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"].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>
 
L

Lee

Xerxes said:
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.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')">
Click to expand...


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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Javascrip code wont run properly. 2
Filename undefined for Blob ? 1
Set value after clicking in field 11
Help with code 0
Positioning CSS components 1
Song requests 4
How can I remove the specific error message after regex validation is done? 1
Help me sort out this script 1

Members online

No members online now.
Total: 16 (members: 1, guests: 15)
Robots: 170

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,139
Latest member
JamaalCald

Latest Threads

Top