Title pretty much explains it all. I took an example from w3 schools.
<html>
<head>
<title>Example: Change event on a select</title>
<script type="text/javascript">
function changeEventHandler(event) {
alert('You like ' + event.target.value + ' ice cream.');
}
</script>
</head>
<body>
<label>Choose an ice cream flavor: </label>
<select size="1" onchange="changeEventHandler(event);">
<option>chocolate</option>
<option>strawberry</option>
<option>vanilla</option>
</select>
</body>
</html>
The alert box runs when I run it. However, I can't get my alert box to pop up when I run my code:
HTML
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="myCtrl.js"></script>
<body>
<div ng-app="myTestApp" ng-controller="myCtrl">
<p>Looping with ng-repeat:</p>
<label>Job Accounts</label>
<select id="jobList" size="1" ng-model="selectedJobServer" onchange="myFunction()">
<option ng-repeat="x in jobServers" value="{{x}}">{{x}}</option>
</select>
<label>Oracle Accounts</label>
<select ng-disabled={{isDisabled}} ng-model="selectedOracleServer">
<option ng-repeat="x in oracleServers" value="{{x}}">{{x}}</option>
</select>
<p>The selected server is: {{selectedJobServer}}</p>
</div>
</body>
</html>
JS
var app = angular.module('myTestApp', []);
app.controller('myCtrl', function($scope) {
$scope.isDisabled = true;
$scope.jobServers = ['server1','server2','server3'];
function myFunction(){
alert("Hello! I am an alert box!");
}
});
Is there some interaction with angular that is throwing an issue? Thanks.
Your function should be in $scope.
So, you can modify your myCtrl code to
$scope.myFunction = function(){
alert("Hello!");
}
Also you should modify your event from change to ng-change.
<select id="jobList" size="1" ng-model="selectedJobServer" ng-change="myFunction()">
<option ng-repeat="x in jobServers" value="{{x}}">{{x}}</option>
</select>
If you are using angular, go all-in with angular. Don't declare generic functions, declare angular functions:
$scope.myFunction = function (){
alert("Hello! I am an alert box!");
}
And don't use onChange event, use ng-change:
<select id="jobList" size="1" ng-model="selectedJobServer" ng-change="myFunction()">
Related
I am very much new to AngularJS and I want to get values of OnChange of dropdownlist.
Below is my code which I tried
<div>
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="onSelectChange()">
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
Angular code
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
My alert is not firing. Please suggest what I am missing here
Look here the following snippet. You have created an alias of your controller but not using it.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="App">
<select ng-controller="UserSelection as User" ng-model="User.UserSelected" ng-change="User.onSelectChange()" ng-init="User.UserSelected='--select--'">
<option value="--select--">--select--</option>
<option value="SAP_Executive">SAP Executive</option>
<option value="Fiber_Engineer">Fiber Engineer</option>
<option value="Fiber_Lead">Fiber Lead</option>
<option value="CMM">CMM</option>
</select>
</div>
<script>
angular.module('App', [])
.controller('UserSelection', function () {
var User = this;
User.onSelectChange = function () {
alert('change value selected');
};
});
</script>
</body>
</html>
I am trying to do a script that will copy the value of one select tag model to another and then trigger its ng-change function using a checkbox. What happens is when you click the checkbox, it does copy the value but the trigger does not work anymore. Seems like there is a conflict between setting a model's value and doing the trigger because either one of them fails.
Here is my code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<select ng-model="first.selection" id="first" ng-change="changeOver('dean')">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select> <br />
<input type="checkbox" ng-model="same" id="same" ng-change="sameAsAbove(first, second)"> Same as above <br />
<select ng-model="second.selection" id="second" ng-change="changeOver('armada')">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
$scope.first = {};
$scope.second = {};
$scope.sameAsAbove = function(primary, receiver){
receiver['selection'] = primary['selection'];
$timeout(function() {
angular.element(document.getElementById('second')).triggerHandler('change');
}, 100);
};
$scope.changeOver = function(value){
alert(value);
}
});
$("#clickMe").click(function(){
// alert("czxvzx");
// $("#same").trigger("click");
$("#changes").change();
});
</script>
</body>
</html>
Here is the plunkr url: http://plnkr.co/edit/zErS4DaTgR79SBLbtGOy?p=preview
In DOM body you should change this line like this.
<select ng-model="second.selection" id="second" ng-change="same=second.selection">
and use watch to change the checkbox value
$scope.$watch("same", function(newValue, oldValue){
$scope.changeOver('armada');
//or do anything
});
plunker demo link
I have the following piece of code to grab the value of a drop down list. The problem I have is that due to the onchange event attribute the first value is not passed if a user does not select an option. Is there a way I can define when there is no change the first value is passed on?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo GetSelectOptionData</title>
<select name="mySelect" id="mySelect" onchange="getSelectedValue();">
<option value="aaaaaaaaa.xml">Text 1</option>
<option value="bbbbbbbbb.xml">Text 2</option>
</select>
<form action="test">
Value1: <input id="myField" type="text" value=""><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
</script>
</body>
</html>
Many thanks!
set the first option as selected default
<option selected="selected" ...
and call getSelectedValue() after everything is defined
<script type="text/javascript">
function getSelectedValue() {
var value = document.getElementById('mySelect').value.split('.');
document.getElementById('myField').value = value[0];
}
getSelectedValue()
</script>
I tried adding an event listener to cars3 id'd paragraph so that when I click the paragraph it should execute the getValue() method but it does not work. I don't understand why. Thanks.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function getValue()
{
var x=document.getElementById("cars").value;
document.getElementById("cars2").innerHTML = x.toString();
}
document.getElementById("cars3").addEventListener("click", getValue());
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">"CLICk HERE !" </h1>
<p id="cars3">afaf</p>
<select id="cars" name ="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option></select>
</select>
<p id="cars2">afaf2</p>
</body>
</html>
Remove the brackets:
addEventListener("click", getValue());
//--------------------------------^^
Making it:
addEventListener("click", getValue);
Edited
Also move script tag below body. Your code is not waiting for the page to get rendered, hence document.getElementById("cars3") fails to fetch the element.
<body>
...
</body>
<script>
function getValue()
...
<script>
this worked for me, u must take out "()" of the function, and use the event onload of the document, because when your addeventlistener is first called, the html doesnt exists, so cant find cars3 element.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function getValue()
{
var x=document.getElementById("cars").value;
document.getElementById("cars2").innerHTML = x.toString();
}
window.onload = function() {
document.getElementById("cars3").addEventListener("click", getValue);
};
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">"CLICk HERE !" </h1>
<div id="cars3">afaf</div>
<select id="cars" name ="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option></select>
</select>
<p id="cars2">afaf2</p>
</body>
</html>
Refactoring how a select element is written and trying to figure out how to access the value of a select drop-down on form submit.
Currently, the code looks like this:
<select onchange="myFunc(this.value)">Some Options</select>
Would like to do something like this:
<form onsubmit="myFunc("Send the value of the select element")">
<select>Some Options</select>
<input type="submit"/>
</form>
What's the best way to grab the value of the select element given that "this" has a new context?
Do you prefer a solution with pure JS or can you use JQuery?
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('#myselect').change(function() {
console.log($(this).val());
});
});
</script>
<form id="myform">
<select id="myselect">
<option value="val1">opt1</option>
<option value="val2">opt2</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
Here's the alternative with pure Javascript:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
</head>
<body onload="domisready()">
<script type="text/javascript">
var domisready = function() {
document.getElementById('myselect').onchange = function() {
console.log(this.options[this.selectedIndex].value);
};
};
</script>
<form id="myform">
<select id="myselect">
<option value="val1">opt1</option>
<option value="val2">opt2</option>
</select>
<input type="submit"/>
</form>
</body>
</html>
assuming you have only one select in form and this refers to form context.Try this:
$(this).find('select').val();