The onchange functionality is not functioning as expected

Question

The onchange functionality is not functioning as expected

I've added an onchange event to the select box, but it doesn't seem to be working. Any suggestions would be greatly appreciated. Thank you 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]
}])

javascript angularjs ionic-framework

Answer 1

Answer №1

You have not provided a value for the options

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

Additional Information

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

The issue lies in

Switching from option 2 (Telephone No:) to option 1 (E-mail, telephone, etc.) triggers the onchange event
Changing from option 3 (Telephone No:) back to option 2 (Telephone No:) does not trigger the onchange event as the value remains the same

Solution

Assign different values for each option.

Solution 1:

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

Solution 2 :

<option>Telephone No:1</option> <!--Value attribute added here -->
<option>Telephone No:2</option> <!--Value attribute added here -->

angular.module('starter', [])

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

    $scope.selectchange = function() {
      alert("entered");
    }
  }
])

<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> <!--Value attribute added here -->
    <option value="3">Telephone No:</option> <!--Value attribute added here -->
    <option value="4">Telephone No:</option>
    <option value="5">Telephone No:</option>
  </select>

</div>

Answer 2

You have not provided a value for the options

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

Additional Information

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

The issue lies in

Switching from option 2 (Telephone No:) to option 1 (E-mail, telephone, etc.) triggers the onchange event
Changing from option 3 (Telephone No:) back to option 2 (Telephone No:) does not trigger the onchange event as the value remains the same

Solution

Assign different values for each option.

Solution 1:

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

Solution 2 :

<option>Telephone No:1</option> <!--Value attribute added here -->
<option>Telephone No:2</option> <!--Value attribute added here -->

angular.module('starter', [])

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

    $scope.selectchange = function() {
      alert("entered");
    }
  }
])

<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> <!--Value attribute added here -->
    <option value="3">Telephone No:</option> <!--Value attribute added here -->
    <option value="4">Telephone No:</option>
    <option value="5">Telephone No:</option>
  </select>

</div>

Answer 3

Answer №2

It seems that the issue is arising from repeatedly selecting the same value.

One approach to resolve this is by assigning a unique value to each option.

DEMO

var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
  function($scope) {
    $scope.selectchange = function() {
       alert("entered");
      }
  }
]);

<!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>

Answer 4

It seems that the issue is arising from repeatedly selecting the same value.

One approach to resolve this is by assigning a unique value to each option.

DEMO

var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
  function($scope) {
    $scope.selectchange = function() {
       alert("entered");
      }
  }
]);

<!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>

Answer 5

Answer №3

Working with Angular can be a bit challenging, leading to mistakes on our part. Here are a couple of things I noticed that were not completed.

Make sure to add "ng-app" or bootstrap the application to access Angular features.
I also couldn't find ng-controller in the HTML code.
Ensure that injections are done correctly. The names within function parentheses act as aliases for actual services.

So, here is the solution:

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

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

JSFiddle link: https://jsfiddle.net/UniqueID123456789/

Cheers, Ashok

Answer 6

Working with Angular can be a bit challenging, leading to mistakes on our part. Here are a couple of things I noticed that were not completed.

Make sure to add "ng-app" or bootstrap the application to access Angular features.
I also couldn't find ng-controller in the HTML code.
Ensure that injections are done correctly. The names within function parentheses act as aliases for actual services.

So, here is the solution:

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

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

JSFiddle link: https://jsfiddle.net/UniqueID123456789/

Cheers, Ashok

The onchange functionality is not functioning as expected

Answer №1

Answer №2

Answer №3

Similar questions

Validating email addresses using jQuery regular expressions

Utilize the _sortBy function from the lodash library to arrange an array based on a specific field

Using AngularJS to access the properties of a header within a $http request

Tips for preventing breaks in typography

Incorporate Vuetify's v-stepper seamlessly with Vue router for dynamic functionality

Issue: NG04002 encountered post migration from Angular to Angular Universal

Switching Over to Burger Menu

"Creating a cohesive design: Using CSS to ensure the navigation background complements

Issues with Ajax response being added to the table

Trouble with text box focus functionality

mac OS X encounters npm ENOENT error - unable to locate the specified file or directory

Error encountered while making an http get request for a node that returns JSON

The component "SafeAreaViewRN" could not be located within the UIManager

What happens if setTimeout fails due to a page error?

Issues with navigating sliders

Issue: npm encountered an error due to writing after reaching the end

Using AngularJS to dynamically load content into Owl Carousel 2

Disable the toggling of the dropdown functionality in the bootstrap function

What is the best way to trigger a re-render of a Vue component after a change in Vuex

Navigating Google Oauth - Optimal User Sign in Locations on Frontend and Backend Platforms