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!
Related
I am trying to change the dropdown option value at the end from "10 rows" to "50 rows". The code below changes value to "50 rows" but it does not trigger the corresponding data. It's being run manually but not via JS. URL is https://trendlyne.com/mutual-fund/nav/6309/icici-prudential-technology-fund-direct-plan-growth/
document.querySelector('.select-wrap select').getElementsByTagName('option')[4].selected = 'selected';
OR
document.querySelector(".select-wrap select").value='50'
trigger change event manually after selecting the value
document.querySelector('.select-wrap select').getElementsByTagName('option')[4].selected = true;
document.querySelector('.select-wrap select').dispatchEvent(new Event('change', {bubbles: true}));
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
As part of a chrome extension for Google calendar I develop, I want to change the "Add location" input field on a google calendar meeting event (https://calendar.google.com/calendar/b/0/r/eventedit?tab=mc).
So far I've tried the following:
let locationInputField = document.querySelector('[aria-label="Location"]');
locationInputField.value = 'Meeting Place';
locationInputField.dispatchEvent(new Event("input", { bubbles: true }));
Although the value does change, once I save the meeting event the location text ('Meeting Place') is not saved and remains empty.
I've searched for additional optional solutions and also tried using .focus() and .select() but no success there also.
Appreciate your help.
Thanks!
I'm trying to create a custom control using leaflet; here you can see the jsfiddle: https://jsfiddle.net/1tca13f3/
When the user clicks on the submit button, i need to read the value from the dropdown and the one from the text field.
This...
L.DomEvent.on(this._container, 'click', this._doSomething, this);
...as predictable, doesn't work.. and I can't read the values from the input fields. How can I do this?
The main issue you are having is that you are just alerting the string 'clicked' in your _doSomething() function. You need to look up all the values and then you can do what ever you want with those values. Here is some quick code that will at least get you going in the right direction.
_doSomething: function(event){
if(event.target.className === 'leaflet-control-opt-submit') {
var select = document.querySelector('.leaflet-control-opt-dropdown');
var input = document.querySelector('.leaflet-control-opt-input');
console.log(select.value, input.value)
}
}
it first checks to make sure the event.target is the submit button if it is it looks up the values from the inputs and for now we just console.log() them you can do whatever you want from then on with the values.
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>