Welcome to WebmasterWorld Guest from 54.161.99.20

Forum Moderators: open

Message Too Old, No Replies

javascript form element test

testing for a selected radio button

     
4:55 pm on Jun 28, 2002 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15755
votes: 0


I just want to check to see if one of a group of 4 radio buttons is selected. What do you use?

document.form.radioname[??].??

is it like selects with selectedIndex and value or what, I can't seem to make it work. I am out to lunch this morning.

5:09 pm on June 28, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2002
posts:169
votes: 0


I'm not sure I understand your question, but I'll try anyway.

If I remember correctly, let's say we have a group of 4 radio button as follow:

<input type="radio" name="group1" value="1" />
<input type="radio" name="group1" value="2" />
<input type="radio" name="group1" value="3" />
<input type="radio" name="group1" value="4" />

Now if you want to access the value of group1:
document.form.group1.value

So you can simply test with that value if the field you want is selected.

You might want to make sure one of those is selected by default to avoid uninitialized variables in case no selection is made by the user.

5:16 pm on June 28, 2002 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15755
votes: 0


thx mavherick,

I realize now that I wasn't quite clear enough.

If the group is uninitialized, no default selection, and the user doesn't select one what can you use to test it? I just want an alert that says "please select" if there is nothing selected.

5:17 pm on June 28, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


You look through the input elements and look for:

document.form.radioname[i].checked

If true, then that is the one selected.

5:20 pm on June 28, 2002 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15755
votes: 0


perfect, that was what I couldn't think of, now if I just get my brain in gear I can stop asking stupid questions and finish this.

that's twice moonbiter, thx

5:24 pm on June 28, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


Here's a sample I think works ...

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function check(){
for (i=0;i<document.form.group1.length;i++){
if(document.form.group1[i].checked){
alert(document.form.group1[i].value);
}
}
}

</script>

</head>

<body>
<form name="form" action="">
<input type="radio" name="group1" value="1" />
<input type="radio" name="group1" value="2" />
<input type="radio" name="group1" value="3" />
<input type="radio" name="group1" value="4" />
<button onclick="check();">Click!</button>
</form>

</body>
</html>

5:30 pm on June 28, 2002 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15755
votes: 0


I already got it working, I just was fixated on having 4 if statements and couldn't get past it. I just did this,

var wherecheck = 1;
for (i=0;i<4;i++) {
if (document.form1.whereFrom[i].checked) wherecheck=0;
}

I needed to use the variable later.

5:30 pm on June 28, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2002
posts:169
votes: 0


I'd like to simply add that if no radio button is selected would the following work??

if (document.form.group1.value == undefined) {
alert('Please select an option!');
}

It seems to me it could but who knows...

mavherick

5:31 pm on June 28, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:May 1, 2002
posts:351
votes: 0


Way cool. Every example I can see of how other people do it helps. Thanks.
5:37 pm on June 28, 2002 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15755
votes: 0


mavherick,

that was what I was originally trying, just fell through every time.

6:00 pm on June 28, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2002
posts:169
votes: 0


You're absolutely right. Maybe because the value of document.form.group1.value gets set only when the form is submitted? I can't really think of anything else.
6:05 pm on June 28, 2002 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15755
votes: 0


I think it is because group1.value is not valid. Without an index, group1[0].value, the attribute "value" doesn't apply. There is no value to the group1 obj.
6:44 pm on June 28, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:June 3, 2002
posts:169
votes: 0


Thanks jatar_k, this is very enlightening. You see, I've always thought of radio button like a drop down box. I guess I wrongly assumed that since I can refer to the value of group1 in coldfusion, I could do the same in JavaScript. There is probably some manipulation going on by coldfusion to assign values to such form fields.
10:02 pm on June 29, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:June 7, 2002
posts:475
votes: 0


for(button in document.form.group1) if(document.form.group1[button].checked) whereChecked=document.form.group1[button].value;

That'll do it in one statement :), although I think that if you give each button a value, it might go through the array twice, once as a numerical array and once as an associative array -- but I could be wrong. This approach has the advantage that you don't need to hard-code how many elements there are (ease of maintenance, i.e. if at a later date you want to add or remove options).

Another approach cuts down the number of times to loop iterates, but the saving is probably minimal:

for(button in document.form.group1) if(document.form.group1[button].checked){
whereChecked=document.form.group1[button].value;
break;
}

An alternative:

for(i=0; i<document.form.group1.length; i++) if(document.form.group1[i].checked){
whereChecked=document.form.group1[i].value;
break;
}