Radio Button Selected Value

AFAIK, to retrieve the selected value for <SELECT> in a single line javascript, I have the following code:
this.form.areaID.options[this.form.areaID.selectedIndex].value

If I were wanted to do the same, retrive the selected value for <RADIO> in a single line javascript, how?




LVL 1
calvinfooAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jsCraigCommented:
document.form.radioButtonName.checked;

is true if the button is checked, false if not.

eg:
if (document.form.radioButtonName.checked) {
 // checked. Do this.
} else {
 // not checked. Do that.
}

C:-)
calvinfooAuthor Commented:
<SCRIPT LANGUAGE="JavaScript">
function openWindow(url, w, h, rs, sb) {
var windowprops = "width=" + w + ",height=" + h + ",resizable=" + rs + ",scrollbars=" + sb;
//windowprops += "center=yes;border=thin;help=no;status=no;locationbar=no;statusbar=no;locationbar=no;menubar=no;toolbar=no";

popup = window.open(url,'remote',windowprops);
}
</SCRIPT>

<FORM ACTION="newsletter.asp" METHOD="post" NAME="formemail">
  <INPUT TYPE="radio" NAME="format" VALUE="2">HTML
  <INPUT TYPE="radio" NAME="format" VALUE="1" CHECKED>Plain Text
  <TEXTAREA COLS="64" ROWS="12" NAME="bodytext"><%=strBodyText %></TEXTAREA>
  <INPUT TYPE="Button" VALUE="Preview" ONCLICK="openWindow('newsletter_preview.asp?bodytext='+this.form.bodytext.value+'&format='+this.form.format.checked, 630, 400, 'yes', 'yes');">
</FORM>

note:
1. this sample form is simplified, may contains minor error
2. openWindow is a simplied javascript function of a pupup window

I tried your suggestion on "this.form.format.checked", but doesn't seems to be working... :(

gamer_2055Commented:
This probly isn't the best way to do what you want, but it gets it done.

<html>
<head>
<title>Selected Radio Buttons</title>
<script language="JavaScript">
<!--
function subForm()
{
var j = 0;
var radio_buttons = new Array();
var the_form = window.document.forms[0];
for(var i=0; i<the_form.length; i++)
      {
      var temp = the_form.elements[i].type;
      if((temp == "radio") && (the_form.elements[i].checked)) { radio_buttons[j] = the_form.elements[i].value; j++; }
      }
for(var k=0; k<radio_buttons.length; k++)
      {
      document.write(radio_buttons[k] + "<br>");
      }
}
//-->
</script>
</head>
<body>
<form action="javascript: subForm();">
<input type="radio" name="r_1" value="A">A<br>
<input type="radio" name="r_1" value="B">B<br>
<input type="radio" name="r_1" value="C">C<br><br>
<input type="radio" name="r_2" value="D">D<br>
<input type="radio" name="r_2" value="E">E<br>
<input type="radio" name="r_2" value="F">F<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Download eBook
hartCommented:
how about this.....

<SCRIPT LANGUAGE="JavaScript">
function openWindow(url, w, h, rs, sb) {
var windowprops = "width=" + w + ",height=" + h + ",resizable=" + rs + ",scrollbars=" + sb;
//windowprops += "center=yes;border=thin;help=no;status=no;locationbar=no;statusbar=no;locationbar=no;menubar=no;toolbar=no";

popup = window.open(url,'remote',windowprops);
}
</SCRIPT>

<FORM ACTION="newsletter.asp" METHOD="post" NAME="formemail">
 <INPUT TYPE="radio" NAME="format" VALUE="2" onclick="javascript:if(this.checked){document.formemail.radioval.value='2';}">HTML
 <INPUT TYPE="radio" NAME="format" VALUE="1" CHECKED onclick="javascript:if(this.checked){document.formemail.radioval.value='1';}">Plain Text
 <TEXTAREA COLS="64" ROWS="12" NAME="bodytext"><%=strBodyText %></TEXTAREA>
 <INPUT TYPE="Button" VALUE="Preview" ONCLICK="openWindow('newsletter_preview.asp?bodytext='+this.form.bodytext.value+'&format='+this.form.radioval.value, 630, 400, 'yes', 'yes');">
<INPUT TYPE="hidden" name="radioval" value='1'>
</FORM>

With my solution you won't have to loop through the radio buttons.
just the hidden filed will do the trick..


Regards
Hart
calvinfooAuthor Commented:
isn't there anyway direct get the value of the selected radio value like the example I have?


this.form.areaID.options[this.form.areaID.selectedIndex].value
hartCommented:
the thing is radio buttons do not work like select boxes.

say you have two different radiobuttons

i.e <input type="radio" name="rad1" value="1">

and <input type="radio" name="rad2" value="2">

then their values can be recieed by

document.formemail.rad1.value
and
document.formemail.rad1.value..


but say you have multiple radio buttons with same name
i.e <input type="radio" name="commonrad" value="1">
and <input type="radio" name="commonrad" value="2">

now this has become an array.
so then you have to run a loop to get the value..

i.e document.formemail.commonrad[0].value will give 1
and document.formemail.commonrad[1].value will give 2

also you will have to check first which one is checked.

to avoid all this i had put an hiddenfield and just assigned the value of the radio button checked so that it can be accessed in a single line of code...

Regards
Hart



Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
calvinfooAuthor Commented:
great, now I understand the problem... :)
boy.. i hate javascript...
hartCommented:
:-)

Regards
Hart
RobertSimpsonCommented:
I realize that it is kind of late, but I just ran across this while looking for something else.

Anyway, how about this code (go to AllWordSearch.com to see the whole thing in operation):

<input type=radio name="search" value="words" checked>
<input type=radio name="search" value="phrase">

<input type=radio name="where" value="page" checked>
<input type=radio name="where" value="title">

search.cgi?search='+(search[0].checked?search[0].value:'')+(search[1].checked?search[1].value:'')
+'&where='+(where[0].checked?where[0].value:'')+(where[1].checked?where[1].value:'')

There's two sets of two radio buttons there, and it's all in a single line, just like you asked.
Dennis MaederCommented:
I use an entirely different strategy:
I set up a global (and persistent) variable, say rdat, in a <head> javascript block
<script type='text/javascript' language='javascript1.2'>
  rdat='';
  ...
</script>

then for each radio button I add a short onclick statement:
<input type=radio name='radbut' value='X' onclick='rdat=value'>
<input type=radio name='radbut' value='Y' onclick='rdat=value'>
...
This way the selected radio button is always available in the variable rdat. (Or you could use a hidden input value)
e.g. alert('radio button value='+rdat);
DLM
Michel PlungjanIT ExpertCommented:
@dennis_maeder: Why the JS 1.2 your code would work in any JS implementation
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.