Getting radio button value when button is clicked is not working angularjs

Question

I am new in angularjs.I want to fetch the radio button value when user click a button,but my bad luck its not working.Here is the code

<label class="item item-radio">
    <input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt1}}">
    <div class="item-content item-body">a) {{questions.quiz_ans_opt1}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio item-body">
    <input type="radio" name="group" ng-model="user.answer" value="{{questions.quiz_ans_opt2}}">
    <div class="item-content item-body">b) {{questions.quiz_ans_opt2}}</div><i class="radio-icon ion-checkmark"></i>
</label>
<button class="button button-balanced button-block" ng-click="submitAnswer(user)">Submit</button>

Here is controller

$scope.submitAnswer = function(user) {
    //it output undefined error
    alert(user);
}

Also i want to disable the button until a radio button is checked,how can i achive this?

can you create a plunkr with your problem?

Sebastian Piu
– Sebastian Piu

2014-11-09 14:11:51 +00:00
Commented Nov 9, 2014 at 14:11 — Sebastian Piu
– Sebastian Piu, Commented Nov 9, 2014 at 14:11

Fracedo · Accepted Answer · 2014-11-09 15:51:18Z

1

Please have a look at this,

Try this,

In html,

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <input type="radio" ng-model="user.answer" ng-value="'option a'">
  <label>option a</label>
  <br>
  <input type="radio" ng-model="user.answer" ng-value="'option b'">
  <label>option b</label>
  <br>
  <input type="radio" ng-model="user.answer" ng-value="'option c'">
  <label>option c</label>
  <br>
  <input type="radio" ng-model="user.answer" ng-value="'option d'">
  <label>option d</label>
  <br>
  <button ng-disabled="!user.answer" ng-click="submitAnswer(user)">Submit</button>
</body>

In app.js,

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.submitAnswer=function(user){

    alert(user.answer);

  }
});

Here is the plunker demo for the same

answered Nov 9, 2014 at 15:51

community wiki

Fracedo

Sign up to request clarification or add additional context in comments.

1 Comment

Oush Over a year ago

To prevent the multi-selection of the buttons ensure you have the same name for each radio buttons like: <input type="radio" ng-model="user.answer name="radio-btn" ng-value="'option a'">

Manish Kr. Shukla · Accepted Answer · 2014-11-10 04:26:55Z

Though a bit late, i would like to post a second approach, since you are using Ionic-Framework.

If you at all have a dynamic number of radio button options, that are being driven by backend data [Even if you have a static radio button set, you can convert it to the formal], Then you should instead use Ionic's Radio Buttons :

I.E, In your HTML :

<ion-radio ng-repeat="user in userAnswers"
           ng-value="user.answer"
           ng-model="finalAnswer">
  {{ item.text }}
</ion-radio>

And in your controller :

$scope.userAnswers = [
    { text: "Backbone", answer: "bb" },
    { text: "Angular", answer: "ng" },
    { text: "Ember", answer: "em" },
    { text: "Knockout", answer: "ko" }
  ];

  $scope.finalAnswer = 'ng';

More Details can be found in the official documentation and the CodePen Demo

Community · Accepted Answer · 2017-05-23 12:16:06Z

0

This post really helped me out. I ended up changing all my radio button ng-click events to ng-change. Hope this helps.

AngularJS - Trigger when radio button is selected

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Nov 25, 2014 at 23:33

Jason Spence

5646 silver badges19 bronze badges

Collectives™ on Stack Overflow

Getting radio button value when button is clicked is not working angularjs

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related