Te pongo un ejemplo y luego tú lo adaptas a tu código:
Vamos a llamar desde test.php a través de AJAX a ajax.php pasándole un elemento de un select.
ajax.php nos lo devuelve en mayúsculas y actualizamos un campo de texto con lo que nos devolvió, OK?
Necesitarás 3 ficheros:
// Contenido de ajax.php
Código PHP:
<?
echo strtoupper($_GET['palabra']);
?>
// Contenido de ajax.js
Código:
<!--
// devuelve un objeto XMLHttpRequest para varios navegadores
function AJAX() {
try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {
try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (ee) {xmlhttp = false;}
}
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {xmlhttp = new XMLHttpRequest();} catch (e) {xmlhttp = false;}
}
if (!xmlhttp && window.createRequest) {
try {xmlhttp = window.createRequest();} catch (e) {xmlhttp = false;}
}
if (!xmlhttp) {
alert("Tu navegador no soporta el objecto XMLHttpRequest.");
}
return xmlhttp;
}
var alCambiarLaLista = function(laLista) {
// obtenemos un objeto XMLHttpRequest en la variable ajax
var ajax = new AJAX();
// Construimos la petición a ajax.php con el valor seleccionado del select como parámetro
ajax.open("GET","ajax.php?palabra=" + laLista.value,true);
// Cambió el estado de la petición
ajax.onreadystatechange = function() {
// Si completada la petición
if (ajax.readyState == 4) {
// Si la respuesta es 200 OK
if (ajax.status == 200) {
document.getElementById("enMayusculas").value = ajax.responseText;
}
}
}
// Ejecutamos la petición
ajax.send(null);
}
//-->
// Contenido de test.php
Código HTML:
<script type="text/javascript" src="ajax.js"></script>
<form>
<select id="lista" onchange="alCambiarLaLista(this)">
<option value="uno">uno</option>
<option value="dos">dos</option>
</select>
<input type="text" id="enMayusculas">
</form>