How can I press this button using Greasemonkey?

Question

I am new to JS and I am trying to click on this button:

<a class="simplebutton" href="javascript:void(0);">find</a> 

XPath of this button: /html/body/div[5]/div/span[2]/a , and a snapshot of the landing page can be seen on this script .

This is what I tried, but it does not work. (I use the getElementsByClassName function that I got from http://code.google.com/p/getelementsbyclassname/ ):

 document.getElementsByClassName('simplebutton').submit(); 

Answer 1

Here is the complete script that does this. It uses jQuery for : contains () a selector .

Update: Changed script for AJAX account.

 // ==UserScript== // @name _Click on a specific link // @include http://YOUR_SERVER.COM/YOUR_PATH/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js // @require https://gist.github.com/raw/2625891/waitForKeyElements.js // @grant GM_addStyle // ==/UserScript== /*- The @grant directive is needed to work around a major design change introduced in GM 1.0. It restores the sandbox. */ //--- Note that contains() is CASE-SENSITIVE. waitForKeyElements ("a.simplebutton:contains('follow')", clickOnFollowButton); function clickOnFollowButton (jNode) { var clickEvent = document.createEvent ('MouseEvents'); clickEvent.initEvent ('click', true, true); jNode[0].dispatchEvent (clickEvent); } 

---

Note: in some cases, the term contains() may cause a false error. For example, if there is a <a class="simplebutton">unfollow</a> button.
Here is one way to prevent false clicks. Change the clickOnFollowButton function as follows:

 function clickOnFollowButton (jNode) { if ( ! /^\s*follow\s*$/i.test (jNode.text() ) ) { /*--- If the node contains anything but "follow" (surrounded by optional whitespace), don't click it. */ return false; } var clickEvent = document.createEvent ('MouseEvents'); clickEvent.initEvent ('click', true, true); jNode[0].dispatchEvent (clickEvent); } 

---

A few things:

• getElementsByClassName() returns a list or "collection" of elements. You cannot just .submit() get its result. .submit() for individual elements.

• Since this is a .submit() link, this will not work. .click() will often work, but often will not - when the link is passed by the event listener (which should be for this question).

  The clickEvent code above works in almost all cases.

• The code for the page you gave has no link, with class="simplebutton" and the text containing find !

• Which browser are you using? What version of Greasemonkey? And which OS?

• Find and use the appropriate javascript link and the corresponding DOM link. The link provided in the question is for a library that is not standard and is not included in your script (most likely).

  • The MDN JavaScript Reference is the latest and most applicable for Greasemonkey applications (Firefox extension).
  • Also, the MDN Object Model Reference Model (DOM) .
    
    

• Use a CSS path that is much simpler than XPATH for this kind of thing. Firebug will show you the CSS path for this element.
  jQuery uses CSS selectors / paths, like document.querySelector() (non jQuery method).

Answer 2

You need to use the click method, not submit . You can use submit when you want to submit the form.

getElementsByClassName also returns an array of elements, you need to get the one you want and then call click on it.

 document.getElementsByClassName('simplebutton')[0].click();​ 

http://jsfiddle.net/kLDde/