-
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?
-
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')
-
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.
-
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.
-
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.
-
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.
