Javascript question - Democratic Underground

billyskank

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 04:29 AM
Original message

Javascript question

Edited on Tue May-16-06 04:30 AM by billyskank

I am a n00b when it comes to Javascript. What is an elegant way of checking the value of a radio group, that is, the particular button that is selected?

You group the radio buttons by giving them all the same name, and I found that when I tried to reference the group by name, all I got was the value of the first button in the group, regardless of what is selected.

The only technique I have come across so far is to iterate through all the items in the form, examine the name of each item to see if it is a member of the radio group and, if it is, examine its "checked" property.

But this seems fugly to me. Is this really the way to do it? Or am I just being a :dunce:?

Printer Friendly | Permalink | | Top

GirlinContempt

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 09:36 AM
Response to Original message

1. I'm not sure of another way, hon

Printer Friendly | Permalink | | Top

billyskank

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 09:43 AM
Response to Reply #1

2. Ok, thanks anyway

:hi:

Printer Friendly | Permalink | | Top

Dirty Hippie

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 09:47 AM
Response to Original message

3. Here you go

Short Answer - Yes you have to iterate

HTML ****************************

MC<input type="radio" name="creditCard" value="MC"><br / >
VISA<input type="radio" name="creditCard" value="VISA"><br / >
Discover<input type="radio" name="creditCard" value="Discover">

JavaScript ****************

var radioCheckedIndex = -1;
for(i=0; i<document.formName.creditCard.length; ++i){
if(document.formName.creditCard.checked)
radioCheckedIndex = i;
break;
}

if(radioCheckedIndex == -1){
alert("You failed to check a credit card!")
}
else{
alert(document.formName.creditCard.value)
}

A group of radio buttons should always have the same name so they function as a group. A group of radio buttons allows the user to check only one button at a time.

If you preselect a button by adding the attribute checked = "checked" to one of the input tags you do not need to validate the radio group because one option will always be checked. However, often you do not want to preselect a button. In that case, you may need to validate that the user checked a button.

To validate the radio group, we first declare a variable radioCheckedIndex and set its value to -1. Then we loop through the radio group array looking at each radio element's checked property to see if it equals true. If we find a checked radio element, the variable radioCheckedIndex is set the value of i which is the loop counter and we break from the loop.

After the loop is done, radioCheckedIndex will have a value of -1 if the user failed to check a button or it will equal the index of the checked radio element. We can then use radioCheckedIndex to obtain the value of the checked radio button.

Printer Friendly | Permalink | | Top

billyskank

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 09:50 AM
Response to Reply #3

4. Did dcforum eat your array subscript there?

Otherwise, I do not understand how that works.

Printer Friendly | Permalink | | Top

Dirty Hippie

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 09:58 AM
Response to Reply #4

5. A radio button group

is already an array.

You access the individual buttons using

document.NameOfYourForm.NameOfYourRadioGroup.checked

if you want the value of the checked property (true or false) or

document.NameOfYourForm.NameOfYourRadioGroup.value

if you want the value of the button.

Printer Friendly | Permalink | | Top

billyskank

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 10:02 AM
Response to Reply #5

6. That didn't work for me

When I referenced document.NameOfYourForm.NameOfYourRadioGroup.value what I got was always the value of the first button in the group, regardless of which one was checked.

Printer Friendly | Permalink | | Top

anarch

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 10:25 AM
Response to Original message

7. there is no elegant way to do anything in javascript

Just kidding, I really don't know...the code always does look sort of fugly to me though. But I am a total troglodyte, so I wouldn't trust my opinion.

Printer Friendly | Permalink | | Top

mainegreen

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 11:44 AM
Response to Original message

8. Crap, you do NOT have to iterate!

Edited on Tue May-16-06 11:45 AM by mainegreen

For the sake of your own sanity get prototype and read this how to guide. Then you can just do something like this:

var value=$F('my_thingy');

and it works in any browser for any form item! Drop down, radio, checkbox, text area whatever!

Printer Friendly | Permalink | | Top

no name no slogan

(1000+ posts) Send PM | Profile | Ignore

Tue May-16-06 01:17 PM
Response to Original message

9. This is a bit simpler (and smaller, code-wise)

Yes, you still have to do the iterations, but you do NOT have to check to see whether or not the button is in the same radio group-- the fact that it shares name/id attribute is enough to distinguish it as part of the group.

Here's the code:

<html>
<head>
<title>Radio Button Values</title>
<script language="javascript" type="text/javascript">
function getVal() {
  for(n = 0; n < frm.rad.length; n++) {
    if(frm.rad.checked) {
      alert(frm.rad.value);
    }
  }
}
</script>
</head>
<body>
<form name="frm" id="frm" method="post" action="">

<input type="radio" name="rad" id="rad" value="0" checked="checked">0<br />
<input type="radio" name="rad" id="rad" value="1">1<br />
<input type="radio" name="rad" id="rad" value="2">2<br /><br />
<input type="button" value="GO" illegal code"getVal()" />

</form>

</body>
</html>

Basically, the function iterates through each item in the "rad" array (i.e., each radio button) and displays an alert with the radio button value when you click on the "GO" button.

Also, the function itself is only six lines of code, which means less page weight and easier manageability.

Give it a shot and let me know. :hi:

Printer Friendly | Permalink | | Top

DU AdBot (1000+ posts)

Fri May 10th 2024, 07:46 PM
Response to Original message

Advertisements [?]

Top

Powered by DCForum+ Version 1.1 Copyright 1997-2002 DCScripts.com
Software has been extensively modified by the DU administrators

Important Notices: By participating on this discussion board, visitors agree to abide by the rules outlined on our Rules page. Messages posted on the Democratic Underground Discussion Forums are the opinions of the individuals who post them, and do not necessarily represent the opinions of Democratic Underground, LLC.