How do I get the value of the checked radio button?

Question

I have this simple script attached to a questionnaire and am having a problem getting the selected answer to show up in a textarea. Here is the script:

function check() {
  var complete = 0;
  var total = 0;

  for (i=0;i<document.form.length;i++)
  {
     if (document.form.elements[i].checked == true && complete < 10) {
        complete++;
        total = (total) + (Math.round(document.form.elements[i].value));
     }
  }

  if (complete >= 10) {
     document.form.message.value = document.form.question1.value;
  }
}

And here is the HTML:

<input type="radio" value="1" name="question1" onclick="check()"> A<br />
<input type="radio" value="2" name="question1" onclick="check()"> B<br />
<input type="radio" value="3" name="question1" onclick="check()"> C<br />
<input type="radio" value="4" name="question1" onclick="check()"> D<br />

<input type="radio" value="1" name="question2" onclick="check()"> E<br />
<input type="radio" value="2" name="question2" onclick="check()"> F<br />
<input type="radio" value="3" name="question2" onclick="check()"> G<br />
<input type="radio" value="4" name="question2" onclick="check()"> H<br />

<textarea name="message"></textarea>

I would like the value to be returned, but I am getting undefined. If I alter the line in the script that returns the text to:

  document.form.message.value = document.form.question1;

I get [object NodeList]. I know I am missing something so simple but for the life of me I cannot find it.

Also, is it possible I can return the letters A through H along with the value? I know I can replace the value with the letters but need the numbers there for calculations.

Are you really looking for a straight javascript solution, or would a library like jquery be acceptable? — Aaron Kurtzhals, Feb 28 '13 at 19:46
I would not mind a jquery solution, but I am really new to javascript and that may be a bit over my head, so if possible, I would prefer straight javascript. — thequerist, Feb 28 '13 at 20:42

score 1 · Answer 1 · edited May 23 '17 at 10:25

1

You are referencing a form element in your script, do you define a form?

The answer seems to be addressed here Attach event listener through javascript to radio button

edited May 23 '17 at 10:25

Community

1
1

answered Mar 06 '13 at 19:18

Four_lo

1,150
10
28

Smokin Joe · Accepted Answer · 2013-03-08T15:15:53.223

My answer is going under the assumption that you would like the <textarea> to be populated with text similar to:

User answered 1 for Question A

User answered 2 for Question F

To get the A or F passed back, I needed to modify your html in the following way:

<input type="radio" value="1" name="question1" onclick="check(this, 'A')"> A<br />
<input type="radio" value="2" name="question1" onclick="check(this, 'B')"> B<br />
<input type="radio" value="3" name="question1" onclick="check(this, 'C')"> C<br />
<input type="radio" value="4" name="question1" onclick="check(this, 'D')"> D<br />

<input type="radio" value="1" name="question2" onclick="check(this, 'E')"> E<br />
<input type="radio" value="2" name="question2" onclick="check(this, 'F')"> F<br />
<input type="radio" value="3" name="question2" onclick="check(this, 'G')"> G<br />
<input type="radio" value="4" name="question2" onclick="check(this, 'H')"> H<br />

<textarea name="message"></textarea>

Otherwise, there's no actual connection between the letter and the radio input.

Anyway, here's what I done did:

I noticed that each group was repeating the same functionality, so I created a single Object Constructor:

var Answer = function () {
    this.text = '';
};

this.text will contain the special answer string per group.

Now let's create the two answer group objects:

var answerOne = new Answer();
var answerTwo = new Answer();

Next comes the check() function where we pass the input element as well as it's associated answer character:

var check = function (_input, _question) {
    if (_input.name === "question1") {
        answerOne.text = "User answered " + _input.value + " for Question " + _question + "\n";
    }
    if (_input.name === "question2") {
        answerTwo.text = "User answered " + _input.value + " for Question " + _question + "\n";
    }
    document.getElementsByName('message')[0].value = answerOne.text + answerTwo.text;
};

Now, as the user selects an answer, the appropriate answer group's string gets updated accordingly without affecting the other group's answer string.

Here's a jsfiddle with it working: http://jsfiddle.net/smokinjoe/uC76f/13/

Hope that helps!

hop · Answer 3 · 2013-03-01T16:55:57.120

Here you go the complete solution.

Couple of things went wrong in your code. 1. The way you get values from radio group. You need to iterate and find out which is checked 2. Setting value to textarea. You need to do getElemenetsByName[x]

<script>
function check() {
  var complete = 0;
  var total = 0;

    var x = document.getElementsByTagName('input');
    for(var k=0;k<x.length;k++){

            if (x[k].checked && complete < 10) {
                complete++;
                total = total + Math.round(x[k].value);
            } 

    }    

    (document.getElementsByName('message')[0]).value = total;       
}


</script>
<input type="radio" value="1" name="question1" onclick="check()"> A<br />
<input type="radio" value="2" name="question1" onclick="check()"> B<br />
<input type="radio" value="3" name="question1" onclick="check()"> C<br />
<input type="radio" value="4" name="question1" onclick="check()"> D<br />

<input type="radio" value="1" name="question2" onclick="check()"> E<br />
<input type="radio" value="2" name="question2" onclick="check()"> F<br />
<input type="radio" value="3" name="question2" onclick="check()"> G<br />
<input type="radio" value="4" name="question2" onclick="check()"> H<br />

<textarea name="message"></textarea>

@thequerist. I am getting proper values with this. Did you try? — hop, Mar 01 '13 at 16:30
I did not downvote you either (I too am curious about that). I just tried it. It is actually doing something else (summing up the values) that I was outputting into another field. What I want it to do is to return "you answered A for question 1, F for question two" and so on. I think what you suggested in your first draft got me closer to that, but I was still having difficulties figuring out how to list what the person answered for each question. — thequerist, Mar 01 '13 at 22:05
Okay. I was confused since you had total and all. What exactly you need? On check of any radio button, you need to print - Option x is selected for Question1 and so on..? — hop, Mar 07 '13 at 15:54

score 0 · Answer 4 · answered Feb 28 '13 at 19:42

Because it's a radio button, you need to loop through all values to find the one that has been selected. Something like this should work:

for (var i=0; i < document.form.question1.length; i++)
   {
   if (document.form.question1[i].checked)
      {
       document.form.message.value = document.form.question1[i].value;
      }
   }
}

score 0 · Answer 5 · answered Mar 06 '13 at 17:03

Not tested this, and as I don't know the name (or id) of your form(s), or indeed how many forms you have in your document, I have referenced your form by it's id.

function check() {
    var complete = 0;
    var total = 0;
    var formId = 'EnterYourFormId';  // This could be passed as a paramter to the function instead (e.g. "function check(formId) {")
    var _from = document.getElementById(formId);  // The form could also be referenced by it's index, e.g. document.forms[0]

    for (i=0; i < _from.elements.length; i++) {
        if (_from.elements[i].type=='checkbox' && _from.elements[i].checked && complete < 10) {
            complete++;
            total = total + parseInt(_from.elements[i].value);
        }
     }

     if (complete >= 10) {
         _form.message.value = _form.question1.value;
     }
}

How do I get the value of the checked radio button?

5 Answers5