I am having problems getting the value of a radio button to appear. I have a list of radio buttons and when clicked they call a function. Right now I am just making sure the correct value of the radio button is being displayed. For some reason the value of the first radio button is displayed every time the function is called, that value is 1.
Here is an example of my code:

JavaScript:

function updateframetype() {
var frameid = document.getElementById("frametype").value;
alert(frameid);
}


And here is my html for my radio buttons. This is inside a while statement that pulls all the ids from a DB.


<input type="radio" value="<?PHP echo $framequery['frame_id'];?>" onclick="updateframetype();" name="frametype" id="frametype">


Could someone point me in the correct direction on how to get the value to display instead of having the very first value display every time? I hope this makes sense.
Thanks

it should've been:

you missed "selectedIndex"

document.getElementById("frametype").selectedIndex.value;

Thanks for the reply Orbitz, I added the selectedIndex to the getElementById and for some reason it is not working. I am getting an error saying that it is null or not an object when I click on a radio button.

Here are my changes:


function updateframetype() {
var frameid = document.getElementById("frametype").selectedIndex.value;
alert(frameid);
}


Any thoughts on why it would be doing this?
Thanks

Thanks for the reply Orbitz, I added the selectedIndex to the getElementById and for some reason it is not working. I am getting an error saying that it is null or not an object when I click on a radio button.

Here are my changes:


function updateframetype() {
var frameid = document.getElementById("frametype").selectedIndex.value;
alert(frameid);
}


Any thoughts on why it would be doing this?
Thanks
Try the 'checked' variable. :) Radio/checkboxes only have values if they're 'checked' and the value is the same weather off or on.

I think I was confused with dropdown list and someething else; however, you can do just this:


<script type="text/javascript">
<!--
function updateframetype(value) {
alert(value);
}
//-->
</script>
<form name="myform">
<input type="radio" value="tui1" onclick="updateframetype(this.value);" name="frametype" id="frametype">
<input type="radio" value="tui2" onclick="updateframetype(this.value);" name="frametype" id="frametype">
<input type="radio" value="tui3" onclick="updateframetype(this.value);" name="frametype" id="frametype">
</form>

You cannot have multiple elements with the same id. Period. Multiple radio buttons are still multiple elements, even if they belong to the same logical group. You should remove the id="frametype", unless you add something to make each distinct (such as appending your foreach iterator variable), because otherwise you have invalid [X]HTML.

Note that this restriction does not apply to the "name" attribute, only "id". So you are correct in assigning the same "name" to each one.

Unfortunately the only way to determine which one of these is checked at a given time is to iterate through them. Since they all have the same "name", this means that radio group is treated as an array of objects, with the name of the array being the "name" parameter you specified ("frametype" in this case):

var form = document.forms[0];
for (var i = 0; i < form.frametype.length; i++) {
if (form.frametype[i].checked) {
// do something with form.frametype[i]
break;
}
}


If your page has multiple forms, change forms[0] to forms[n] or better yet forms['formname'].

makes sense, thanks. But if Id is not needed, then there will be no need to go thru the loop for this case:


<script type="text/javascript">
<!--
function updateframetype(value) {
alert(value);
}
//-->
</script>
<form>
<input type="radio" value="val1" name="test" onclick="updateframetype(this.value);"> value 1
<input type="radio" value="val2" name="test" onclick="updateframetype(this.value);"> value 2
</form>