JavaScript click a button by name from chrome console

Question

I'm trying to click programmatically a button from a web page using chrome console.

(UPDATED)The code of the button looks like this :

<FORM METHOD=GET ACTION="/xxx/yyy/kkk.jsp" > <INPUT type="hidden" name="page" value="721"> <INPUT type="hidden" name="reqType" value="ReprintO"> <INPUT type="hidden" name="title" value="Reprint Label"> <INPUT type="hidden" name="system" value="reprint"> <td align=right width=25%><input type=submit value='>' name=BTN_CHOICE5/> <td>&nbsp;&nbsp;Reprint Label </form>

There are a couple more buttons on the page that have value= '>', so I guess I need to click it using name. I tried document.querySelector('input[name="BTN_CHOICE4"]').click(); and it didn't work. How do I click this button using JS?

You should wrap your attributes values in double quotes. <input type="submit" value=">" name="BTN_CHOICE4" /> — Mike Cluck
– Mike Cluck, Commented Jun 6, 2016 at 21:34
I think you can't for security reasons. But then again, the click event should be linked in some cases to a function you could call. — DIEGO CARRASCAL
– DIEGO CARRASCAL, Commented Jun 6, 2016 at 21:34
@Fabricator: I've just updated it with a source for the button — Mr.SrJenea
– Mr.SrJenea, Commented Jun 6, 2016 at 21:39

Rakesh Nalumachu · Accepted Answer · 2016-06-06 21:32:02Z

If you have ID attribute you can use

$('#btnId').click();

Or If you want to go by name, you can use

$('[name="someName"]').click();

But it would be good if you use by Id not by name as if multiple controls have same name attribute and value, then all those controls click event will be invoked.

This approach works if you replace $ with vanilla JavaScript's document.querySelector or another call which will get the Element you're looking for.

Dima Skokov · Accepted Answer · 2016-06-06 22:00:01Z

You can use this

document.getElementsByName("BTN_CHOICE5")[0].click()

<FORM METHOD=GET ACTION="/xxx/yyy/kkk.jsp" > <INPUT type="hidden" name="page" value="721"/> <INPUT type="hidden" name="reqType" value="ReprintO"/> <INPUT type="hidden" name="title" value="Reprint Label"/> <INPUT type="hidden" name="system" value="reprint"/> <td align=right width=25%><input type=submit value='>' name=BTN_CHOICE5 onclick="alert('test')"/></td> <td>&nbsp;&nbsp;Reprint Label</td> </FORM>

rodneyrehm · Accepted Answer · 2016-06-06 22:02:23Z

regarding the following HTML:

<input type=submit value='>' name=BTN_CHOICE5/>

you should be aware of:

the character > should be entity encoded >
when an attribute doesn't use quotes (" or ') to delimit its value, all characters until the first space or > are interpreted as the value. In your case this means that name=BTN_CHOICE5/> translates to name="BTN_CJOICE5/">.

If the exercise of clicking the button is meant to submit the <form>, you should know that synthetic events like .click() do not trigger default actions. May I suggest submitting the form instead?

document.querySelector('form').submit()

Thanks. The website was not written by me, I'm just trying to make a script that will perform a certain task on this website, and this button needs to be clicked(submitted).

Ben Jensen · Accepted Answer · 2019-12-18 07:02:24Z

Like Rakesh said, $('#btnId').click(); works.

Easy mode, though, is to right click the element in the browser, click inspect (or find it in the elements selector, then select it), then simply fire the event on the selected element:

$0.click();

Collectives™ on Stack Overflow

JavaScript click a button by name from chrome console

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Linked

Related