Tip: To better understand how each example in this blog works, add the code directly to the test script from this previous blog.
First, we look at the more up-to-date id attribute.
The Document.getElementById() Function
By using the id attribute, Web designers can assign unique labels to almost any tag by embedding the attribute inside the arrow brackets:
<input id="street" name="street">
PageInstance.Evaluate("document.getElementById('fname').value = 'Jack';") PageInstance.Evaluate("document.getElementById('lname').value = 'Dunning';")
PageInstance.Evaluate("document.getElementById('street').value = '1000 Main Street';")
- When working with the current browser Web page, start the expression with the word “Document” as the top-level object.
- Replicate the getElementById() function exactly as shown—including all upper and lowercase letters.
PageInstance.Evaluate("document.getElementById(""fname"").value = ""Jack"";")
Either format works but stick with one for consistency.
- Match the letter case of the control id exactly as shown in the HTML source code. While “fname” works, “Fname” does not.
Rule of Thumb: Use the Element ID
If upon inspection of the Web page source code, you find an id attribute, use it. As you’ll see in later examples, the name attribute adds more complications. The next two examples show how to select an item from a menu and radio button.
Choose Value from a Selection List
This Chrome.ahk function selects “Blue” from the “Color” dropdown menu in the test page using the id attribute:
The following HTML code sets up a dropdown menu:
<select name="Color" id="Color"> <option>Red</option> <option>Blue</option> <option>Green</option> </select>
By setting the value of the menu Color to “Blue”, the menu reacts accordingly.
PageInstance.Evaluate("document.getElementById('Color').value = 'Blue';")
Pick a Radio Button
Radio buttons offer a number of unique options. Pick only one.
In this case, the name attribute refers to the entire set of buttons, while id and value match. Using id refers to the specific radio button selection without requiring the name of the button set:
<input id="male" name="gender" value="male" type="radio"> <label for="male">Male</label><br> <input id="female" name="gender" value="female" type="radio"> <label for="female">Female</label><br>
PageInstance.Evaluate("document.getElementById(""male"").checked = true;")
HTML Forms for Passing Data to the Next Web Page
An HTML form is used to collect user input. The user input is most often sent to a server for processing.https://www.w3schools.com/html/html_forms.asp
Web pages use the tags
</Form> to contain input controls for transmitting data to another Web page. Web servers process forms by capturing the data returned by the Web browsers and using that data as variables in the target page.
<form> name or number in the expression:
PageInstance.Evaluate("document.getElementsByName('Color').value = 'Red';")
Accessing Elements in Forms Using the Name Attribute
If the input control uses the name attribute for identification inside a
Using Form Number and Element Number
Web browsers number
<form> sections and elements within that form in a consecutive order starting with zero
. If unnamed or you don’t know the form or element name, simply use its number:
PageInstance.Evaluate("document.forms.elements.value = 'Fred';") PageInstance.Evaluate("document.forms.elements.value = 'Williams';")
You can determine these numbers by counting their sequential appearance in the source code.
Using Form Number and Element Name
PageInstance.Evaluate("document.forms.firstname.value = 'Joe';")
Match the letter case of the name attribute.
Using Form Name and Element Name
<form> contains its own name attribute, the expression can replace the number with that name:
PageInstance.Evaluate("document.forms['testpage'].lastname.value = 'Davis';")
Picking from a Selection List by Name
<select> lists (shown previously), set the value of the name attribute for the target
PageInstance.Evaluate("document.forms.Color.value = 'Blue';")
Using Form Name and Element Name for Radio Buttons
In this case, we skip the name attribute and use the value attribute (shown in the previous example of a radio button) to set the checked property of the radio button to true:
PageInstance.Evaluate("document.forms['testpage'].female.checked = true;")
Clicking a Button
To click a button and initiate its action, you can use the following format:
Clicking a submit button within a
<form> sends the input back to the Web server. The attribute method=”get” displays the input as parameters appended to the URL:
The attribute method=”post” sends the input to the server in the background—hiding it from public view.
Click the Follow button at the top of the sidebar on the right of this page for e-mail notification of new blogs. (If you’re reading this on a tablet or your phone, then you must scroll all the way to the end of the blog—pass any comments—to find the Follow button.)
This post was proofread by Grammarly
(Any other mistakes are all mine.)
(Full disclosure: If you sign up for a free Grammarly account, I get 20¢. I use the spelling/grammar checking service all the time, but, then again, I write a lot more than most people. I recommend Grammarly because it works and it’s free.)
Find my AutoHotkey books at ComputorEdge E-Books!
Find quick-start AutoHotkey classes at “Robotic Desktop Automation with AutoHotkey“!