asked on
How to pass control on radio button selected/clicked prior to submit button click

I have completed the first display for SPA.
I want to pass control to a function handleAnswerRadioClick when one of
the radio buttons is selected. Then on submit attempt to Vote Now.

Basically, if successful display addvote.html otherwise alreadyvoted.html
// index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/angularjs.min.1.7.5.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-route.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />



    <script type="text/javascript">
        // app
        var app = angular.module('quickSurveyApp', ["ngRoute"]);
        function SetCookiesForDebugging() {
            var thecookie = "departid=351&jobtitle=Digital+Developer&floor=0&username=ij25405&ps%5Fdeptname=Digital+Experience&ps%5Fdeptid=351&cost%5Fcenter=351&birthday%5Fday=16&birthday=0&fsla=&nbsp&psdeptname=Digital+Experience&managerwholename=Lawrence+Raffel&area=215&mailstop=%2D+None+Selected+%2D&managerid=21286&departmentid=0&extension=2158635597&emplid=08636&managerusername=LR22638&deptname=KY+Exec+Dir&cubeoffice%5Fno=+&ismanager=0&email=tmruk%40amerihealthcaritas%2Ecom&lob=1&fname=Timothy&is%5Fuserlive=1&psdeptid=351&url=%23&costcenter=351&lname=Mruk&company=KEY&managerphone=2159378142&is%5Fmanager=0&wholename=Timothy+Mruk&id=13332&building=0&guest="
            document.cookie = thecookie;
        }

        // sets all scope variables based on associate cookie information.
        function SetUser($scope) {

            //Set User Information with Cookie data
            $scope.IsManager = getCookie("ismanager");
            $scope.UserId = getCookie("emplid"); //
            $scope.FirstName = getCookie("fname");
            $scope.LastName = getCookie("lname");
            $scope.EmailAddress = getCookie("email");
            $scope.UserName = getCookie("username");
        }

        // loops through iNSIGHT cookie to retrieve specific value.
        // removes all HTML characters.
        function getCookie(name) {

            var cookiesArray = document.cookie.split("&");
            for (var i = 0; i < cookiesArray.length; i++) {

                var nameValueArray = cookiesArray[i].split("=");

                var cookieName = decodeURI(nameValueArray[0]);
                var cookieValue = nameValueArray[1].replace(/\+/g, '%20');
                cookieValue = decodeURIComponent(cookieValue);

                if (cookieName == name) {
                    return decodeURI(cookieValue);
                }

            }
        }
       

        // controller(s)
        app.controller("VoteCtrl", ["$scope", "qa", "$location", function ($scope, qa, $location) {
           

            $scope.activeQuestions = qa.activeQuestions;

            $scope.records = qa.records;
            $scope.QuestionText = qa[0].QuestionText;
            $scope.AnswerText = qa[0].AnswerText;
            $scope.Answers = qa[0].Answers;

            $scope.error = false;
            $scope.AddVote = function () {
                //$scope.error = !!$scope.answer;
                if ($scope.AnswerText == undefined)
                    $scope.error = true;
                else
                    $scope.error = false;
            };
           
            $scope.voteRequest = {
                VoteId: null,
                VoteDate: null,
                UserName: $scope.UserName,
                VoterFname: $scope.FirstName,
                VoterLname: $scope.LastName,
                Id: null,
                QuestionId: null,
                QuestionText: "",
                AnswerText: ""
            };
            SetCookiesForDebugging();
            //SetUser($scope);  ?? Production
//==== Added 05/21/2019                      
            // inserts new request
            $scope.insertRequest = function () {

                $http.post("/API/quick-survey/api/Vote/AddVote", $scope.voteRequest).then(function (data, status, headers, config) {
                    alert("success");
                }, function (data, status, headers, config) {
                    console.log("error!");
                    console.log(data);
                });
            };

            // checks if user already voted for a question
            $scope.getUserVoteCount = function () {

                // get true or false
                $http.get("/API/quick-survey/api/Vote/GetUserVoteCount/866/ijohnson/0").success(function (data, status, headers, config) {
                    $scope.activeQuestions = data;
                }).error(function (data, status, headers, config) {
                    console.log(status);
                });
            };

            //radio button click on request form
           
            $scope.handleAnswerRadioClick = function (data) {
                $scope.voteRequest.QuestionId = data.QuestionId;
                $scope.voteRequest.Id = data.Id;
                $scope.voteRequest.AnswerText = data.AnswerText;
            };
   //==== end new code 05/21/2019        
        }]);

        // service(s)
        app.factory("VoteService", ["$http", "$q", function ($http, $q) {
            
            var service = {};
            //Gets all data for page.
            var questionNumber = 0;
            service.pageInit = function () {
                var deferred = $q.defer();
                 
                $http.get('/API/quick-survey/api/Question/GetQuestionsByZone/0').then(function (response) {
                    deferred.resolve(response.data);
                }, function (error) {
                    console.error(error);
                    deferred.reject("error");
                });
                return deferred.promise;
            };
            return service;
        }]);
       

        // route(s)
        app.config(["$routeProvider", function ($routeProvider) {
            $routeProvider
            .when("/", {
                 
                templateUrl: "/api-test-pages/Quick-Survey/survey.html",
                
                controller: "VoteCtrl",
                // it's is good to download the data before displaying the template without the data
                // so all we found in resolve is gonna be "resolved" before display the page and running the controller
                resolve: {
                    qa: ["VoteService", "$route", function (VoteService, $route) {
                        return VoteService.pageInit();
                    }]
                }

            }).
            otherwise({
                redirectTo: '/'
            });
        }]);

       

       

      

       
     </script>


</head>
<body ng-app="quickSurveyApp">
    <div>
        <h1>Quick Survey</h1>
        <div ng-view></div>
    </div>
</body>
</html>

// =====survey.html

<div>
    <h2>{{QuestionText}}</h2>
    <div ng-hide="!!Answer">please select an answer</div>
    <br ng-repeat-start="a in Answers track by a.Id" />
    <input id="button{{a.AnswerText}}" name="selection" value="{{a.AnswerText}}" type="radio" ng-model="$parent.Answer" />
    <label for="button{{a.AnswerText}}" ng-repeat-end>{{a.AnswerText}}</label>
    <br />
    <span ng-show="error&&!Answer">error no answer selected</span>


    <br />
    <br />
    <input id="surveybtn" type="submit" value="Vote Now" ng-click="AddVote()" />

</div>