javascript - 当用户从 Jquery 中的文本框按回车键时，如何只调用一个按钮单击功能？

Question

I already made my code. But when user enter the EnterKey, it is calling 2 button event on server side. I want to call only one event.

我有三个 Asp.net 按钮，

<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" />

Those 3 buttons will perform 3 different things. I have a textbox, once user enter the data and when they press the enter I want to call the btnSaveFile click event.

这是那个文本框

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

注意事项

I already define the 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;
    }

});

下面的代码用于调用上面的函数。

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

问题

keydown function is working fine. But at the same time when I press the enter key it is calling btnSearch server side code also. It should not call btnSearch. It should call btnSaveFile on server side

疑问

Totally I have 3 server side button, But it is calling only 2 why? (Just want to know the reason). Target: want to call only one button

谢谢

Answer 1

但是我建议将您的按钮和文本框放入更新面板，然后在更新面板上设置默认按钮。如下所示:

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