Develop Reference

Javascript or jQuery inputbox text field writing with data

I have to use a web application during my work, what I would like to fill with my created extension (I'm not programmer...).
The web app has two input fields, what I can't fill effectively, because, when I fill it with js commands below, the strings appear, but the "Add" button is not enabled. And, when I enable that, I'm not able to send the data to server the button click().
When I click with my mouse to the other side of the dom, the strings hide, and I realize, the values are in value attribute, but not in defaultValue. If I fill the fields with key pressing, naturally, the strinsg are not hidden if I click other side of the DOM.
I try to write data inputs using jQuery and simple js too:
input field 1:
$('#autocomplete-sa-material').focus();
$('#autocomplete-sa-material').attr('value', 'A-10035951');
$('#autocomplete-sa-material').attr('placeholder', 'A-10035951');
OR
arrr = document.getElementById('autocomplete-sa-material');
arrr.setAttribute("value", "A-10035951");
input field 2:
$('#input-sa-quantity').focus();
$('#input-sa-quantity').val('27875');
brrr = document.getElementById('input-sa-quantity');
brrr.setAttribute("value", "27875");
I think, the problem is that the fields are modified by functions after change event. The first field can be fill using droplist, where you can select the exact material type. But, if you type keys, the droplist is filtered by the string, that you write (AJAX?). I can fill this inputbox simple Ctrl+C - Ctrl + V from an excel.
The second field, the quantity type is decimal with depicted in groups of thousands (using space character every 3 characters before). When I press the keys, the page exam the string, and create the groups from the string.
Could somebody help me, how I write the input textfield, to I could send data from there to the server?
I would like to help to change the two input text field with js or jQuery.
Updated:
I get some very good idea, there is only one problem, what I would like to solve:
I modified the recommended code minimally and it ran perfect and do what it have to do. The modified code was these:
arrr = document.getElementById('autocomplete-sa-material');
arrr.dispatchEvent(new Event('click'));
arrr.value = "A-10035951";
arrr.dispatchEvent(new Event('change'));
let event = new Event('input', { bubbles: true });
arrr.dispatchEvent(event);
brrr = document.getElementById('input-sa-quantity');
brrr.value = "27875";
let event2 = new Event('input', { bubbles: true });
brrr.dispatchEvent(event2);
There is only one problem left:
I have to click with my mouse into the first input box (sa-material), and out from it, in order to the "Add" button will become active.
Would there be any other possible additional code details that would enable the button to be activated and would the code 100% copy the user's operation?
The second inputbox work perfect, there work the type formatting and there is nothing barrier to run the "Add" button method... Thank You!

Maybe it can help to others, who is fighting with this problems, it was the perfect method (the essential thing: bubbles for every events! :-)
arrr = document.getElementById('autocomplete-sa-material');
arrr.dispatchEvent(new Event('mousedown', {bubbles: true}));
arrr.dispatchEvent(new Event('mouseup', {bubbles: true}));
arrr.dispatchEvent(new Event('click', {bubbles: true}));
arrr.dispatchEvent(new Event('focus', {bubbles: true}));
arrr.value = "A-10035951";
arrr.dispatchEvent(new Event('change', {bubbles: true}));
arrr.dispatchEvent(new Event('input', {bubbles: true}));
arrr.dispatchEvent(new Event('blur', {bubbles: true}));
brrr = document.getElementById('input-sa-quantity');
brrr.dispatchEvent(new Event('focus'));
brrr.dispatchEvent(new Event('mousedown'));
brrr.dispatchEvent(new Event('click'));
brrr.value = '23423';
brrr.dispatchEvent(new Event('input', {bubbles: true}));
crrr = document.getElementById('btn-sa-button-ADDitems');
crrr.dispatchEvent(new Event('focus'));
crrr.dispatchEvent(new Event('mousedown'));
crrr.dispatchEvent(new Event('click'));
The material inputbox events, when theys bubbling, they enabling the button. And if the button mousedown event is bubbling, it clear the inputbox history values and reset all values, properties...
Thank you all, who had answer earlier, they help to found the answers!

Set ng-model value from outside javascript

I'm developing an chrome extension (just to myself, for now) and I want to set a input value of the website that is using ngModel (bind value: <input [(ngModel)]="value">) by the javascript and I don't want to change the website's code. It's possible?
I tried using element.setAttribute("ng-reflect-model", 1234) but didn't work.

Once you update the input's value then you need to dispatch an input event to trigger ngModel updating.
let input = document.someDOMFunctionToSelectInput();
input.value = 'updated value';
input.dispatchEvent(new Event('input', { 'bubbles': true, 'cancelable': false }));
Here is a StackBlitz with a button outside of the Angular app https://stackblitz.com/edit/angular-6ksgn4

How to manipulate data-binding, knockoutJs

I have a customer who is a member of a web site. He has to fill a form every time which is really very often. That's why he wants me to develop an application for him to make this process automatic. When I use the webBrowser control to manipulate it, I am able to login but after that there are fields that contains data-binding. These fields are the ones I need to manipulate. When I push the data to necessary fields, it's not working, because in the html tag, there is no value attribute, instead it has data-binding. So my question is how can I manipulate and push data to these fields?
Thank you so much for your all help in advance.

Knockout uses data-binds to listen to changes in an input and update an underlying model. For example, the value binding listens to change events and writes the new value to a data-bound observable.
If you update a value attribute through code, the change event isn't triggered. You'll see the new value in the UI, but the javascript model won't be updated.
You can combat this by explicitly triggering a change. Here's an example:
Type in the input: you'll see a console.log that shows knockout gets updated
Press the button to inject a new value: you won't see a log: knockout isn't updated
Press the last button to trigger a change event. You'll notice knockout now updates the model.
Of course, you can combine the two click listeners into one function. I've separated them to get the point across.
// Hidden knockout code:
(function() {
var label = ko.observable("test");
label.subscribe(console.log.bind(console));
ko.applyBindings({ label: label });
}());
// Your code
var buttons = document.querySelectorAll("button");
var input = document.querySelector("input");
buttons[0].addEventListener("click", function() {
input.value = "generated value";
});
buttons[1].addEventListener("click", function() {
// http://stackoverflow.com/a/2856602/3297291
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
input.dispatchEvent(evt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="text" data-bind="value: label">
<button>inject value from outside</button>
<button>let knockout know something changed</button>

ko binding for checkbox: change 'checked' attr from code not change the observable field

I have checkbox at html that is binding to observable-field (field of breeze entity).
<input id="chk1" type="checkbox" data-bind="checked: data().isBirthday"/>
The binding works well from the tow sides:
When I write at code:
data().isBirthday(true);
the checkbox become checked.
and when I write at code
data().isBirthday(false);
the checkbox become unchecked.
And when I choose the checkbox by clicking with mouse - the observable field gets value of true. (Or when I unchecked by mouse - it gets value of false).
sometime, I need to change the checked attribute of the checkbox by code, specifically by retrive checkbox with jquery.
(I cannot do it by the observable field becouse of any reasons).
I do:
var control = $('#chk1')[0];
control.checked = false;
but this not change the value of the binded observable-field. It continue holding true value.
I tried to triiger the change event:
$(control).change()
It didn't help.
So, what should I do?
Here is an example:
https://jsfiddle.net/kevinvanlierde/72972fwt/4/

Can we see the html code?
Try $('#chk1').prop("checked", false);

AngularJS: How to listen to <input ng-change> when value is changed with a Slider?

Problem:
Running into an issue where I'm trying to use ng-change on a text field. The snag is I'm using a slider to change a value of this text field.
The ng-change event works when I click into the text field and start typing: logOutValue() fires and logs out in my browser.
The HTML:
I'm using this Angular range slider
—> (Example)
<div ng-repeat='obj in testObjects'>
<rzslider rz-slider-model="obj.max">
<form>
<input value='{{ obj.max }}' ng-change='logOutValue(obj)' ng-model="testObjects[obj.name]">
</form>
</div>
The slider fills in the text input's value via obj.max. This works. Again, when clicking in text field and typing, the value is logged out.
In Controller:
testObjects = {};
$scope.logOutValue = function(obj){
console.dir(obj);
};
Other ideas
I tried to use a $watch but that only also seems to fire when textbox is clicked on and typed into.
$scope.$watch('testObj', function(){
console.log('this is working?');
}, true);

if you want to catch the change in the model binded to change event externally.. the only option we have is to use $watch..
here it looks like you have added $watch to wrong varible as "testObj" is not binded as the model to the input field.
please see video to understand difference between ng-change and $watch
https://egghead.io/lessons/angularjs-using-the-ngchange-directive-in-angular

You can use slideEnded event as described here: to be notified about model changes.