Hey there, it's actually quite simple my friend.
To retrieve the value of the selected button, you can utilize the checked property. Given that only one radio button can be selected within a group, obtaining the value of the selected option becomes straightforward using this property in an if loop in JavaScript.
As you have already assigned a name to the radio buttons' options, such as gender, you can easily access all the option elements by using the following:
var options = document.getElementsByName('gender');
var option_value; //to store the selected value
The next step involves looping through all the buttons to identify which one is selected. To achieve this, employ a for loop like this:
for (var i = 0; i < options.length; i++) {...}
To determine if a button is selected or not, check the checked attribute as shown below:
if (options[i].checked) {
option_value = options[i].value;
}
If you intend to display these values but are unsure about what to do with them, I've assumed that you need to showcase them. In that case, create another element, perhaps a <div>, and assign it an ID. Then simply append the selected option value to that element. Here's how you can do it:
HTML:
<div id="selected">The selected options are:</div>
JS:
document.getElementById('selected').innerHTML += "<br>" + option_value;
Check out the updated fiddle.
Or if you want to test it right here, see the modified code snippet below:
// AngularJS module
var app = angular.module('surveyApp', []);
// AngularJS controller
app.controller('surveyCtrl', function($scope) {
$scope.questionSet = [{
onePageQuestions: [{
question: [{
description: 'question#1?',
options: [{
answer: 'answer#1'
}, {
answer: 'answer#2'
}, {
answer: 'answer#3'
}]
},
{
description: 'question#2?',
options: [{
answer: 'answer#4'
}, {
answer: 'answer#5'
}, {
answer: 'answer#6'
}]
}
]
}},
{
onePageQuestions: [{
question: [{
description: 'question#3?',
options: [{
answer: 'answer#7'
}, {
answer: 'answer#8'
}, {
answer: 'answer#9'
}]
}]
}]
}
];
$scope.question_index = 0;
$scope.next = function() {
if ($scope.question_index >= $scope.questionSet.length - 1) {
$scope.question_index = 0;
} else {
$scope.question_index++;
}
};
$scope.submitAnswers = function() {
var options = document.getElementsByName('gender');
var option_value;
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
option_value = options[i].value;
document.getElementById('selected').innerHTML += "<br>" + option_value;
}
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="surveyApp" ng-controller="surveyCtrl">
<div ng-repeat="questionSet in questionSet">
<div ng-if="question_index == $index">
<div ng-repeat="onePageQuestions in questionSet.onePageQuestions">
<div ng-repeat="question in onePageQuestions.question">
{{question.description}}
<form action="">
<div ng-repeat="options in question.options">
<input type="radio" name="gender" ng-model="question.random" ng-value="options.answer"> {{options.answer}}
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<button ng-click="next(); submitAnswers()">Next</button>
<hr>
<div id="selected">The selected options are:
</div>
</div>