How do I call ajax() when user enter(using keyboard) on input box using jquery

Question

I'm trying to call ajax() when users enter on input box without page load but it's calling this ajax method when users typing on input box. My input box is following :

<input type="text" name="search" id="txt_name"  placeholder="Keyword"/>

Jquery./ Ajax Code;

$(document).ready(function(){
  $("#txt_name").keyup(function(){

    var value = $('#txt_name').val();

    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });

  });
});

How do I call I this ajax() after user enter on input box without page load ?

Update:

$('#txt_name').on('click', 'submit', function(e) {
    e.preventDefault();
    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });
});

Update 2 :

<form>     
<input type="button" name="given_name" value="Given Name" class="search_submit" id="given_name"/>
<input type="button" name="company_name" value="Company Name" class="search_submit" id="company_name"/>
<input type="button" name="cdid" value="ID" class="search_submit" id="cdid"/>
<input type="text" name="search" id="txt_name"  placeholder="Keyword"/>    
</form>

$('form').on('click', 'submit', function(e){
    e.preventDefault();
});

$('form').on('keyup', '#txt_name', function(e){
    if(e.keyCode == '13'){
        $.ajax({
            type:"post",
            url:"doSearchEnter.php",
            data :{
                    'key' : value               
                },          
            success:function(res){
                $('#showSearchResult').html(res);
                }
           });
    }
});

"but it's calling this ajax method when users typing on input box" Right, that's what the keyup event relates to: The "up" part of a keystroke (the parts are keydown [which might repeat if the user holds it down and key repeat starts], keyup, and keypress [which might repeat]). If you want it to happen on another event, use another event. — T.J. Crowder
– T.J. Crowder, Commented Jul 4, 2014 at 6:29
@NikhilTalreja Without Page Load means if user press enter on input box it's should directly call ajax and show the result from php without page load. — Shibbir
– Shibbir, Commented Jul 4, 2014 at 6:40

Mike Bell · Accepted Answer · 2014-07-04 06:34:26Z

3

Your question is a little unclear, but I think you want to perform ajax when the user presses the enter key on the input box? If so, you can check what key was pressed in the keyup handler and check if it was the enter key.

  $("#txt_name").keyup(function(event){
    if (event.keyCode == '13') {
      //...
    }
  });

answered Jul 4, 2014 at 6:34

Mike Bell

1,39611 silver badges9 bronze badges

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

Comments

tylerlindell · Accepted Answer · 2014-07-04 13:08:56Z

1

Placing the input inside of a form with a submit button should do the trick. When the user presses enter the form should submit. All you have to do is use

$('form').on('click', 'submit', function(e) {
    e.preventDefault();
    $.ajax({
        //do your Ajax thing here
     });
});

UPDATE: For three forms you would use the same Ajax call for all three and put your data together like so.

var formData = $(this).closest('form').serialize();
$.ajax({
    type: 'POST',
    url: 'test.php',
    data: formData
});

This would tell jquery to put the forms data in a proper format for passing to your server side script and would work for all three scripts

UPDATE2: UPDATE BASED ON UPDATED QUESTION:

$('form').on('submit', function(e){
    e.preventDefault();
});

$('form').on('keyup', '#txt_name', function(e){
    if(e.keyCode == '13'){
        $.ajax({
            //do Ajax stuff
         });
    }
});

here is link to the working code! jsfiddle

edited Jul 4, 2014 at 13:08

answered Jul 4, 2014 at 6:48

tylerlindell

1,5632 gold badges17 silver badges20 bronze badges

10 Comments

Shibbir Over a year ago

If I've 3 forms in my page then what happened ?

tylerlindell Over a year ago

Use ids or classes to specify which ones you want or, better yet, make the data you are sending specifically to that form. That way you only have one Ajax call for three forms and it would work independently for each form:-)

Shibbir Over a year ago

Well, check my update question. It's now load full page when I enter on input box. Is there anything wrong ?

Shibbir Over a year ago

Look there is not submit button. I want load the ajax() when user enter on this Input Box without Page Load.

tylerlindell Over a year ago

It is reloading when you press enter? And there is no submit button in your forms?

|

bitsm · Accepted Answer · 2014-07-04 06:29:57Z

0

Dont use keyup(), use blur() instead.

answered Jul 4, 2014 at 6:29

bitsm

1257 bronze badges

Comments

John C · Accepted Answer · 2014-07-04 06:30:45Z

0

Change the current anonymous function to run under different circumstances (i.e. different events), such as focusout() or blur()

$(document).ready(function(){
  $("#txt_name").on("blur",function(){

    var value = this.value;

    $.ajax({
        type:"post",
        url:"doSearchEnter.php",
        data :{
                'key' : value               
            },          
        success:function(res){
            $('#showSearchResult').html(res);
            }
       });

  });
});

answered Jul 4, 2014 at 6:30

John C

6664 silver badges8 bronze badges

2 Comments

Shibbir Over a year ago

But it's load the page when I enter on input box. I want to call this ajax without page load when I enter on input box.

Shibbir Over a year ago

do you know how do I prevent this page load when users enter on input box ?

Collectives™ on Stack Overflow

How do I call ajax() when user enter(using keyboard) on input box using jquery

4 Answers 4

Comments

10 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

10 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related