AngularJS select change trigger - javascript

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

Related

onBlur event with selectize.js

I'm using the selectize.js package in my application (https://github.com/selectize/selectize.js) and i'm trying to cat the option selected by user using the onBlur event withou succeed. Bellow is a code as example:
<html>
<head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<div class="demo">
<div class="control-group">
<label for="select-beast-single-disabled">Onblur:</label>
<select id="select-beast-single-disabled" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="1">Arnold</option>
<option value="2" selected>Nikola Tesla</option>
</select>
</div>
<script>
$('#select-beast-single-disabled').selectize({
create: true,
sortField: {field: 'text'},
onBlur: function () {
input = document.getElementById('select-beast-single-disabled');
console.log(input.value)
}
});
</script>
</div>
</body>
</head>
</html>
Steps to reproduce:
Inspect select via console
Select "Arnold"
In console, the console.log will print ""
Then, if you press again, will print 1
Expected result:
In the first time that we select the option, the selectize must "blur" the selectize and log the right option, no "".
Actual result:
We have to click twice on the same option to update the value in console.log with the right option.
Is there any workaround for it? Thank you in advance !
Have you tried onChange(value) instead of onBlur()? Seems like that does exactly what you desire.
<html>
<head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<div class="demo">
<div class="control-group">
<label for="select-beast-single-disabled">Onblur:</label>
<select id="select-beast-single-disabled" class="demo-default" placeholder="Select a person...">
<option value="">Select a person...</option>
<option value="1">Arnold</option>
<option value="2" selected>Nikola Tesla</option>
</select>
</div>
<script>
// save select to variable
var $select = $('#select-beast-single-disabled').selectize({
create: true,
sortField: {field: 'text'}
});
// fetch the instance
var selectize = $select[0].selectize;
// attach blur event
selectize.on('blur', function onBlur() {
// get the value from selectize instance.
console.log(selectize.getValue());
});
</script>
</div>
</body>
</head>
</html>

My dropdownlist select onchange is not firing in angular js

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>

Edit jquery editable select

I need a little help for this script. It is a jQuery Plugin that converts a select into an text field with suggestions. When I use it in a form it submits the text not the value.
How can I use get the value of options not the text?
Example:
<link rel="stylesheet" href="https:rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css">
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<script>
window.onload = function () {
$('#basic').editableSelect();
}
</script>
It should send "000" not "zero", and results in domian.com/page.php?data=000 not domian.com/page.php?data=zero.
UPDATE:
Another way in order to get the value you are looking for is:
$('#basic').siblings('.es-list').find('li.selected').data('value')
For the text instead you can use:
$('#basic').siblings('.es-list').find('li.selected').text()
Old answer:
The plugin jquery-editable-select exposes an event called "onSelect".
So you need to attach an event handler for this event and listen for the form submit:
$(function () {
var selectedEleValue = null;
$('#basic').editableSelect({
onSelect: function (element) {
selectedEleValue = element.val();
console.log('The val is: ' + element.val() + ' The text is: ' + element.text());
}
});
$('form[action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<link href="./jquery-editable-select-master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="./jquery-editable-select-master/dist/jquery-editable-select.min.js"></script>
<script type="text/javascript">
$(function () {
$('#basic').editableSelect();
});
function abc(){
var basic_text = document.getElementById('basic').value;
var basic_value = $('#basic').siblings('.es-list').find('li.selected').attr('value');
console.log(basic_text);
console.log(basic_value);
}
</script>
</head>
<body>
<form method="post" id="form_id" action="">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<button type="button" onclick="abc();">Submit</button>
</form>
</body>
</html>

Why isn't my change event firing?

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()">

Disabled input tag based on dropdown value is not working

I'm going to create a dropdown list that contains four values (One, Two, Three, Four). When user chooses (One, Two or Three), the textbox below the dropdown list must allow user to type any text in it; but when user chooses Four, textbox should be disabled.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
</script>
<title>Choose one</title>
</head>
<body>
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="text" id="myclass"/>
</body>
</html>
The code above is not working. Can anyone help me to solve this problem?
The DOM isn't ready :
$(function() {
$('#select').on('change', function(){
$('#myclass').prop('disabled', this.value == '4');
});
});
Your JavaScript code is being executed before the DOM is rendered.
Quick fix: place your JavaScript code at the end of the <body> tag. Like this:
<!DOCTYPE html>
<html>
<head>
<title>Choose one</title>
</head>
<body>
<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="text" id="myclass"/>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
</script>
</body>
</html>
Another option is making JavaScript code to be executed when document is ready, but the "Quick fix" approach is quite popular nowadays. This would be the different (classical?) approach:
<script>
$(document).ready(function () {
var $inputs = $('#myclass');
$('#select').change(function(){
$inputs.prop('disabled', $(this).val() === '4');
});
});
</script>

Categories