How do I call ajax if user enter some text on html Input field with Jquery/Ajax?

Question

I've a html user profile form where data is comming from mysql database. I'm currently calling ajax when user hover out the mouse from input field using jquery .blur(). Now I want to know how can I call this ajax when user actually type something on input field ?

Jquery/Ajax Code:

<script>
$("#given_name").blur(function(){   

var given_name =  $("#given_name").val(); 

$.ajax({
  url: 'certainfield.php',
  type: 'POST',
  dataType: 'html',
  "given_name" : given_name
}).done(function ( data ) {
  $('#r').append(data);
});

});
</script>

Html Code:

<tr>
<td>Given name</td>
<td><input type="text" value="<?php echo $res['given_name'] ?>" name="given_name" 
id="given_name" placeholder="Given name"/></td>
</tr>

use keyup instead of blur. But you have to be more sophisticated to prevent multiple async calls that may return in an unpredictable order. — marekful
– marekful, Commented Jun 25, 2014 at 17:07

Matas Vaitkevicius · Accepted Answer · 2014-06-25 17:08:21Z

1

When trying to read user input one usually uses onkeyup event then reads the data that has been entered into the field.

$('#given_name').on('keyup', function () {
    var given_name = $(this).val();
    $.ajax({
        url: 'certainfield.php',
        type: 'POST',
        dataType: 'html',
        "given_name": given_name
    }).done(function (data) {
        $('#r').append(data);
    });
})

answered Jun 25, 2014 at 17:08

Matas Vaitkevicius

61.9k37 gold badges254 silver badges278 bronze badges

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

1 Comment

Shibbir Over a year ago

Now it's calling the ajax when I type on input field which I don't want. I want to call this ajax when user actually type something on input field and hover out the mouse from this input field.

Raenix · Accepted Answer · 2014-06-25 17:07:58Z

0

Use $("#given_name").change(...) instead of $("#given_name").blur(...).

answered Jun 25, 2014 at 17:07

Raenix

663 bronze badges

Collectives™ on Stack Overflow

How do I call ajax if user enter some text on html Input field with Jquery/Ajax?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related