how to call ajax method when I select a data in a selection then perform a SELECT query from it

Question

how can I call jquery ajax method when I select a data in a selection then perform a SELECT query from the selected data

.... then i want to show the result from the query in the #info div

Can someone help me?

html looks like this

<form action="details.php" method="post" >
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>

<input type="submit" value="Details" name="submit" id="submit" /> 
</div> 

  <div id="info">
     //display details or result from the query in details.php 
  </div>


$(document).ready(function() {

  $("#submit").submit(function(){

    $.ajax({

        //i dont know how this works
    }); 

  }); 
});

Im newbie at jquery with ajax , any help will be appreciated...

Answer 1

$(document).ready(function() {
  $("form").submit(function(){
    $.post('details.php', { value: $('form select option:selected').val() }, ajaxCallback);
    // prevent actual form submission
    return false;
  }); 
});

// display returned results from ajax request in DIV
function ajaxCallback(data) {
    $('#info').html(data);
}

And your PHP file will be looking for $_POST['value']:

if (!empty($_POST['value'])) {
    // handle your value here
    echo 'THIS DATA WILL BE RETURNED';
    die;
}