Friday, May 29, 2015

Trigger click event of a button using jquery

We can fire click event of a button in jquery as below:

Senario:  I am changing dropdown value and on change of dropdown value, click event of a button will be automatically fired displaying selected value of dropdown.

Example:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>   
    <script>
        $(document).ready(function () {
            //test();
        });

        function changeOption() {           
           $("#btnSubmit").trigger("click");
        }

        function getName() {
            alert("automatic button has been clicked...." + $("#cars").val());
        }
</script>
</head>
<body>

    <div>
       <%--on click of drop down auto click of button will be done--%>
        <select name="cars" id="cars" onchange="changeOption();">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select>
        <input type="button" id="btnSubmit" value="Submit" onclick="getName();" />
    </div>

</body>
</html>