Use a document.getElementById into a query or another way to do this

Question

I need to insert a value got from a document.getElementById into a sql query. I need to do this because i'm trying to autofill a second input box depending on the result of the first (ie if i type Rome in the first one i would like the second one to autofill with the related country found in my db, like Italy)

Here is the code:

 <?php
    echo (" <form NAME='Form1' id='Form1' method=post  class=statsform action=page.php  >  " );
    echo ("  <input type=text  name=city   id=city  size=50 class=formfield value='$city'  onBlur='Assigncode();'   >   " );
    echo (" <input type=text name='Country' id='Country' size=12  value='$Country'  >  " );
?>
<script>
function Assigncode() {
    var elemento    = document.getElementById("city");      
    var elementoCod = document.getElementById("Country");       
    if (elemento != null && elemento.value != '') {
        var city = elemento.value;
        if (elementoCod == null || elementoCod.value == '') {
            <?php
$query2 = "SELECT *  FROM table WHERE city = 'put here the getElementById of the city'  ";
$result2 = MYSQL_QUERY($query2);
$i2 = 0;
    $country        =   mysql_result($result2,0,"T_Country");
    ?>

            eval( "document.Form1. Country").value = '<?php echo($country)?>';
        }
    }
}  
</script>

Any suggestion? Thanks

Answer 1

Here is a slightly modified version of an AJAX example script found on Wikipedia. It should give you the basic idea on how to proceed. If you use jQuery then a lot of this JavaScript could be reduced to just a few lines.

// This is the client-side javascript script. You will need a second PHP script
// which just returns the value you want. 

// Initialize the Http request.
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php?city=' + elemento.value);

// Track the state changes of the request.
xhr.onreadystatechange = function () {
    var DONE = 4; // readyState 4 means the request is done.
    var OK = 200; // status 200 is a successful return.
    if (xhr.readyState === DONE) {
        if (xhr.status === OK) {
            document.Form1.Country.value = xhr.responseText; // 'This is the returned text.'
        } else {
            alert('Error: ' + xhr.status); // An error occurred during the request.
        }
    }
};

// Send the request to send-ajax-data.php
xhr.send(null);

send-ajax-data.php:

<?php
$city = $_GET['city'];
$query2 = "SELECT *  FROM table WHERE city = '$city'";
$result2 = MYSQL_QUERY($query2);
$country =   mysql_result($result2,0,"T_Country");
echo $country;

By the way, the $city variable should be validated and escaped prior to using it in an SQL query.