Solved

Radio Button Selected Value

Posted on 2003-07-31
11
384,055 Views
Last Modified: 2012-05-04
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?




0
Comment
Question by:calvinfoo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
11 Comments
 
LVL 1

Expert Comment

by:jsCraig
ID: 9045945
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:-)
0
 
LVL 1

Author Comment

by:calvinfoo
ID: 9046001
<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... :(

0
 
LVL 2

Expert Comment

by:gamer_2055
ID: 9046034
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>
0
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 11

Expert Comment

by:hart
ID: 9046320
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
0
 
LVL 1

Author Comment

by:calvinfoo
ID: 9046408
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
0
 
LVL 11

Accepted Solution

by:
hart earned 50 total points
ID: 9046451
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



0
 
LVL 1

Author Comment

by:calvinfoo
ID: 9046495
great, now I understand the problem... :)
boy.. i hate javascript...
0
 
LVL 11

Expert Comment

by:hart
ID: 9046529
:-)

Regards
Hart
0
 

Expert Comment

by:RobertSimpson
ID: 10566052
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.
0
 
LVL 10

Expert Comment

by:dennis_maeder
ID: 14487698
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 26157326
@dennis_maeder: Why the JS 1.2 your code would work in any JS implementation
0

Featured Post

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question