How to call only one button click function when user press enter from Textbox in 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.

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

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.

This is that text box

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

Note

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

});

The below code is for to call the above function.

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

Problem

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

Doubt

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

Thanks

Can you inspect the code using any DevTool like Chrome inspect. — Dan Philip Bejoy
– Dan Philip Bejoy, Commented Apr 3, 2017 at 7:07
use the attribute UseSubmitBehaviour="false" like <asp:Button ID="button1" runat="server" UseSubmitBehavior="false" Text="just a button" /> — RonyLoud
– RonyLoud, Commented Apr 3, 2017 at 7:08
@RonyLoud What is the use of UseSubmitBehavior="false"?. So this button will not execute any more when user press the enter key? — Liam neesan
– Liam neesan, Commented Apr 3, 2017 at 7:24

Liam neesan · Accepted Answer · 2017-04-03 08:47:13Z

1

however i would suggest put your button and textbox into update panel and then set default button on update panel. like 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>

edited Apr 3, 2017 at 8:47

Liam neesan

2,5719 gold badges42 silver badges89 bronze badges

answered Apr 3, 2017 at 8:26

UsmanMirza

2761 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Liam neesan Over a year ago

you would have asked in comments.

UsmanMirza Over a year ago

don't have much reputation point to add comments on your question.

UsmanMirza Over a year ago

however i would suggest put your button and textbox into update panel and then set default button on update panel. like 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>

UsmanMirza Over a year ago

let me know either it works for you or no. in this code no need to add Jquery code specifically for enter button..update panel will do by self

Liam neesan Over a year ago

This is not exact answer, any how it is helpful to find the solution. Now I got it. thanks. I have edited your answer, please approve it.

|

Collectives™ on Stack Overflow

How to call only one button click function when user press enter from Textbox in Jquery?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related