CODEWITHSUNDEEP
javascriptangularjsionic-framework
Shristi S.Chavhan
Shristi S.Chavhan

Reputation: 55

onchange event is not working

I have properly add on change event within the select box but it is not working.Any lead would be appreciated.Thanks in advance 

HTML

[<select  id="notifyBy" ng-change="selectchange()" style="border:none" class="formtext1" ng-model="selectvalue"  >
                            <option value="1">E-mail, telephone, etc.</option>
                            <option>Telephone No:</option>
                            <option>Telephone No:</option>
                            <option>Telephone No:</option>
                            <option>Telephone No:</option>
                        </select>][1]

controller

angular.module('starter.controllers', [])

[.controller('AppCtrl',\['$scope',function($scope, $ionicModal, $timeout,$location,$ionicPopover,$http,$ionicNativeTransitions) {

$scope.selectchange = function() {
       alert("enterd");
      }][1]
}])

Upvotes: 0

Views: 2999

Answers (3)

Naghaveer R
Naghaveer R

Reputation: 2944

You are missing value for options

<option value="2">Telephone No:</option>

Details

<option value="1">E-mail, telephone, etc.</option>
<option >Telephone No:</option> <!--Added value attribute here -->
<option >Telephone No:</option> <!--Added value attribute here -->

Here the problem is

  1. When you change the value to option 2 (Telephone No:) from option1(E-mail, telephone, etc.), it triggers the onchange event

  2. When you change the value to option 3 (Telephone No:) from option 2(Telephone No:), it will not triggers the onchange event because there is no change in value

Solution

So you should have the different values for all.

Solution 1: 

<option value="2">Telephone No:</option> <!--Added value attribute here -->
<option value="3">Telephone No:</option> <!--Added value attribute here -->

Solution 2 :

<option>Telephone No:1</option> <!--Added value attribute here -->
<option>Telephone No:2</option> <!--Added value attribute here -->


angular.module('starter', [])

.controller('AppCtrl', ['$scope',
  function($scope, $ionicModal, $timeout, $location, $ionicPopover, $http, $ionicNativeTransitions) {

    $scope.selectchange = function() {
      alert("enterd");
    }
  }
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="starter" ng-controller="AppCtrl">
  <select id="notifyBy" ng-change="selectchange()" style="border:none" class="formtext1" ng-model="selectvalue">
    <option value="1">E-mail, telephone, etc.</option>
    <option value="2">Telephone No:</option> <!--Added value attribute here -->
    <option value="3">Telephone No:</option> <!--Added value attribute here -->
    <option value="4">Telephone No:</option>
    <option value="5">Telephone No:</option>
  </select>

</div>

Upvotes: 4

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

Angular seems to be difficult hence few time we make mistakes from out end, here couple of thing i saw not complete.

  1. Add "ng-app" or bootstrap application to use angular features.
  2. Also, I could not see ng-controller anywhere in html code.
  3. Injection should be done correctly. Then one which appear with in function parenthesis are alias name to actual service.

Great so here you go: 

angular.module('starter.controllers', [])
.controller('AppCtrl',['$scope',function($scope) {
    $scope.selectchange = function() {
      alert("enterd");
    }
}]);

angular.bootstrap(document, ['starter.controllers']);

JSFiddle link: https://jsfiddle.net/Ashokkumargupta/8a7zxdq4/1/

Cheers, Ashok

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222722

Issue is because you are selecting the same value again and again.

Try to add a value with each option.

DEMO

var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
  function($scope) {
    $scope.selectchange = function() {
       alert("enterd");
      }
  }
]);
<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
</head>
<body ng-controller="dobController">
  <select id="notifyBy" ng-change="selectchange()" style="border:none" class="formtext1" ng-model="selectvalue">
    <option value="1">E-mail, telephone, etc.</option>
    <option value="2">Telephone No:</option>
    <option value="3">Telephone No:</option>
    <option value="4">Telephone No:</option>
    <option value="5">Telephone No:</option>
  </select>
</body>

</html>

Upvotes: 0

Related Questions