[SOLUCIONADO] Consulta desde Ajax

[domichis]

Este es mi codigo HTML
(Formulario)

Código HTML:

</script>
<form method='GET' action='/get_city_state.php'>
  <input type='text' name='zip' size='20'></p>
  <p><input type='text' name='city' size='20'></p>
  <p><input type='text' name='state_abbr' size='20'></p>
  <p><input type='submit' value='Enviar' name='B1'></p>
</form> 

Aqui esta mi codigo Ajax
(Codigo que hace las llamadas)

Código PHP:

  <script> 
var ajax = getHTTPObject(); 
 
function getHTTPObject() 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest) { 
      // code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp=new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
      // code for IE6, IE5 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } else { 
      //alert("Your browser does not support XMLHTTP!"); 
    } 
    return xmlhttp; 
} 
 
function updateCityState() 
{ 
    if (ajax) 
    { 
        var zipValue = document.getElementById("zipcode").value; 
        if(zipValue) 
        { 
            var url = "/get_city_state.php"; 
            var param = "?zip=" + escape(zipValue); 
 
            ajax.open("GET", url + param, true); 
            ajax.onreadystatechange = handleAjax; 
            ajax.send(null); 
        } 
    } 
} 
function handleAjax() 
{ 
    if (ajax.readyState == 4) 
    { 
        citystatearr = ajax.responseText.split(","); 
 
        var city = document.getElementById('city'); 
        var state = document.getElementById('state'); 
 
        city.value = citystatearr[0]; 
        state.value = citystatearr[1]; 
    } 
} 
</script>  
  

Que le debo agregar a mi formulario para que realice las llamadas Ajax

En estos campo que debo de agregar.

Código:

  <input type='text' name='zip' size='20'>
  <input type='text' name='city' size='20'>
  <input type='text' name='state_abbr' size='20'>
  <input type='submit' value='Enviar' name='B1'>

Saludos

[caricatos]

Hola:

Si pones:

var zipValue = document.getElementById("zipcode").value;

debe existir un control con id="zipcode"... cosa que no nos muestras.

Saludos

[domichis]

No eres de gran ayuda. Creo que no leiste bien mi problema

[Alexis88]

Iniciado por domichis

No eres de gran ayuda. Creo que no leiste bien mi problema

Lo que te dice caricatos, es correcto. Si intentas tomar el valor del campo de id 'zipcode', pues debe de existir uno en el DOM, pero no se encuentra en lo que nos has mostrado. Al formulario no tienes que agregarle nada más que los campos que ya tienes para poder realizar una petición Ajax, mucho menos a sus campos. Lo que buscas hacer solo involucra JavaScript y no al DOM, claro, excepto por la toma de valores, pero no pasa de ser algo referencial.

Lo que necesitas es relacionar al formulario con la llamada a la función que realiza la petición asíncrona para que así puedas enviar sus datos a través de la misma. Una forma práctica sería esta:

Código Javascript:

var form = document.querySelector("form"); //Tomo al formulario
form.addEventListener("submit", function(event){ //Cuando se envíen los datos
    event.preventDefault(); //Cancelo el envío del formulario
    //Acá ejecutas tus funciones
}, false);
 

Con el método preventDefault, cancelo el envío del formulario, el cual es la acción natural del evento submit; luego, solo te queda ejecutar tus funciones.

Por cierto, el método escape es obsoleto, en su lugar, utiliza el método encodeURIComponent. Además, no basta con que el estado de la petición indique que se haya completado la operación, también necesitas saber si el código de estado HTTP de la petición devuelto por el servidor, indique que la respuesta es correcta.

Saludos

[caricatos]

Hola:

Iniciado por domichis

No eres de gran ayuda. Creo que no leiste bien mi problema

... No solo leí lo que tenía que leer (nadie está obligado a hacerlo), sino que mi respuesta es correcta... Si esperas ayuda, lee las respuestas (no tenía que escribir más)

Saludos