Onclick event html button on serverside

Question

I have this project given to me the design of the project is on javaScript function the java script is call on the master page named Admin.Master. The javascript funtion for design is shared by two webform rewardPoints.aspx and Transactions.aspx

Now my question is how can i able to add on click event in btnExportExcel inside Transaction.aspx

my java script funtion :

function TransSearchControls(page, cs) {
    var html = "";
    var display = (cs == "all") ? "inline-block" : "none";

    html += "<div class='col-xs-12 body'>";
    html += "<div class='col-xs-1 text-left' style='margin-top:5px'>Filter/s:</div>";
    html += "<div class='col-xs-6 col-sm-2'><input type='text' class='input-sm form-control trans-controls-txt-search' placeholder='Search Employee' /></div>";
    html += "<div class='col-xs-6 col-sm-2' style='display:" + display + "'><select class='input-sm slctSoaFilter form-control' >";
    html += "<option value='all' selected disabled>Select Transactions</option>";
    html += "<option value='all'>All</option>";
    html += "<option value='redeem'>Redeemed</option>";
    html += "<option value='earn'>Earned</option>";
    html += "</select></div>";
    html += "<div class='col-xs-1 text-right' style='margin-top:5px'>Date/s:</div>";
    html += "<div class='col-xs-5 col-sm-2'><input type='date' class='input-sm form-control dateFrom' /></div>";
    html += "<div class='col-xs-5 col-sm-2'><input type='date' class='input-sm form-control dateTo' /></div>";

    html += "<div class='col-xs-6 col-sm-2'><button class='btn btn-sm btn-primary btnSearchTrans form-control' type='button' page='" + page + "'><span class='glyphicon glyphicon-search'></span>&nbsp;&nbsp;Search</button></div>";
    html += "</div>";
    if (page == "Transactions") {
        html += "<div class='col-xs-12' style='margin-top:10px'>";
        html += "<button type='button' class='btn btn-sm btn-danger' id='btnExportExcel'><span class='glyphicon glyphicon glyphicon-import'></span>&nbsp;&nbsp;Export Excel</button>";
        html += "<span class='filename-container'></span>";
        html += "</div>";
    }
    if (page == "RewardPoints") {
        html += "<div class='col-xs-12' style='margin-top:10px'>";
        html += "<button type='button' class='btn btn-sm btn-primary' id='btnAddPoints'><span class='glyphicon glyphicon-plus-sign'></span>&nbsp;&nbsp;Add Points</button>&emsp;";
        html += "<button type='button' class='btn btn-sm btn-danger' id='btnImportExcel'><span class='glyphicon glyphicon glyphicon-import'></span>&nbsp;&nbsp;Import Excel</button>";
        html += "<span class='filename-container'></span>";
        html += "</div>";
    }

i want to add onclick event on the button inside

if (page == "Transactions") 

this is how the function call in my Transaction.aspx

<script>
        $(document).ready(function () {
            $(".menu-title").html('<span class="glyphicon glyphicon-transfer"></span>&nbsp;&nbsp;Transactions');
            $(".inner-menu-title").html('<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>&nbsp;&nbsp;List of Employee Transactions');
            $(".transactions .main").addClass("active");

            TransSearchControls("Transactions", "all");
            var url = "&EmpName=&DateFrom=" + DefaultDate("from") + "&DateTo=" + DefaultDate("to");
            GetTransactions("Transactions", "all", url);


            $('.dateFrom').val(DefaultDate("from"));
            $('.dateTo').val(DefaultDate("to"));
        });
    </script>

I hope you understand what i mean i'm not good at English

Answer 1

You need to add an onclick event to the html button element. So it would look something like this:

html += "<button type='button' onclick='TransactionsEvent()' class='btn btn-sm btn-danger' id='btnExportExcel'><span class='glyphicon glyphicon glyphicon-import'></span>&nbsp;&nbsp;Export Excel</button>";

Then you must just update the function in the Javascript to match up:

function TransactionsEvent() {
    //do something here
}