Changing Text Input from Chrome Bookmark - javascript

I am trying to fill out text input's on a site that does not have JQuery. However, I keep getting a null return when trying to use Javascript's getElementById function with a Google Chrome Bookmark.
How to replicate:
Go to W3Schools: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_value2
Add this as a bookmark:
javascript:(function(){
console.log(document.getElementById("myText"));
})();
Click on the bookmark and see "null" in the console instead of the text input.
(To get the desired output you can change W3's code to console.log the element instead of changing it's value and then click the W3's "Try it" button)
--
The goal here is to be able to change these text input values by script.
Ex) Change "Mickey" to "Johnny Bravo" through bookmark click

Drag the padlock icon to your bookmarks toolbar, right-click, edit and set the URL to:
javascript:document.getElementById("myText").value = "Johnny Bravo";document.close();
Then click it to change the value of myText. You need to close the document after setting the value or it will write to a new document.
The bookmarklet above won't work in your TryIt editor because the form is in an iFrame named 'iframeResult'. But this works:
javascript: window.frames.iframeResult.document.getElementById("myText").value = "Johnny Bravo";document.close();

Related

Click button and get text with CeFSharp

I'm creating a program in vb.net to go to https://www.royalmail.com/track-your-item#/ and:
Enter some text in the Reference Number box
Click the button 'Track your delivery'
Grab the text from the page so I can search for the delivery date
I've had to switch to using CeFSharp, as the microsoft browser doesn't want to load the page, so this is my first time with it.
This is what I have so far (CWB1 is the name of the browser object):
CWB1.LoadUrl("https://www.royalmail.com/track-your-item#")
CWB1.LoadUrl("javascript:void( document.getElementById( 'barcode-input' ).value='12345678' )")
Dim script = "var pagebutton = document.getElementById('submit');
pagebutton.click();"
CWB1.ExecuteScriptAsyncWhenPageLoaded(script)
The page loads, the text '12345678' is entered in the search box, but running the script to press the button does nothing.
I can't figure out how to press the button. I thought it must be the wrong id, but inspecting the web page seems to give button id="submit" so this should work? I've tried a few variations but nothing seems to move me forwards.
I also then need to grab the text from the page - not sure how to so this either?
Thanks for any help!
OK, I've found that the button press only works if you enter the text in the field via sendkey event. So the button press code was working after all - I guess the site's security is trying to make sure someone is typing the text in, instead of a robot. Thanks for your help with this amaitland!

Javascript issue- Cannot Submit form after document.getElementById

document.getElementById("hs-search-origin").value = myloc;
I am successfully writing the value in a Text Box
The text box is attached to a searchbox and up on clicking the search button, search is not happening.
I have to edit the textbox, like remove character or add character in the text box, to make it work.
For Ex:
myloc="i love stackoverflow";
document.getElementById("hs-search-origin").value = myloc;
The text box shows the value i.e "i love stackoverflow" but on clicking the button, nothing happens.
I have to either edit the text in the textbox and then click on search to make it work. What is the issue, any guess
You have some code which runs (and does a search) when the user changes the value of the text box.
It doesn't run when you change the value with JavaScript.
You need to call that code explicitly when you want it to fire in response to something else than the user typing.

Dynamically change form input from Firefox/Chrome console

I'm learning javascript right now (using firebug console of browser) and have trouble understanding how to activate changes when I enter a command.
For example, one website has a dropdown box name "mvprodvaronetimeorder" with several options like:
IpA-Q-Q, IpQ-Q-Q, Ipw-Q-Q... I can use the command to get to the 3rd value:
document.getElementsByName("mvprodvaronetimeorder")[0].value="Ipg-Q-Q";
However, it doesn't activate the same action when I choose the corresponding value from dropdown box (display another dropdown to choose). Then I cant interact with 2nd dropdown box and other things after that.
Same thing happens when I try to fill a text box using command like:
document.getElementById("luckyme")[0].value="You are lucky";
While it change but the change doesnt reflect when I click the submit button, it require me to copy paste or type of at least click to that textbox to activate changes.
Is there anyone can suggest me how to automated the process from console?
Assigning the value in JavaScript updates the selection, but it doesn't notify the code running on that page of the change.
To make the page react to the change you also need to trigger a change event on the dropdown:
var el = document.getElementsByName("mvprodvaronetimeorder")[0];
el.value = "Ipg-Q-Q"
el.dispatchEvent(new Event("change"))
The page then knows the selection has changed and it shows the new dropdown below.
To find out what events an element is listening to you can use getEventListeners:
getEventListeners(document.getElementsByName("mvprodvaronetimeorder")[0])
// Object {change: Array[1]}

Javascript click event not firing on element in user control in google chrome

I have a user control and an image within that and I wish to execute some javascript when it;s clicked, in the Page_Load event of my user control I add the following:
imgCalendar.Attributes.Add("onclick", "displayDatePicker('" + txtCalendar.ClientID + "');");
So I'm adding an onclick event to imgCalendar and I want that event to fill in my text box txtCalendar with the output of my Javascript function displayDatePicker, it works perfectly fine in Internet Explorer but the click event does not fire in chrome, any ideas on why this is? are there any other ways I can add that click attribute to my image?
Shouldn't you be doing something like this?
imgCalendar.addEventListener("click", "displayDatePicker('"+txtCalendar.ClientID+"')", false);
The problem was that the name of the text box control was chaning when the HTML was renderd, so the function: displayDatePicker('uc1_txtCalendar') was getting called whereas the text box's name (note that it's name property not ID is used client side since an asp text box is rendered as a html input control) was rendered to 'uc111$textCalender', that '$' thrown in in place of the underscore was the problem, I resolved this by giving everything a static ClientIDMode (for the text box and it's container which in this case is the User Control)

Button to Copy a Text Box

I need a simple script that gives me a button that when clicked will copy the contents of a text input box to the clipboard. Or it could be a script that when you click on the text input box, automatically copies the contents to the clipboard and displays a "Copy" message next to the text input box.
I've seen them all over the web, but can't find the code for one now.
This example uses jQuery:
Assuming an input box with an id of foo, and a button with an id of clickme, here's how I'd do it:
var inputText = "";
$("#clickme").click(function() {
inputText = $("#foo").val();
});
// inputText now has the input box's value
Edit:
After your clarification, I now understand what you are trying to do. Unfortunately, flash 10 broke most of the methods to do this. However, some great people wrote ZeroClipboard, which is fully compatible with flash 10 and makes it really easy to accomplish this task. Their wiki explains usage.

Categories

Resources