How To Trigger A Button Click Event With Javascript

Occasionally you will want to trigger an event on an element without directly causing it.
In this article I will explain how to manually trigger a click event for a button without having to click on it.
In fact, the click event can be replaced with any other event that you want to trigger, though the click event is probably the most common you will require.

Use the JQuery .trigger() method

In the below example I’ve created 2 buttons and registered a click event for each of them.
If you click button1, you will get an alert telling you so, however if you click button 2, you will execute the click event for button 2, but because we’ve used the JQuery .trigger() method, you will also execute the click event for button1.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
 
            $("#button1").click(function () {
                alert("You clicked button 1");
            });
 
            $("#button2").click(function () {
                alert("You clicked button 2");
 
                //This will trigger the click event of button1
                $("#button1").trigger("click");
            });
 
        });
    </script>
    </head>
    <body>
    <input id="button1" type="button" value="Button 1"/>
    <input id="button2" type="button" value="Button 2" />
    </body>
    </html>

Example Implementation:

The previous example of how to trigger a button click event might not make it obvious why you would do such a thing.

Here’s an example of a more realistic scenario.

Suppose you have a select HTML element with many options and 2 buttons, “Apply Filters” and “Get Top 5”.
When the “Apply Filters” button is clicked, all of the selected options will be sent to the server, however, if the user presses the “Get Top 10” button, rather than writing out your AJAX statement, validation logic etc again, you could select the top 10 items in the select element (as if the user had selected them themselves) and then trigger the click event on the “Apply Filters” button.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
 
            $("#btnApplyFilters").click(function () {
                alert("You clicked button 1");
 
                //AJAX here which posts back to the server
                var myData = {
                    options: $("select option:selected").toArray()
                };
 
                //This wont really work as "/someLocation" is not a real url
                $.ajax({
                    url: "/someLocation",
                    async: true,
                    data: JSON.stringify(myData),
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    type: "POST",
                    success: function (data) {
                        alert("success " + data);
                    },
                    error: function (data) {
                        alert("error " + data);
                    },
                    complete: function () {
                        alert("complete");
                    }
                });
            });
 
 
            $("#btnGetAll").click(function () {
                alert("You clicked button 2");
 
                //select the top 5 options
                $("select option:lt(5)").attr("selected", "selected");
 
                //This will trigger the click event of btnApplyFilters
                $("#btnApplyFilters").trigger("click");
            });
        });
    </script>
 
    </head>
    <body>
    <input id="btnApplyFilters" type="button" value="Apply Filters" />
    <input id="btnGetAll" type="button" value="Get All" />
 
    <select size="10" multiple>
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>
    <option>option4</option>
    <option>option5</option>
    <option>option6</option>
    <option>option7</option>
    <option>option8</option>
    <option>option9</option>
    <option>option10</option>
    </select>
    </body>
    </html>

If you enjoyed this article, please consider giving it a +1

Online Course

React Native Chat App with Firebase - Firestore Course 2020

This course is for every programmer who wants to learn mobile application development and want to increase their skills to the next level.

Online Course

jQuery for Beginner to Advanced: 12 Projects included

This is a Beginner to Advanced course and perfectly suitable for anyone interested to learn jQuery effects and animations for their web projects. If you have basic knowledge of HTML, CSS, and JavaScript then you're good to go. After finish, you'll learn 12 really cool effects that you can use in your web projects. Moreover, using this knowledge you'll be able to do more interesting effects on your own.

Make a Great Site

Monday, July 20, 2020