best way to populate an input field with data from an SQL query?

Question

I have a form which populates 3 fields based on the selection from an autocomplete field. That is fine and working well, however I have a 4th field which needs to be populated automatically based upon one one of the fields that got populated automatically by the autocomplete.

what's the best way to populate that 4th field?

here is my code in main:

<script type="text/javascript">
$().ready(function() {
    $("#PartNumberID").autocomplete({
    source: "ajax/getData.php",
    minLength: 6,
    delay: 100,
    select: function(event, ui) {
         $("#loadingIcon").show();
         $("#PartNumberID").val(ui.item.value);
         $("#BoxID").val(ui.item.dietype);
         $("#PackageID").val(ui.item.pkg);
         $("#loadingIcon").fadeOut();
    },
    change: function(event, ui){
         $("#ProcessID").val("RESULT FROM SQL STATEMENT USING BoxID GOES HERE");
    }
    });
});
</script>

here is my file called process.php which will get the process if you pass the GET var of box, i just need to figure how to send the box var and get the result of this file and put it in the input field:

<?php
require_once '../includes/conn.php';
$sql=mysql_query("SELECT PROCESS FROM data WHERE `box` = \"".$_GET['box']."\" GROUP BY PROCESS") or die("mysql error".mysql_error());
$part['process']=mysql_result($sql,0);
$parts[]=$part;
echo json_encode($parts);
?>

Answer 1

Something like this..

change: function(event, ui){
         $.get('ajax/boxQuery.php?box='+$("#BoxID").val,
               function(result){
                      $("#ProcessID").val(result);
               }
    }

I used $("#BoxID").val but really you should use the ui argument, i just don't know of the top of my head what the correct syntax would be.

Answer 2

It would be helpful to see the JSON result, but this is basically what you need.

    $(document).ready(function() {
        $("#PartNumberID").autocomplete({
        source: "ajax/getData.php",
        minLength: 6,
        delay: 100,
        select: function(event, ui) {
             $("#loadingIcon").show();
             $("#PartNumberID").val(ui.item.value);
             $("#BoxID").val(ui.item.dietype);

             $("#PackageID").val(ui.item.pkg);
             $("#loadingIcon").fadeOut();
        },
change: function(event, ui)
{
$.ajax({
    type: 'GET',
    data: '?box=' . ui.item.dietype,
    url: 'process.php',
    success: function(data)
    {
    $.each(data) {
    $("#ProcessID").val(this.process);
    }
    }
    })
}

        });
    });