Way to synchronize two editable text boxes on a specific web page? - javascript

I'm currently using Tampermonkey to inject JavaScript into specific web pages.
For my job, I have to constantly fill in numerous text boxes on the same web page with the same exact information. So instead of manually copying and pasting everything to each separate text box, I'd like to be able to synchronize my input on one text box with another. So as an example, theoretically, I could type "dog" into the first box, and the word "dog" would appear in the second box automatically. Is this possible in Tampermonkey via JavaScript?
I'm assuming <input type="text"> and/or an element ID or name could be used to link the interaction of two elements on a specific page?
I'm not exactly sure where to get started here, so any and all advice would be deeply appreciated.

To synchronize all text boxes on the page, you could do something like this:
document.addEventListener("input",function(e) {
if (e.target.matches("input[type=text]")) {
document.querySelectorAll("input[type=text]").forEach(function(a) {
a.value = e.target.value;
});
}
});

Related

How to select an item from a drop down menu on a website that's coded with an html input text object?

I'm trying to build a Chrome Extension that autofills a website form. The form has several drop down menus. However, these are not coded with the HTML select object. Instead, they're coded with the HTML input text object (see the attached photo) (https://i.stack.imgur.com/6FynG.png).
I'd like to build functionality that mirrors selectedIndex and select one of the drop down menu items.
Is this possible?
I've tried 3 things:
I've used .execCommand to mimic the user typing into the input box to narrow down the number of drop downs that appear. This isn't a complete solution because the user must still click on the drop down menu.
I've used .innerHTML and similar methods to change the websites HTML, so that it matches the output of when a user selects an option from the drop down menu. This makes the website look like the user has selected an option, but it doesn't full work either. As soon as the user clicks outside of the input field, the field revers back to being empty (maybe the form is refreshing?)
I've explored using Selenium, but I don't think it makes much sense here. I'm trying to build a Chrome Extension for other users, rather than automate testing.

Script to fill a value automatically in the webpage input box

My job is to order diagnostic tests for patients and I need to write 6-7 characters value for each diagnostic test. I have 24 different values and I need to fill it many thousands of times. I am thinking to create 24 different scripts with Tampermonkey to speed up my job by clicking on the script box.
So the thing is that I need to fill this
box. Here are the input id and everything of that box in the console. Then I type the value manually, I get popup list which updates every time I type one character (same principle as google or youtube search box), here is the popup list after I type a value and if I want that diagnostic test, I need to click on it from the popup list, I cannot just simply click enter. So this is the code I have to fill the box by a value:
document.body.appendChild(element)
element.addEventListener('click', function(){
document.querySelector("input#generic_test_order_search.ui-autocomplete-input").value = '15002 '
})
The script fills the value, but the popup list doesn't appear and I need to click on the box, delete one character and write it again to get a list and then to choose a diagnostic test from it. Still, time-consuming.
I wonder, is it possible to make a script to add automatically a diagnostic test from the list like this example? If no, is it somehow possible to make that popup list would appear and I won't need to click on the box, delete one character and write it again? At least, could I make that the box is clicked after a value has been filled? I tried this code but doesn't work: document.querySelector("input#generic_test_order_search.ui-autocomplete-input").click()
Please help me to make it as automatic as possible, which would save me hundreds of hours in the long-term.
1 - As for the second part of the question. Picture 4.
It is pretty simple to make an auto-fill for the dropping parametres, we just might need the html-code of the elements.
For example,
document.getElementsByTagName('input')[0].click(); clicks the first input checkbox from the first input
document.getElementsByTagName('select')[0].selectedIndex = 1; selects the second value from the first select
document.getElementsByTagName('button')[0].click();clicks the first button
To make it more precise you might use class at first, at then tag:
document.getElementsByClassName('testClassDependingOnExistingClasses')[0].getElementsByTagName('button')[0].click(); for example.
Anything you do manually on a page like that can be done automatically with JS.
2 - As for the first part of the question. Picture 2.
Here is the part of the answer.
How to trigger arrow down press in js?
Maybe this code might help, but not enough information, since no data on html-code of the dropped elements.
document.getElementById('generic_test_order_search').clildren[0].click();

Html element to allow Crtl+A of the text inside it

I'm creating a website that allows a user to enter some data into a form, and the form once submitted will return a JSON. My website has a header, a footer, etc. Right now, I'm displaying the JSON inside a div.
My problem: the JSON can potentially be very large. The user of my website would ideally be able to copy the JSON result and use it for other purposes. If the user tries to select the whole JSON via Ctrl+A, it will select all the text in my website, i.e., header and footer. If the user just wants to get the JSON (and it is very large), he/she will have to manually select the JSON.
Is there a HTML element that I can use to render the JSON in (instead of div) so that, when the cursor is focused on this element, it will allow Ctrl+A to just select all the text inside this element? Something similar to this: http://www.jsoneditoronline.org/
I've been looking for different HTML elements, such as pre, but they don't achieve my goal. Maybe I'm not using the right keywords to search in a search engine.
Thanks.
A textarea element will do the trick or add contenteditable="true" to any element and they will be able to select all that way as well. Additionally check out https://clipboardjs.com/ which will allow you to automatically copy content to the users clipboard for them.

JavaScript dummy/proxy input for another DOM element

I'm using an iframe to get the content of a registration form on a web page, and, as I have to show this registration form inside an HTML app for Android, I'd like to analyse the html inside the iframe to search for input textfields and to use my custom text field as "dummy" or "proxy" for the considered element:
Let me explain better:
As the web page wouldn't give the user the same easy approach as an app, instead of clicking on a textfield and having the problem that the virtual keyboard overlaps the other fields making it difficult to go further.
I want to create a div that covers the iframe and has a text field inside with the same functionality as the one clicked: by this way after entering the text into the dummy field and clicking an ok button aside, the clicked field would be updated and all the other things hidden (virtual keyboard, etc.).
It would be simple if the goal was just to copy a text from a field to another, but the real problem is that the clicked field could have some events like onkeypress or onchange (e.g. to autocomplete) and so on, and I should get the same behaviour on the dummy field.
In an imaginary world I'd do:
document.getElementById("dummy") = document.getElementById("original")
And then destroying and recreating the dummy whenever required.
Do you know if is there something possible to do?
You can't read a div from inside of an iframe after the iframe has loaded. The reason for this is to prevent hackers from making programs that can grab your credit card numbers from web-based forms through iframes and then use the apps to record them.
UPDATE
You would have to retrieve the entire form in the background, then render it again using webkit, then when the person clicks submit, you would have to submit the exact same form data to the host from your device.
Its possible, but I don't see a good reason why you would ever need to use that.

how to inject text into a textbox with firefox extension

This question was probably asked few time by now... but I didn't find any solution in the last 2 days so I'm asking it in here.
I need to inject some text into a textbox that has an ID and I already know it. the scenario is like that:
The user insert a text into the textbox inside my toolbar.
The user clicks on a button in my toolar.
The function in the button should redirect the user to a new page in the background, inject a text into a specified textbox and click a button in that webpage.
Return a link that is generated on the webpage.
I know how to open a new webpage. now all is left is the rest.
I can't seem to inject the text into the specified textbox.
Also to note, I can't use greasemonkey on this project and that's why I will have to write everything I'll need to write.
If you can direct me to the starting point for this problem it would be nice.
The textbox is XUL textbox or html textarea?
It look like your scenario is simulate submit a form in background, why not just directly create a XMLHttpRequest to do this, no need to interactive with UI.
Update:
If it is a XUL textbox, you can use value property
var textbox = window.document.getElementById(textboxId);
if (textbox) {
textbox.value = 'your text';
}

Categories

Resources