How to Fill Out Forms on Websites with AppleScript

NEW! AppleScript Maker Beta: Hey Everyone, I am working on a new AppleScript tool that is going to BLOW YOUR MIND! After reading this tutorial use this tool to easily build your AppleScripts. Click Here!

In a previous tutorial we covered how to use AppleScript to automate navigating to a web page. Now we are going to learn how to automate putting information into forms. Using this information along with what we learned in clicking buttons on a web page , we can perform an automated search or automatically login to a website! For this first example we are going to automate a search in Google.

Before proceeding please read clicking buttons on a web page. This will be very helpful in understanding what is going on here.

First thing is first, go to the web page that you need to fill out a form for…in this case we are using Google.com while using the Google Chrome browser.

Next we are going to right click on the part of the form that we would like to fill out, and click inspect element…

This will split your window into an upper half with the website, and the bottom half that displays the source code.

We are going to now look at the highlighted part of the code and search for anything that we can use to identify the form we want to enter our text into.

We want to look inside of the <input> tag to find either something that says “id”, “class”, or “name”. In this case we have all three!

Inputting values into a form using ID

We are going to specifically look at the part of the code inside of the <input> tag that says id=”lst-ib”…

Next we enter the following code into our AppleScript editor. This code is a function that we can call at anytime in our script.

to inputByID(theId, theValue) -- creates the function

 tell application "Safari" -- tells AppleScript to use Safari

do JavaScript "  document.getElementById('" & theId & "').value ='" & theValue & "';" in document 1 -- gets the ID that we specified and then inputs the value we specified into the  ourform

 end tell -- stops using safari

end inputByID --marks the end of the function

 

To call this function, or to use it when we want we use the following code:

inputByID("lst-ib", "how to peel a banana")

Which when run will produce the result…

Inputting values into a form using Class

This time we are going to look at the Class attribute inside of the <input> tag.

As you can see we will be using “gsfi” as our class identifier.

Now we enter this slightly changed code into our AppleScript editor:

to inputByClass(theclass, num, theValue)

tell application "Safari"

do JavaScript "

  document.getElementsByClassName('" & theclass & "')[" & num & "].value ='" & theValue & "';" in document 1

end tell

end inputByClass

And to call the function, we use the following code:

inputByClass(“gsfi”, 0, “how to eat a grape”)

The first part, the “gsfi” is the Class Name we found in our code. The last part is the value we want to enter into the form. But what is that 0 in the middle? That is how Applescript determines which instance of the Class to put the information into!

On pages with a single form, this will most likely be 0, however if there are several lines in your form you may have to adjust this number. Trial and error is the least complicated way to figure out what number to place here. If you need more instructions on how to use this number please check read the clicking buttons on a web page tutorial.

Inputting values into a form using Name

Just as above we are going to find the attribute in the code that says “Name”. In this case the Name of this element in this form is “q”.

Now we input this code into our Applescript editor:

to inputByName(theName, num, theValue)

tell application "Safari"

do JavaScript " 

  document.getElementsByName('" & theName & "')[" & num & "].value ='" & theValue & "';" in document 1

end tell

end inputByName

And we call it in our script with…

inputByName("q", 0, "how to peel a bananas")

Just like above we need to figure out which instance of the Name to use in order to fill out the middle “num” value in our function.

Inputting values into a form using Tag Name

Lets say you are working on a form that has an input with no id, no class, and no name…How would you input your text then? By telling Applescript to look up the Tag name of <input>.

Enter the following code into your AppleScript editor:

to inputByTagName(thetagName, num, theValue)

tell application "Safari"

do JavaScript " 

  document.getElementsByTagName('" & thetagName & "')[" & num & "].value ='" & theValue & "';" in document 1

end tell

end inputByTagName

Then yo call the function use…

inputByTagName("input", 3, "How to Peel The Bananas")

In this case the middle “num” parameter in our function inputByTagName(thetagName, num, theValue) has changed from 0 to 3. This is because there are 3 elements that have the tag <input> before this one. As with inputting by class and name, you will have to adjust this middle number until your code works.

Remember… 0 is the first instance of an element that has the input tag, 1 is the second, 2, is the third, etc…

NOW if you combine this script with the tutorial on clicking buttons on a web page, you can perform an automated search or automatically login to a web page using AppleScript!