how to fetch mysql data using ajax when one input is filled

Question

html

<input type="text" name="PName" />
<input type="text" name="PAddress" />
<input type="text" name="PCity" />

mysql table

 ________________________________________________________
| id  |PName          |  PAddress           |  PCity    |
| ----|-------------------------------------------------|
|  1  | John           |  po box no xyz      |  Florida |
?????????????????????????????????????????????????????????

now my question is how do i use ajax to fetch the address and city when i enter the name? any help is appreciated

i use fetcher.php file which connects the database and gets the row in the famouse sql fetch array. — jinni
– jinni, Commented Oct 14, 2012 at 14:38
You should look for a tutorial that deals with this, basically you need a php get function which retrieves data from a database and using ajax you can use a get function that returns this information. — mk_89
– mk_89, Commented Oct 14, 2012 at 14:39

Arthur · Accepted Answer · 2012-10-14 14:57:33Z

2

A while ago, i did a "live" search for my project, so here is some code modified for your needs (i assume you have jQuery on your page).

First of all i suggest you give your inputs some id's:

<input type="text" name="PName" id="PName" />
<input type="text" name="PAddress" id="PAdress" />
<input type="text" name="PCity" id="PCity" />

After that you can bind a keyup event of PName field:

var searchTimeout; //Timer to wait a little before fetching the data
$("#PName").keyup(function() {
    searchKey = this.value;

    clearTimeout(searchTimeout);

    searchTimeout = setTimeout(function() {
        getUsers(searchKey);    
    }, 400); //If the key isn't pressed 400 ms, we fetch the data
});

The js function to fetch the data:

function getUsers(searchKey) {
    $.ajax({
        url: 'getUser.php',
        type: 'POST',
        dataType: 'json',
        data: {value: searchKey},
        success: function(data) {
            if(data.status) {
                $("#PAddress").val(data.userData.PAddress);
                $("#PCity").val(data.userData.PCity);
            } else {
                // Some code to run when nothing is found
            }   
        }
    });         
}

And ofcourse the getUser.php file:

<?php
    //... mysql connection etc.

    $response = Array();

    $response['status'] = false;

    $query = mysql_query("SELECT `PAddress`, `PCity` FROM `Users` WHERE `PName` LIKE '%".$_POST['value']."%' LIMIT 1"); //Or you can use = instead of LIKE if you need a more strickt search

    if(mysql_num_rows($query)) {
        $userData = mysql_fetch_assoc($query);

        $response['userData'] = $userData;
        $response['status'] = true;            
    }

    echo json_encode($response);

Good luck! ^^

edited Oct 14, 2012 at 14:57

answered Oct 14, 2012 at 14:52

Arthur

1,4431 gold badge18 silver badges35 bronze badges

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

3 Comments

jinni Over a year ago

why cant i get this to work ? im using a field called idCardNo to fetch Name and permAddress. when i goto getUser.php?A123456 (because i changed type to GET) i get this messege. but in my html file i cant get the results {"status":true,"userData":{"Name":"Nizar Ibrahim","permAddr":"Dhildhaaruge"}}

Arthur Over a year ago

if you use Name and permAddr then change $("#PAddress").val(data.userData.PAddress); to $("#PAddress").val(data.userData.permAddr); and another one accordingly. And in the SQL change $_POST to $_GET. Oh and you should use getUser.php?value=A123456 to get the information directly.

jinni Over a year ago

one little help @Arthur pls.. i couldnt get it to work still. i uploaded all code to intruderexists.0fees.net/index.html database img: intruderexists.0fees.net/dbase.png

Collectives™ on Stack Overflow

how to fetch mysql data using ajax when one input is filled

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related