How to get the selected radio button s value

Question

I   m having some strange problem with my JS program  I had this working properly but for some reason it   s no longer working  I just want to find the value of the radio button  which one is selected  and return it to a variable  For some reason it keeps returning undefined   Here is my code   function findSelection field        var test    document theForm     field      var sizes   test       alert sizes           for  i 0  i  lt  sizes length  i                  if  sizes i  checked  true                alert sizes i  value     you got a value                     return sizes i  value                      submitForm   function submitForm          var genderS    findSelection  genderS        alert genderS       HTML    lt form action   n  name  theForm  gt        lt label for  gender  gt Gender   lt  label gt       lt input type  radio  name  genderS  value  1  checked gt  Male      lt input type  radio  name  genderS  value  0   gt  Female lt br gt  lt br gt       lt a href  javascript  submitForm    gt Search lt  A gt   lt  form gt

User · Answer

lets suppose you need to place different rows of radio buttons in a form, each with separate attribute names ('option1','option2' etc) but the same class name. Perhaps you need them in multiple rows where they will each submit a value based on a scale of 1 to 5 pertaining to a question. you can write your javascript like so:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

I would also insert the final output into a hidden form element to be submitted together with the form.

User · Answer

Here is an Example for Radios where no Checked  checked  attribute is used  function test     var radios   document getElementsByName  radiotest    var found   1  for  var i   0  i  lt  radios length  i                 if  radios i  checked            alert radios i  value           found   0          break             if found    1            alert  Please Select Radio                 DEMO   http   jsfiddle net ipsjolly hgdWp 2   Click Find without selecting any Radio   Source   http   bloggerplugnplay blogspot in 2013 01 validateget-checked-radio-value-in html

User · Answer

Try this  function findSelection field        var test   document getElementsByName field       var sizes   test length      alert sizes       for  i 0  i  lt  sizes  i                  if  test i  checked  true                alert test i  value     you got a value                     return test i  value                      function submitForm          var genderS    findSelection  genderS        alert genderS       return false      A fiddle here

User · Answer

document querySelector  input name genderS  checked   value

User · Answer

Since jQuery 1 8  the correct syntax for the query is      input name  genderS   checked   val      Not    input  name  genderS   checked   val    anymore  which was working in jQuery 1 7  with the

User · Answer

This works with any explorer   document querySelector  input name  genderS   checked   value    This is a simple way to get the value of any input type  You also do not need to include jQuery path

User · Answer

lt input type radio name rdbExampleInfo id rdbExamples value  select 1  gt    lt input type radio name rdbExampleInfo id rdbExamples value  select 2  gt    lt input type radio name rdbExampleInfo id rdbExamples value  select 3  gt    lt input type radio name rdbExampleInfo id rdbExamples value  select 4  gt     etc then use just        rdbExamples checked   val     Or        input name  rdbExampleInfo   checked   val

User · Answer

If it is possible for you to assign a Id for your form element    this way can be considered as a safe alternative way  specially when radio group element name is not unique in document    function findSelection field        var formInputElements   document getElementById  yourFormId   getElementsByTagName  input        alert formInputElements           for  i 0  i  lt  formInputElements length  i              if   formInputElements i  type     radio    amp  amp   formInputElements i  name    field   amp  amp   formInputElements i  checked                 alert formInputElements i  value     you got a value                     return formInputElements i  value                      HTML    lt form action   n  name  theForm  id  yourFormId  gt

User · Answer

Edit   As said by Chips 100 you should use    var sizes   document theForm field     directly without using the test variable     Old answer   Shouldn t you eval like this    var sizes   eval test     I don t know how that works  but to me you re only copying a string

User · Answer

document forms your-form-name elements radio-button-name value

User · Answer

This is pure JavaScript  based on the answer by  Fontas but with safety code to return an empty string  and avoid a TypeError  if there isn t a selected radio button   var genderSRadio   document querySelector  input name genderS  checked    var genderSValue   genderSRadio   genderSRadio value         The code breaks down like this    Line 1  get a reference to the control that  a  is an  lt input gt  type   b  has a name attribute of genderS  and  c  is checked  Line 2  If there is such a control  return its value  If there isn t  return an empty string  The genderSRadio variable is truthy if Line 1 finds the control and null falsey if it doesn t    For JQuery  use  jbabey s answer  and note that if there isn t a selected radio button it will return undefined

User · Answer

Using a pure javascript  you can handle the reference to the object that dispatched the event   function  event        console log event target value

User · Answer

You can do something like this    x000D   x000D  var radios   document getElementsByName  genderS    x000D   x000D  for  var i   0  length   radios length  i  lt  length  i      x000D    if  radios i  checked    x000D         do whatever you want with the checked radio x000D      alert radios i  value   x000D   x000D         only one radio can be logically checked  don t check the rest x000D      break  x000D      x000D    x000D   lt label for  gender  gt Gender   lt  label gt  x000D   lt input type  radio  name  genderS  value  1  checked  checked  gt Male lt  input gt  x000D   lt input type  radio  name  genderS  value  0  gt Female lt  input gt  x000D   x000D   x000D    jsfiddle  Edit  Thanks HATCHA and jpsetung for your edit suggestions

User · Answer

First  shoutout to ashraf aaref  who s answer I would like to expand a little  As MDN Web Docs suggest  using RadioNodeList is the preferred way to go     Get the form const form   document forms 0       Get the form s radio buttons const radios   form elements  color        You can also easily get the selected value console log radios value       Set the  quot red quot  option as the value  i e  select it radios value    red    One might however also select the form via querySelector  which works fine too  const form   document querySelector  form name  quot somename quot      However  selecting the radios directly will not work  because it returns a simple NodeList  document querySelectorAll  input name  quot color quot        Returns  NodeList   input  input    While selecting the form first returns a RadioNodeList document forms 0  elements  color      document forms 0  color   Shortcut variant    document forms 0  elements  complex naming      Note  shortcuts do not work well with complex field names  thus  elements  for a more programmatic aproach    Returns  RadioNodeList   0  input  1  input  value   quot red quot   length  2    This is why you have to select the form first and then call the elements Method  Aside from all the input Nodes  the RadioNodeList also includes a property value  which enables this simple manipulation  Reference  https   developer mozilla org en-US docs Web API RadioNodeList value

User · Answer

In case someone was looking for an answer and landed here like me  from Chrome 34 and Firefox 33 you can do the following   var form   document theForm  var radios   form elements  genderS    alert radios value     or simpler   alert document theForm genderS value     refrence  https   developer mozilla org en-US docs Web API RadioNodeList value

User · Answer

Here s a nice way to get the checked radio button s value with plain JavaScript   const form   document forms demo  const checked   form querySelector  input name characters  checked        log out the value from the  checked radio console log checked value     Source  https   ultimatecourses com blog get-value-checked-radio-buttons  Using this HTML    lt form name  demo  gt     lt label gt      Mario      lt input type  radio  value  mario  name  characters  checked gt     lt  label gt     lt label gt      Luigi      lt input type  radio  value  luigi  name  characters  gt     lt  label gt     lt label gt      Toad      lt input type  radio  value  toad  name  characters  gt     lt  label gt   lt  form gt    You could also use Array Find the checked property to find the checked item   Array from form elements characters  find radio   gt  radio checked

User · Answer

ECMAScript 6 version  let genderS   Array from document getElementsByName  genderS    find r   gt  r checked  value

User · Answer

var value      input radio name  radiogroupname   checked   val

User · Answer

I like to use brackets to get value from input  its way more clear than using dots  document forms  form name    input name   value

[javascript] How to get the selected radio button’s value?

Examples related to javascript

Examples related to html

Examples related to for-loop

Examples related to radio-button