Simulate a button click via JavaScript

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. <input type="checkbox" onClick="document.getElementById('theSubmitButton').click();">Check the box to simulate a button click
  2. <br>
  3. <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.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!





Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

32 thoughts on “Simulate a button click via JavaScript”

  1. I have 5 buttons with values 1, 2, 3, 4, 5 respectively. what i want is when i click a button in one webpage the button with the same value on another webpage should get clicked automatically. This is like communication between two webpages through a server. How can i do this ?

      1. Its like a multiplayer game where button clicks should be same on both webpages which are on the same domain and button once clicked cannot be reverted back. But what i thought is using socket.io for this but i am unable to implement it and get what i wanted.

        1. I apologize but I don’t understand what you are trying to achieve without any examples of code. I’ve never used socket.io.

            1. Yes, so excluding all the complexity, you are trying to send information from one place to the site. The post I sent to you is a possible solution where you would encode information in your link like:

              http://example.com?button=secondOne

              In this example, the site that is processing example.com would look for the “button” parameter and see which value has been received: in this case, “secondOne”. Then the site can render the page accordingly from the server or on the client-side with something like jQuery (which is used in the example post I sent to you).

    1. Hi sumit,

      Which element do you want to apply the focus on? I am assuming the goal is to allow the user to begin typing something and gave the input go into the element without first having to click on it such as a search bar. Please correct me if I’m wrong.

      Allen

    1. Hi Smitty,

      I have tested in IE, FireFox, and Chrome and they all worked for me. Can you please tell me which browser(s) failed to work and their version(s)?

      Thanks,

      Allen

  2. 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)

  3. 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…

    1. 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. :-) )

  4. 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.

    1. Hi Henrique,

      Yes, you can try the following instead:

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

Leave a Reply

Your email address will not be published. Required fields are marked *