根据id搜索，从数据库到文本框设置值

Please help me to solve the case. I have an code below :

<script>
    function getXMLHTTP() {
        var xmlhttp = false;    
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)
        {
            try{
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            catch(e){
                try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                catch(e1){
                    xmlhttp=false;
                }
            }
        }
        return xmlhttp;
    }

    function getCity(url, id1) {
        var req = getXMLHTTP(url);
        if (req) {
            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {
                        document.getElementById(id1).value=req.responseText;    
                        // document.getElementById(id2).value=req.responseText;
                    } else {
                        alert("There was a problem while using XMLHTTP:
" + req.statusText);
                    }
                }
            }
            req.open("GET", url, true);
            req.send(null);
        }
    }
</script>

<?php       
    echo "
        <tbody>
            <tr>
                <td class='td'><input type='text' size='6' name='kode_barang" ."' maxlength='6' onchange='javascript:this.value=this.value.toUpperCase();' onkeyup='getCity(\"search.php?kode_barang=\"+this.value, \"nama_barang"  . "\",\"harga_barang"  . "\");' id='kode_barang'></td>
                <td class='td'><input type='text' size='22' name='nama_barang"  . "' id='nama_barang" . "' readonly tabindex='1'></td>
                <td class='td'><input type='text' size='22' name='harga_barang"  . "' id='harga_barang" . "' tabindex='1'></td>
        </tbody>
    ";
?>

search.php file :

include_once('config.php');

if (isset($_GET['kode_barang']))
{
    $qry = "SELECT nama_barang, harga_barang FROM t_barang WHERE kode_barang = '" . $_GET['kode_barang'] . "'";
    $sql = mysql_query($qry);

    $ary = mysql_fetch_array($sql);

    echo $ary['nama_barang'];
    echo $ary['harga_barang'];
}

This is about how to find nama_barang and harga_barang based on kode_barang input. Example if I input kode_barang in textbox kode_barang then in text_box nama_barang and harga_barang will set the information from database automatically.

I've tried in this code, but it set 2 information(nama_barang & harga_barang) in 1 textbox nama_barang. Should be set in each textbox.

So, my question is : How to set the information nama_barang and harga_barang from database to each textbox ?

Appreciate with your helps. Thank you.

replace your getCity() function with the following one

  function getCity(url, id1, id2) {    
        var req = getXMLHTTP(url);
            if (req) {    
            req.onreadystatechange = function() {    
                if (req.readyState == 4) {    
                    // only if "OK"    
                    if (req.status == 200) {
            var res = JSON.parse(req.responseText);    
                        document.getElementById(id1).value=res.nama_barang;      
                        document.getElementById(id2).value=res.harga_barang;    
                    } else {    
                        alert("There was a problem while using XMLHTTP:
" + req.statusText);    
                    }    
                }    
            }

            req.open("GET", url, true);    
            req.send(null);    
        }    
 }

and replace the part of code in your search.php

from

$ary = mysql_fetch_array($sql);

echo $ary['nama_barang'];
echo $ary['harga_barang'];

to

$ary = mysql_fetch_array($sql);

echo json_encode($ary);

The problem was, you are missing the ID of second text box in your getCity() function.

Update for sending default Value

replace the following part

if (isset($_GET['kode_barang']))
{
    $qry = "SELECT nama_barang, harga_barang FROM t_barang WHERE kode_barang = '" . $_GET['kode_barang'] . "'";
    $sql = mysql_query($qry);

    $ary = mysql_fetch_array($sql);

    echo $ary['nama_barang'];
    echo $ary['harga_barang'];
}

with

if (isset($_GET['kode_barang']))
{
    $qry = "SELECT nama_barang, harga_barang FROM t_barang WHERE kode_barang = '" . $_GET['kode_barang'] . "'";
    $sql = mysql_query($qry);

    if (mysql_num_rows($sql) > 0)
    {
      $ary = mysql_fetch_array($sql);

      echo json_encode($ary);
    }
    else
    {
       echo json_encode(array("nama_barang" => "", "harga_barang" => ""));
    } 
}

* any way this is not the best practice as it make the data base request for each of your keyup event. but can help you solve.

Change php file from:

echo $ary['nama_barang'];
echo $ary['harga_barang'];

to

echo json_encode($ary);

and change your JS-function from

document.getElementById(id1).value=req.responseText;    
document.getElementById(id2).value=req.responseText;

to

var response = JSON.parse(responseText);
document.getElementById(id1).value=response.nama_barang;    
document.getElementById(id2).value=response.harga_barang;