Question

I have a table called customers_shipto with columns (ID,shiptonick,address)

I need to auto populate the textarea “shipto” with the data in the address column that pertains to that specific record with AJAX

My select looks like this

<select name="shiptonick" id="shiptonick">
    <option value="">Click Here to Change Ship To</option>
    <?
    $sql = "SELECT * FROM customers_shipto WHERE customer_id = '$customer_id' ORDER BY shiptonick ASC"; 
    $result = mysql_query($sql);
    while($row = mysql_fetch_array($result)) {
    ?>
    <option value="<?=$row['ID']?>"><?=$row['shiptonick']?></option>
    <? } ?>
</select>

and textare looks like this

<textarea name="shipto" id="shipto" cols="30" rows="5"></textarea>

I am assuming I would call a file like getaddress.php with something like this to return results back to AJAX

$sql = "SELECT * FROM customers_shipto WHERE ID = '$ID'"; 
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
    echo $row['address'];
}

UPDATE: Here is some example code for AJAX that I think is close to what I want but instead of calling a “submit” I need to call an “onChange” for that particular select so it executes this code.

            <script type"text/javascript">
            $(document).ready(function(){
            $("form#submit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var ID = $('#ID').attr('value');
            var shiptonick = $('#shiptonick').attr('value');
            $.ajax({
            type: "POST",
            url: "includes/getaddress.php?",
            data: "ID="+ ID+
                "&shiptonick="+ shiptonick,
            success: function(data){
                //Return address here and place in textarea njavascript code
            }
            });
            return false;
            });
            });
        </script>

am I close? 🙂

Answer 1

Bind select onchange with a ajax call function that populate address to the textarea

$("#shiptonick").change(function(){

    var id = $(this).val(); //the selected id from shiptonick

    $.ajax({
             type: 'POST',
             url: 'the php page that returns address based on id',
             data: {ID: id},
             success: function(data){
                 if(data != null)
                    $("#shipto").val(data);
             }
           });    

});