How do you find and click on a specific button on a webpage using javascript?

Question

Basically, I'm trying to write a command-line client-side script (javascript) for purchasing something online automatically.

The problem is that on this particular webpage the button I'm trying to click (add to cart) appears several times in the page (for different products).

I know that:

document.getElementById('addToCart').submit();

will click on addToCart, but since there are several buttons with that same name how can I find and click on the specific button for a certain product?

We can assume that we know the product name in advance and that each addToCart button has a unique id (which I don't know).

<snark>Simple: you take your mouse and click on the button.</snark> — zzzzBov
– zzzzBov, Commented Jul 24, 2013 at 15:55
can we use jQuery? the reason I ask is that there should be something unique in the surrounding tag hierarchy, can you post a html snippet of the product with its button? — jenson-button-event
– jenson-button-event, Commented Jul 24, 2013 at 15:56
If there are several buttons with the id addToCart your webpage is broken. Ids must be unique within a document. — millimoose
– millimoose, Commented Jul 24, 2013 at 15:56
Also the general answer here is "learn to screen scrape". Basically you have to find the markup for the product name you know, then walk around the DOM structure until you get to its associated button. What exactly needs to be done depends heavily on said structure. I second the suggestion to look at jQuery and its selectors and traversal methods, then loading up your browsers dev console and experimenting. — millimoose
– millimoose, Commented Jul 24, 2013 at 15:59
At the very least you'll have to show us some example HTML for the element that's the common parent of both the product name and the button you want to click. — millimoose
– millimoose, Commented Jul 24, 2013 at 15:59

MDEV · Accepted Answer · 2013-07-24 15:55:12Z

2

You kinda answered it yourself, if you know the product name already, surely you already know it's button's ID?

document.getElementById('button234').click()

answered Jul 24, 2013 at 15:55

MDEV

10.9k2 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kumaheiyama · Accepted Answer · 2013-07-24 15:58:27Z

1

There should never be more than one element on a page by a specific ID. If you need more than one element, use the class attribute.

As SmokeyPHP writes, you can use .click() or .submit() to trigger the click event.

answered Jul 24, 2013 at 15:58

kumaheiyama

7841 gold badge13 silver badges30 bronze badges

Comments

Kenn · Accepted Answer · 2013-07-24 16:09:06Z

everyone is correct you should only have a single ID but here a little more narative of how you can do this.

So you are saying you have some dynamically generated HTML right? You get a list of products back and you could have a list of buttons that looks like the following.

<input id="productId_233442" class="addToCart" type="button" value="addToCart"></input><br/>
<input id="productId_25AD22" class="addToCart" type="button" value="addToCart"></input><br/>
<input id="productId_1J3422" class="addToCart" type="button" value="addToCart"></input><br/>

For styling purposes you could give them all the same class of addToCart as in the above example.

As for the java script you could have something like this.

$(document).ready(function(){
  $(document).click(function(event){
        alert(event.target.id);
    });
});

I am using JQuery which I would suggest but you can do this in pure JS if you wanted but I can't imagine why you would.

see the following fiddle. http://jsfiddle.net/r0k3t/dRam5/

Collectives™ on Stack Overflow

How do you find and click on a specific button on a webpage using javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related