How to call only one button click function when the user clicks input from a textbox in JQuery?

I have already done my code. But when the user enters EnterKey

, it raises the 2 button event on the server side. I only want to trigger one event.

I have three Asp.net buttons,

<asp:Button ID="btnSearch" class="btn btn-info" runat="server" Text="SEARCH" Width="100" OnClick="btnSearch_Click" />
<asp:Button ID="btnSaveFile" runat="server" Text="SaveFile" OnClick="btnSaveFile_Click"/>
<asp:Button ID="btnLoadData" CssClass="btn btn-info"  runat="server" Text="Ok" OnClick="btnLoadData_Click" />

      

These 3 buttons will do 3 different things. I have a textbox as soon as the user enters data and when they press enter I want to fire a btnSaveFile

click event .

This is a text box

<asp:TextBox ID="txtFileName" CssClass="form-control" runat="server"></asp:TextBox>

      

Note

I have already defined a click function for btnSaveFile , here is the code

$('#btnSaveFile').click(function () {
    var fileNames = $('#txtFileName').val();
    var flag = 'returnTrue';
    $.ajax({
        url: 'ReportTotalSalesPivot.aspx/getFileExistOrNot',
        method: 'post',
        async: false,
        contentType: 'application/json',
        data: '{fileName:"' + fileNames + '",reportName:"TotalSales"}',
        dataType: 'json',
        success: function (data) {
            if (data.d === 'dataExist') {
                flag = 'returnFalse';
                $('#lblSaveErrorMsg').text('This filename already exist. Please change the name');
            }
            else {
                //alert('else');
                $(".FilterTable > tbody > tr").each(function () {
                    $("#hiddenTableRecord").val($("#hiddenTableRecord").val() + $(this).find(".FieldNameID").html() + "$$$" + $(this).find(".OperatorID").html() + "$$$");
                });
                $("#hiddenTableRecord").val('');
                return true;
            }
        },
        error: function (error) {
            alert('Please Call Administrator');
        }
    });
    //alert('faisal'+flag);
    if (flag === 'returnFalse') {
        return false;
    }

});

      

The following code is for calling the above function.

$('#txtFileName').keydown(function (e) {
    //enter key
    var key = e.which;
    if (key == 13) {
        $('#btnSaveFile').click();
        return false;
    }
})

      

Problem

the key close function works normally. But at the same time, when I press enter key , it calls server side code as well btnSearch

. He shouldn't call
btnSearch

. It should call btnSaveFile

on the server side

Doubt

Completely I have 3 server side buttons but only causes 2 reasons? (I just want to know the reason). Purpose: want to call only one button

thank

+3


source to share


1 answer


however I would suggest to put your button and textbox in the refresh bar and then set the default button in the refresh bar. as shown below:



<asp:Panel ID="Panel1" runat="server" DefaultButton="btnSearch">     
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
        <input runat="server" id="txtSearch" class="form-control" type="text" placeholder="Search the Store..." /> 
        <asp:Button ID="btnSearch" class="btn btn-info" runat="server" Text="SEARCH" Width="100" OnClick="btnSearch_Click" /> 
    </ContentTemplate></asp:UpdatePanel> 
</asp:Panel>

      

+1


source







All Articles