How to Write Javascript Code for Web Page Automation Using AutoHotkey Chrome.ahk Tools—Digging into the Quirks of Javascript

In my last blog (“Using Chrome.ahk AutoHotkey Tools to Automatically Fill-in Web Forms (Part 1)“), I discussed how to reveal Web page control names in the source code. This time, I explain how to use those control names to write Javascript expressions for inserting data into text fields and activating menu items and buttons.

Javascript Code

HTML code creates the Web page structure—including editing fields, menus, and buttons. We use Javascript commands to initiate action within the static HTML Web. The functions found in Chrome.ahk AutoHotkey tools use Javascript expressions to send commands to the active Web page by channeling those directives through a Chrome debugger channel. You must use Javascript to communicate with the Web page.

Javascript Quirks

You’ll find a number of technical issues in Javascript which, if not understood, can cause a user untold frustration. While not too complicated, Javascript syntax can feel unfamiliar and act in an unforgiving manner. Keep the following in mind:

1. Javascript uses object-oriented syntax—not unlike that discussed in my blog “AutoHotkey Object-Oriented Notation for Associative Arrays (A Short Intro).” The heart of writing Javascript code rests in understanding object properties and methods.
2. Unlike HTML code (and AutoHotkey), Javascript code is case sensitive. That means you must use exactly the same capitalization in every Javascript command, as well as, the HTML control names from the Web page. Often, you can trace script failures to not accurately matching upper and lowercase letters.

With these two warnings, we proceed with writing Javascript expressions for inserting data into the input fields or clicking controls in the test Web page at ComputorEdge.com. For that, we use the Evaluate() function found in the Chrome.ahk toolbox:

Object.Evaluate("[Javascript expression]")

Review the test script provided in my blog “Installing Chrome.ahk AutoHotkey Web Page Automation Tools” which creates the object PageInstance for executing Javascript expressions:

PageInstance.Evaluate("alert('Hello World!');").

It’s important to understand how the Javascript expressions interact with the HTML code.

Tip: To better understand how each example in this blog works, add the code directly to the test script from this previous blog.

Controlling HTML with JavaScript

To successfully write Javascript code, we need to understand how various HTML tags interact with a Web browser. Last time, I pointed out two tag attributes which label a particular HTML control: name and id. The syntax for the Javascript expression changes depending upon which identifier you use.

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">

The Javascript Document.getElementById() function directly accesses the element regardless of where it appears in the Web page:

PageInstance.Evaluate("document.getElementById('fname').value = 'Jack';")
PageInstance.Evaluate("document.getElementById('lname').value = 'Dunning';")
PageInstance.Evaluate("document.getElementById('street').value = '1000 Main Street';") 

Notes for these Javascript function expressions:

1. When working with the current browser Web page, start the expression with the word “Document” as the top-level object.
2. Replicate the getElementById() function exactly as shown—including all upper and lowercase letters.
3. I replaced possible double-quotes with single quotes to avoid confusion between the Javascript quotes and AutoHotkey quotes. Using double-quotes inside the Chrome.ahk Evaluate() function requires escaping each with an additional double-quote ( "" ):
   
   PageInstance.Evaluate("document.getElementById(""fname"").value = ""Jack"";")
   
   Either format works but stick with one for consistency.
4. Match the letter case of the control id exactly as shown in the HTML source code. While “fname” works, “Fname” does not.
5. The Javascript code includes a semicolon ( ; ) at the end of a line. While not necessary in this AutoHotkey function, it’s a good habit to adopt.

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>

By using the property “checked”, the Javascript function clicks the value of the radio button item matching the id attribute:

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> and </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.

When using the name attribute found in an input tag to address the control, a Javascript expression also includes the <form> name or number in the expression:

PageInstance.Evaluate("document.getElementsByName('Color')[0].value = 'Red';")

The above Javascript expression finds the element named “Color” inside form [0]— the first form encountered in the Web page and sets the value property to the “Red” option.

Note: The following examples show multiple Javascript expressions for accessing the HTML Web page controls. While you’ll find no single best way to write expressions for the name attribute, you should pick a particular format for the sake of consistency.

Accessing Elements in Forms Using the Name Attribute

If the input control uses the name attribute for identification inside a <form>, then the Javascript must identify the number or name associated with that <form>.

Using Form Number and Element Number

Web browsers number <form> sections and elements within that form in a consecutive order starting with zero [0]. If unnamed or you don’t know the form or element name, simply use its number:

PageInstance.Evaluate("document.forms[0].elements[0].value = 'Fred';")
PageInstance.Evaluate("document.forms[0].elements[1].value = 'Williams';")

You can determine these numbers by counting their sequential appearance in the source code.

Using Form Number and Element Name

The Javascript expression can mix form numbers with the name attribute:

PageInstance.Evaluate("document.forms[0].firstname.value = 'Joe';")

Match the letter case of the name attribute.

Using Form Name and Element Name

If the <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

For HTML <select> lists (shown previously), set the value of the name attribute for the target <option>:

PageInstance.Evaluate("document.forms[0].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:

PageInstance.Evaluate("document.forms['testpage'].Submit.click();")

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:

http://www.computoredge.com/AutoHotkey/ChromeTestPage.html?firstname=James&lastname=Smith&street=1000+Main+Street&Color=Green&gender=male&Submit=Submit

The attribute method=”post” sends the input to the server in the background—hiding it from public view.

These examples get you started but by no means include all the alternative methods for inputting data and creating action in a browser Web page. You’ll find many resources on the Web for both HTML tags and Javascript commands.

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“!