Detect multiple Input fields value change from code in angularJS - javascript

I have an input field as
<input type="text" ng-model="sampleValue" >
In some situations i am clearing the value of input as
$scope.sampleValue = "";
Is there any way to detect the change in value of input field from code?
In this case ng-change is not working as the value is changing from code. I have a number of such input fields, so using multiple $watch is not a good solution.

You may try $watchGroup instead of multiple $watch:
var fieldList = ['sample1', 'sample2', 'sample3'];
$scope.$watchGroup(filedList, function(newVal, oldVal) {
console.log(newVal[0], newVal[1], newVal[2]);
);

if possible make use of rxJs and Observable value , like in below example it observe string s, in you code it can observe $scope.sampleValue = "";
let s = "Hello World";
Observable.of(s).subscribe(val => {
console.log(val);
});

Related

Duplicating the value of one input to another input in jQuery

I have a range input field and a text field. I would like to move the slider to duplicate the resulting number in the text field. This was done successfully. But I would also like that when you enter a number in the text field, this number is also set in the range input. That's where it doesn't work out.
It is important that the cost changes exactly from the range input. The text field would be useful for convenience.
I use this code and it works correctly, copying data from range input to a text field. But there's no way back
jQuery(document).ready(function(){
jQuery('.amount_range1').change(function(){
var val = jQuery('.amount_range1').val();
jQuery('.amount_text1').val(val);
});
});
The page with this slider and field is here https://mmogoldstore.com/product/world-of-warcraft/
Thank you for your help!
this should do the job.
jQuery(document).ready(function () {
jQuery(".amount_range1").change(function () {
console.log("test");
var val = jQuery(".amount_range1").val();
jQuery(".amount_text1").val(val);
});
jQuery(".amount_text1").keyup(function () {
console.log("test");
var val = jQuery(".amount_text1").val();
jQuery(".amount_range1").val(val);
});
});
It would work with change but then the inputfield must be deselected.
Maybe you should just add the same script reverted ?
jQuery('.amount_text1').change(function(){
var val = jQuery('.amount_text1').val();
jQuery('.amount_range1').val(val);
});
Just in the same block of
jQuery(document).ready(function(){
// ... here
});

Input type number: how to detect if value was incremented or decremented?

Up until now, I simply used "change" to see if an input field of the type "number" was changed. However, now I need to know if the number was incremented or decremented to perform different actions. How can I see how the number was changed?
Looking for solutions with JQuery, but plain old JavaScript is fine as well.
You could simply previously store the value of your input and compare it on change :
let value = $('#test').val();
$('#test').on('change',function(){
if($(this).val() > value){
console.log('Input was incremented');
}else{
console.log('Input was decremented');
}
value = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="test" value="0">
You'll want to make use of a variable outside of your change function to keep track of the last value that was entered. Inside of your change function, simply compare against this value to find out whether the new value is higher or lower. Don't forget to update the previous value after the check!
This can be seen in the following:
let previous_value;
document.getElementById("input").addEventListener("change", function() {
let value = document.getElementById("input").value;
if (previous_value > value) {
console.log("Decreased");
} else if (previous_value < value) {
console.log("Increased");
}
previous_value = value;
});
<input type="number" id="input">
Along with the suggestions made of storing the previous value in memory in the JS, you could also store it on the input element itself, as a data attribute. That way JS from anywhere in your application will know the previous value, without having to have access to a variable
<input class="spinner" type="number" data-prev-value="0" />
$('.spinner').on('change', (e) => {
let direction = e.target.value > parseInt(e.target.dataset.prevValue) ? 'up' : 'down'
e.target.dataset.prevValue = e.target.value;
console.log(direction);
})
Whilst the answers above do what the OP requested, it is also worth noting that the input field of type "number" can be changed by user input as well as by the arrows. Hence, although you know the direction, you will not neccessarily know how much the item has been incremented or decremented.
This function will show a positive or negative number (so doing what the OP requested) but also show the amount incremented or decremented:
let value = $('#test').val();
$('#test').on('change', function() {
change = $(this).val() - value;
value = $(this).val();
console.log(change);
});
let value = input.value;
input.onchange = () => {
if (input.value > value) {
value++;
console.log('increase');
}
if (input.value < value) {
value--;
console.log('decrease');
}
};

Find elements by text

I have input tags on the page that are generated dynamically using JS.
They are initialized using $("#input1").val(value). How can I find specific input elements base on text?
The values are initialized as follows:
$("input[name='DeviceIP']").each(function(index,elem){$(elem).val(value)});
The solution I am using now is to select all the inputs I want to inspect and then using find.
$("[name='DeviceIP']").filter(function(index, elem) {
var res = false;
var _this = this;
$("[name='DeviceIP']").each(function(index2, elem2) {
if(elem2 !== _this) {
if(_this.value === elem2.value) {
errMessage = "error text";
res = true;
}
}
});
return res;
}
I looked at the question here but the ":contains" didn't find them for some reason(maybe because there is no value attribute?)
"$("input[name='DeviceIP'][value='your_value_here']")
element.value is also an attribute, so You can define it in Your query ;)
Still, you shouldn't perform such query very often if You have a lot of elements.
I would also suggest You to create map, with values as keys, and nodes as values.
Suppose you have an input field like
<input type="text" value="5" name="DeviceIP">
<input type="text" value="8" name="DeviceIP">
you want the element with specific value. so you can do this,
alert($("input[name='DeviceIP'][value='5']").val());
Here is the fiddle.
If your value is dynamic, say for example your searching value is 8.so you can do this in a way,
var val = 8;
alert($("input[name='DeviceIP'][value='"+val+"']").val());

Unable to get value of input field, even through text() and val() methods

I want to get the value of an input field that a user will type into, then do things with it. I've tried the two ways to get value , text() and val(), on the input fields, but neither work.
Kindly advise on what it could be that I'm missing here.
What happens exactly in the code below is that after hovering a button, the value of an input field would be shown through an alert() function. But the alert is constantly blank.
HTML
<div id="collection_name">
collection name
</div>
<input type="text" id="collection_title" placeholder="Midnight in New York">
<div id="collection_button"></div>
jQuery
var collection_title = $('#collection_title').text();
var collection_button = $('#collection_button');
collection_button.on({
mouseover: function() {
alert(collection_title); // the alert comes out blank
}
});
You need to call the text()/val() methods within the handler itself
var collection_title = $('#collection_title');
var collection_button = $('#collection_button');
collection_button.on({
mouseover: function() {
alert(collection_title.val()); //or .text() depending on the element type
}
});
The reason it was blank before is at the time of initializing
var collection_title = $('#collection_title').text();
it had no text value
Demo Fiddle
var collection_title = $('#collection_name').text();
var collection_button = $('#collection_button');
collection_button.on({
mouseover: function () {
alert(collection_title); // the alert comes out blank
}
});

Hiding Text inside of an input element

I have a text input, and I want to hide the text inside, on a given event(I disable the input, when it is not needed). I would like to display the hidden text, when the given event is reversed.
I know I can store the value and retrieve as needed. I'd like to avoid moving data, since this is a purely cosmetic operation.
Can the input text be hidden, or is manipulating the data in the input the only way? I would like the simplest solution.y?
I can use pure JS and jQuery.
I would use "value" attribute of the same input object, since the attribute is the default value. In this case you don't even need any additional variables. The idea of this approach comes from the difference between properties and attributes. It means that if you change value property of the object, the attribute value remains the same as it was before.
var input = document.querySelector('input');
function hide() {
input.value = "";
}
function show() {
input.value = input.getAttribute('value');
}
<input type="text" value="Some text">
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>
An example on how to store the value of an input element inside the dataset of the element.
and show/hide it on hover.
var hello = document.getElementById('hello');
hello.dataset.value = hello.value;
hello.value = '';
hello.addEventListener('mouseover', function() {
hello.value = hello.dataset.value;
});
hello.addEventListener('mouseout', function() {
hello.value = '';
});
<input id="hello" value="Hello World" />

Categories