Fetch multiple data from a php file using AJAX and insert them in different input fields

Question

I am using AJAX in order to access data from a php file. I have problem with the format of retrieved data from database, please help.

So, this is my ajax function splice. It retrieves data from find_account.php

function processReqChange() { 
    // only if req shows "loaded" 
    if (req.readyState == 4) { 
        // only if "OK" 
        if (req.status == 200) { 
            form_prof.prof_id.value = req.responseText;
    form_prof.prof_name.value = req.responseText;
    form_prof.prof_username.value = req.responseText;
    form_prof.prof_password.value = req.responseText; 
        } 
        else { 
            alert("Problem in retrieving the XML data:\n" + req.statusText); 
        } 
    } 
}

find_account.php

<?php

include("connect.php");
session_start();

$account = $_GET['account'];
$query = "SELECT * FROM profs WHERE profs_name = '".$account."'";
$result = mysql_query($query);
$num = mysql_num_rows($result);

if(empty($num))
{
echo 'DATA NOT FOUND';
}
else
{
    $arr = mysql_fetch_array($result);
    $id = $arr['profs_number'];
$name = $arr['profs_name'];
$username = $arr['profs_username'];
$password = $arr['profs_password'];
}

header("Content-type: text/plain");
echo $id;
echo $name;
echo $username;
echo $password;
?>

and I have 4 input boxes in my HTML from where the req.responseText puts the value

and everytime I search the name in the input field for example:

Search: [ Dorothy Perkins ]

The output goes like [id,name,username,password]:

[20111Dorothy Perkinsdperkins@mail.com123456] [same with 1st field] [same] [same] 

Wherein I want it to be like...

[20111]  [Dorothy Pekins]  [dperkins@mail.com]  [123456]

Where [ ] are input fields. Please help me arrange my format, I am so confused. I am new to this.

Answer 1

You have to write the data in some format from your PHP code (XML, json, or simply separate the values with a comma), and parse it from your javascript.

For example, in PHP:

echo $id . "," . $name . "," . $username . "," . $password;

And then in the javascript:

values = req.responseText.split(",");
form_prof.prof_id.value = values[0]
form_prof.prof_name.value = values[1];
form_prof.prof_username.value = values[2];
form_prof.prof_password.value = values[3];

Of course you may have to do something more complicated if the values may contain a comma.

Answer 2

You can encode return values in json before sending back. In PHP

<?php

include("connect.php");
session_start();

$account = $_GET['account'];
$query = "SELECT * FROM profs WHERE profs_name = '".$account."'";
$result = mysql_query($query);
$num = mysql_num_rows($result);

if(empty($num))
{
$returnValues = 'DATA NOT FOUND';
}
else
{
    $arr = mysql_fetch_array($result);
    $returnValues = json_encode($arr);
}

echo $returnValues;
?>

In Javascript

function processReqChange() { 
    // only if req shows "loaded" 
    if (req.readyState == 4) { 
        // only if "OK" 
        if (req.status == 200) { 
           req = JSON.parse(reg);

            form_prof.prof_id.value = req.id;
    form_prof.prof_name.value = req.name;
    form_prof.prof_username.value = req.username;
    form_prof.prof_password.value = req.password; 
        } 
        else { 
            alert("Problem in retrieving the XML data:\n" + req.statusText); 
        } 
    } 
}

Answer 3

You can try this

$account = $_GET['account'];
$query = "SELECT * FROM profs WHERE profs_name = '".$account."'";
$result = mysql_query($query, MYSQLI_STORE_RESULT);
while($arr = $result->fetch_array(MYSQLI_ASSOC)) {
    $returnValues = json_encode($arr);
    break;
}

echo $returnValues;

Note that column names are used as associative index for $arr

Hope it works.