Simulate a button click via JavaScript

March 5th, 2008 | Published in javascript | 19 Comments

There is a rare need for this type of functionality but I have found myself in a couple of situations where I needed it. Here is a quick demo of a button click that is simulated from another event handler. In this case, the button click is invoked by checking a checkbox.

Demo Check the box to simulate a button click

Here is the HTML code including the JavaScript:

1
2
3

<input type="checkbox" onClick="document.getElementById('theSubmitButton').click();">Check the box to simulate a button click
<br>
<input type="button" name="theSubmitButton" id="theSubmitButton" value="Button" onClick="alert('The button was clicked.');">

If the button is clicked directly, a JavaScript alert will pop up with the following message:

The button was clicked.

The onClick event handler for the checkbox will access the HTML DOM button object and invoke the click() method. This simulates the button click and invokes the alert.

Share with a friend:

Customize message

Responses

Feed Trackback Address

arab says:

March 25th, 2008 at 8:24 am (#)

its nice …thanx a lot

[Reply]
Scanmen says:

April 22nd, 2008 at 1:36 am (#)

Nice code … thanks

[Reply]
sunil says:

July 2nd, 2008 at 8:47 am (#)

Neat!

[Reply]
Henrique says:

August 28th, 2008 at 6:12 am (#)

Very Nice!
But do you know how to set this kind of click on a link object with HREF instead ONCLICK?
Thanks.

[Reply]
Knix reply on August 28th, 2008 7:05 am:
Hi Henrique,

Yes, you can try the following instead:
```
<a href="javascript:myJavaScriptFunction();" rel="nofollow">Click Me</a>
```
[Reply]
Miguel Céspedes says:

August 5th, 2009 at 2:05 pm (#)

Can you replace the button with a hyperlink?

[Reply]
Knix reply on August 5th, 2009 2:17 pm:
Yes, it should work!

http://www.webmasterworld.com/forum91/762.htm

[Reply]
Miguel Céspedes reply on August 5th, 2009 3:14 pm:
Thanks but not is what I’m looking for.
I want to call “Mediabox” from a button

This is the link:

play flash video »

And this is the library:
http://iaian7.com/webcode/Mediabox

[Reply]
Miguel Céspedes reply on August 5th, 2009 3:25 pm:
The link contains attributes:
<a href="http://iaian7.com/media/2007/06/2007vfx.flv" rel="mediabox[640 360]" title="flash video">play flash video »</a>
wellsantos says:

August 20th, 2009 at 5:53 am (#)

Hi, I’m looking for something like this:

function fireEvent (x, y, type) {…}

Does somebody know’s any function like above?
Because I need to simulate an event at X,Y with the mouse.

Example: fireEvent( 100, 50, “mousedown” );

Thanks.

[Reply]
Vince says:

October 16th, 2009 at 12:58 pm (#)

What if you have an control and you are trying to simulate the click event? I’m trying to fire a server-side event that’s why i need the asp:button.

You can’t use getElementById(“Button_ID”) right? Do you need the ClientID?

Thanks…

[Reply]
Steve reply on November 20th, 2009 7:31 pm:
This is great and halfway to what I need. I actually want to simulate a button push when a certain key is pressed.
What I have is a web page that shows video clips. I have “prev” and “next” buttons. Sometimes the buttons are (intentionally) off the visible page. What I want to do is capture keys to simulate a button click. The button push actually results in the page being reloaded with the prev/next video clip. So I’m not using checkboxes just a plain old key capture. The way it works is that once the page is loaded if I click anywhere on the page (document)it gives it focus and then when I click the appropriate key (P/N) it does what I would expect. However because it reloads the page I lose focus and so have to click on the page again. (Yeah probably bad design in the first place but it is what it is at this point.) So I tried to get around this by something like or but it doesn’t seem to work. So my question is how do I set focus on the document itself after it loads? (Oh and this is a page within a frameset to boot. :-) )

[Reply]
Alan says:

November 6th, 2009 at 8:54 am (#)

Also it is possible this elegant simulation:

Play a song!

[Reply]
Sophie says:

January 14th, 2010 at 3:48 am (#)

Is that possible to send a parametter to the submit button ? I have a VB function in the code beheind and i had multiple button who are supposed to active the VB function but whith a parametter. How can i do that ?

Thanks for the exemple by the way :)
(and sorry for my english)

[Reply]
drei says:

February 9th, 2010 at 8:58 am (#)

I was looking for this exactly. Very helpful! Cheers!

[Reply]
Raihan says:

March 4th, 2010 at 3:05 am (#)

Great! Solved my problem. :)
Thank you man. You guys make life easier for us.

[Reply]
gaurav says:

July 1st, 2010 at 6:30 am (#)

Thanks a lOt!

[Reply]
Use label as distant button in HTML – Community – travellin' meets real life says:

July 5th, 2010 at 4:13 am (#)

[...] Usage of JavaScript, which may be turned off on some computers, plain HTML is faster by default, … [...]
Anders K says:

July 17th, 2010 at 4:08 am (#)

Thanks! When submit() (for some unknown reason…) didn’t work, this is nice :)

[Reply]

Comments or feedback...

If you have any demos that you would like to request, please do so.

arab says:

March 25th, 2008 at 8:24 am (#)

its nice …thanx a lot

[Reply]

Scanmen says:

April 22nd, 2008 at 1:36 am (#)

Nice code … thanks

sunil says:

July 2nd, 2008 at 8:47 am (#)

Neat!

Henrique says:

August 28th, 2008 at 6:12 am (#)

Very Nice!
But do you know how to set this kind of click on a link object with HREF instead ONCLICK?
Thanks.

Knix reply on August 28th, 2008 7:05 am:

Hi Henrique,

Yes, you can try the following instead:

<a href="javascript:myJavaScriptFunction();" rel="nofollow">Click Me</a>

Miguel Céspedes says:

August 5th, 2009 at 2:05 pm (#)

Can you replace the button with a hyperlink?

Knix reply on August 5th, 2009 2:17 pm:

Yes, it should work!

http://www.webmasterworld.com/forum91/762.htm

Miguel Céspedes reply on August 5th, 2009 3:14 pm:

Thanks but not is what I’m looking for.
I want to call “Mediabox” from a button

This is the link:

play flash video »

And this is the library:
http://iaian7.com/webcode/Mediabox

Miguel Céspedes reply on August 5th, 2009 3:25 pm:

The link contains attributes:
<a href="http://iaian7.com/media/2007/06/2007vfx.flv" rel="mediabox[640 360]" title="flash video">play flash video »</a>

wellsantos says:

August 20th, 2009 at 5:53 am (#)

Hi, I’m looking for something like this:

function fireEvent (x, y, type) {…}

Does somebody know’s any function like above?
Because I need to simulate an event at X,Y with the mouse.

Example: fireEvent( 100, 50, “mousedown” );

Thanks.

Vince says:

October 16th, 2009 at 12:58 pm (#)

What if you have an control and you are trying to simulate the click event? I’m trying to fire a server-side event that’s why i need the asp:button.

You can’t use getElementById(“Button_ID”) right? Do you need the ClientID?

Thanks…

Steve reply on November 20th, 2009 7:31 pm:

This is great and halfway to what I need. I actually want to simulate a button push when a certain key is pressed.
What I have is a web page that shows video clips. I have “prev” and “next” buttons. Sometimes the buttons are (intentionally) off the visible page. What I want to do is capture keys to simulate a button click. The button push actually results in the page being reloaded with the prev/next video clip. So I’m not using checkboxes just a plain old key capture. The way it works is that once the page is loaded if I click anywhere on the page (document)it gives it focus and then when I click the appropriate key (P/N) it does what I would expect. However because it reloads the page I lose focus and so have to click on the page again. (Yeah probably bad design in the first place but it is what it is at this point.) So I tried to get around this by something like or but it doesn’t seem to work. So my question is how do I set focus on the document itself after it loads? (Oh and this is a page within a frameset to boot. :-) )

Alan says:

November 6th, 2009 at 8:54 am (#)

Also it is possible this elegant simulation:

Play a song!

Sophie says:

January 14th, 2010 at 3:48 am (#)

Is that possible to send a parametter to the submit button ? I have a VB function in the code beheind and i had multiple button who are supposed to active the VB function but whith a parametter. How can i do that ?

Thanks for the exemple by the way :)
(and sorry for my english)

drei says:

February 9th, 2010 at 8:58 am (#)

I was looking for this exactly. Very helpful! Cheers!

Raihan says:

March 4th, 2010 at 3:05 am (#)

Great! Solved my problem. :)
Thank you man. You guys make life easier for us.

gaurav says:

July 1st, 2010 at 6:30 am (#)

Thanks a lOt!

Use label as distant button in HTML – Community – travellin' meets real life says:

July 5th, 2010 at 4:13 am (#)

[...] Usage of JavaScript, which may be turned off on some computers, plain HTML is faster by default, … [...]

Anders K says:

July 17th, 2010 at 4:08 am (#)

Thanks! When submit() (for some unknown reason…) didn’t work, this is nice :)

Random Snippets