Welcome to WebmasterWorld Guest from 54.205.96.97

Forum Moderators: open

javascript form element test

testing for a selected radio button

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

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



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 Jun 28, 2002 (gmt 0)

10+ Year Member



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 Jun 28, 2002 (gmt 0)

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



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 Jun 28, 2002 (gmt 0)

10+ Year Member



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 Jun 28, 2002 (gmt 0)

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



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 Jun 28, 2002 (gmt 0)

10+ Year Member



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 Jun 28, 2002 (gmt 0)

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



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 Jun 28, 2002 (gmt 0)

10+ Year Member



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 Jun 28, 2002 (gmt 0)

10+ Year Member



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

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



mavherick,

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

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

10+ Year Member



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 Jun 28, 2002 (gmt 0)

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



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 Jun 28, 2002 (gmt 0)

10+ Year Member



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 Jun 29, 2002 (gmt 0)

10+ Year Member



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;
}

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month