Search button click on keypress of enter using javascript

Question

I have textboxes and each textbox contains search button beside that. On Key press i need to validate for alphanumeric characters and if Enter Key is pressed i need to Search. Right Now, My Textbox contains:

<asp:TextBox ID="txtId" runat="server"  TabIndex="1" MaxLength="30" onkeypress="return validateAlphaNumeric(event, this);"></asp:TextBox>
Search Button:
<asp:ImageButton ID="imgSearch" runat="server" ImgUrl=".gif" OnClientClick="returnpassTxtboxValue(imgSearch);"/>

Now if i do:

If (event.KeyCode == 13) then SearchButton.Click();

This executes the returnpassTxtboxValue(imgSearch) function of Search button and then return back to textBox function validateAlphaNumeric() of Textbox. So my test fails by throwing parameterCount exception.

Javascript for textbox:

 function validateAlphaNumeric(evt, textBox) {
        var charCode;
        charCode = (evt.which) ? evt.which : window.event.keyCode;

        if (charCode >= 97 && charCode <= 122 || charCode >= 65 && charCode <= 90 || charCode == 8 || charCode >= 48 && charCode <= 57 || charCode == 45 || charCode == 13) {
            //if (charCode == 13) {
            //    document.getElementById('SearchButton').click();

            //}
            return true;
        }
        else {
            return false;
        }
    }

Can u pls suggest me how to over come this?

Thanks,

can add the rest of your codes as well ? like your javascript and code behind — Ali
– Ali, Commented Jun 6, 2014 at 5:18

Arpit Jain · Accepted Answer · 2014-06-06 05:44:23Z

1

You should do this way of implementation

    <asp:TextBox ID="txtId" runat="server"  TabIndex="1" MaxLength="30" onkeypress="return validateAlphaNumeric(event, this);"></asp:TextBox>
    Search Button:
    <asp:ImageButton ID="imgSearch" runat="server" ImgUrl=".gif" onclientClick="Validate(this);"/>


$(document).ready(function(e){
  $("#txtId").on("keyup",function(e){

     if(e.keycode == 13){ 
        $("#imgSearch").trigger("click");
     }
  }  
});

function Validate(e){
 e.preventDefault();
 // Do your validation Code here.
}

Thanks

answered Jun 6, 2014 at 5:44

Arpit Jain

4553 silver badges8 bronze badges

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

2 Comments

Lak Over a year ago

e.preventDefault() stops my code : Below error is showing : Object doesn't support property or method 'preventDefault'

Lak Over a year ago

Need to add return false after the Search button click in Validation of text box... It worked :) Thanks all :)

Rachit Patel · Accepted Answer · 2014-06-06 05:24:01Z

0

you have to write below code on your textbox (txtId) keypress event

 if (e.keyCode == 13) $j("#imgSearch").trigger('click');

this code execute button (imgSearch) click event on press enter key

function validateAlphaNumeric(event, obj)
{
   if (event.keyCode == 13) $j("#imgSearch").trigger('click');
}

answered Jun 6, 2014 at 5:24

Rachit Patel

8625 silver badges12 bronze badges

1 Comment

Lak Over a year ago

Can u pls give me the aboce code in Javascript? and i think i have done the same thing in javascript. if(event.keycode == 13){document.getelemntById('imgSearch').Click();

Siva · Accepted Answer · 2014-06-06 05:24:42Z

0

Try this

$("#txtId").keypress(function (e) {
    if (e.keyCode == 13) {
    $('#btnId').trigger('click');
    }
});

answered Jun 6, 2014 at 5:24

Siva

1029 bronze badges

Comments

user2021740 · Accepted Answer · 2014-06-06 06:24:23Z

0

Search Button:

Please do in following way for a single textbox

$(document).ready(function(){

$("#txtId").keypress(function(e){

if(e.which==10 || e.which==13)
{
$("#imgSearch").click();
}

});

answered Jun 6, 2014 at 6:24

user2021740

1742 silver badges11 bronze badges

Comments

Lak · Accepted Answer · 2014-06-07 13:01:02Z

0

Need to add Return false.

if(event.KeyCode == 13){
document.getElementById('SearchButton').click();
return false;
}

It will work...thanks all :)

answered Jun 7, 2014 at 13:01

Lak

1663 silver badges15 bronze badges

Collectives™ on Stack Overflow

Search button click on keypress of enter using javascript

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related