|
-
Mar 17th, 2005, 03:21 PM
#1
Thread Starter
Member
Javascript and XHTML
This is a very short, simple piece of code with a form and a Javascript function:
Code:
<script type="text/javascript" language="JavaScript">
function doSwitch()
{
if (frm.radIsCode[1].checked == true)
{
frm.radAddCode[0].disabled = true;
frm.radAddCode[1].disabled = true;
}
else
{
frm.radAddCode[0].disabled = false;
frm.radAddCode[1].disabled = false;
}
}
</script>
<form id="frm" name="frm">
<input type="radio" id="radIsCode" name="radIsCode" value="Y" checked="checked" onclick="doSwitch();" />Yes
<input type="radio" id="radIsCode" name="radIsCode" value="N" onclick="doSwitch();" />No
<input type="radio" id="radAddCode" name="radAddCode" value="Y" checked="checked" />Yes
<input type="radio" id="radAddCode" name="radAddCode" value="N" />No
</form>
In the interests of XHTML I have written my HTML code to use both ids and names and for them to be the same value.
I have found that when I start using JavaScript, as in the simple example above, that I then appear to have to index the radio buttons e.g. [0] or [1], obviously this is not terribly meaningful and if for some reason I ever had to change the order of the radio buttons I could potentially have to change all the index values in my code as well.
Is there some way of refering to these buttons by their values?
I would like to be able to put something like
Code:
if (frm.radIsCode.value == 'Y')
Can anyone offer me advise on this?
-
Mar 17th, 2005, 04:06 PM
#2
Re: Javascript and XHTML
The correct (DOM) way is to do:
Code:
if (document.getElementById("radIsCode").value == 'Y')
or of course
Code:
var radIsCode = document.getElementById("radIsCode");
if (radIsCode.value == 'Y')
-
Mar 17th, 2005, 06:33 PM
#3
Re: Javascript and XHTML
You can make the code more general by looping through the radio group and disabling or enabling them when required. That way if you were to add another like in the code below, no changes to the javascript are required:
HTML Code:
<html>
<head>
<script type="text/javascript">
<!--
function doSwitch()
{
theForm = document.getElementById('frm');
if (getValue(theForm.radIsCode) == 'Y' )
{
for (var x = 0; x < theForm.radAddCode.length; x++)
{
theForm.radAddCode[x].disabled = true;
}
}
else
{
for (var x = 0; x < theForm.radAddCode.length; x++)
{
theForm.radAddCode[x].disabled = false;
}
}
}
/* find the value of the select radio button in a group, if none are selected
null is returned
*/
function getValue(rdo)
{
for (var x = 0; x < rdo.length; x++)
{
if (rdo[x].checked)
{
return rdo[x].value;
}
}
return null;
}
//-->
</script>
</head>
<body onload="doSwitch()">
<form id="frm" name="frm">
<input type="radio" id="radIsCode" name="radIsCode" value="Y" checked="checked" onclick="doSwitch();" />Yes
<input type="radio" id="radIsCode" name="radIsCode" value="N" onclick="doSwitch();" />No
<input type="radio" id="radAddCode" name="radAddCode" value="Y" checked="checked" />Yes
<input type="radio" id="radAddCode" name="radAddCode" value="N" />No
<input type="radio" id="radAddCode" name="radAddCode" value="N" />May Be
</form>
</body>
</html>
Notice how I've used the onload event to set the initial state of the radio buttons.
-
Mar 18th, 2005, 04:07 AM
#4
Re: Javascript and XHTML
No two elements may have the same id. If you have radio buttons, you'd best name them like this:
Code:
<input type="radio" name="cpu" value="pentium3" id="cpu_pentium3"/><label for="cpu_pentium3">Pentium 3</label>
<input type="radio" name="cpu" value="pentium4" id="cpu_pentium4"/><label for="cpu_pentium4">Pentium 4</label>
<input type="radio" name="cpu" value="athlon" id="cpu_athlon"/><label for="cpu_athlon">Athlon</label>
<input type="radio" name="cpu" value="athlonxp" id="cpu_athlonxp"/><label for="cpu_athlonxp">Athlon XP</label>
You can use the getElementsByName method (not supported in IE5.0) to get all elements that have a specific name as an array, which gives you access to all radios.
All the buzzt
 CornedBee
"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond Chen
Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.
-
Mar 18th, 2005, 04:31 AM
#5
Re: Javascript and XHTML
I would just leave the name attributes in and remove the Id attributes. These are still accepted in XHTML as long as they are in form elements.
-
Mar 18th, 2005, 04:39 AM
#6
Re: Javascript and XHTML
Both the id and name attributes should stay. They have different purposes.
The name attribute decides the name under which the element is submitted to the server. The id attribute is the element's identifier in the client-side document and thus vital for script manipulations.
All the buzzt
CornedBee
"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond Chen
Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
