Vale, he conseguido hacerlo funcionar aunque no funciona exactamente como me gustaría. Lo primero no consigo hacer que al dar al botón se rellenen los campos, he tenido que hacerlo con el método OnBlur. ¿Cómo podría hacer que al dar al botón Buscar se rellenen los campos (en vez de usar OnBlur)?
FORMS Código PHP:
<input type="text" maxlength="5" onblur="updateCityState();" id="postal_code" name="postal_code" placeholder="Código postal" pattern="[0-9]{5}">
<button class="btn btn-info btn-flat" type="submit">Buscar</button>
<input type="text" id="city" placeholder="Población">
<button class="btn btn-info btn-flat" type="button">Buscar</button>
<input type="text" id="state" class="form-control" placeholder="Provincia">
AJAX Código PHP:
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("postal_code").value;
if(zipValue)
{
var url = "get_cities.php";
var param = "?postal_code=" + 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];
}
}
CONSULTA BD Código PHP:
<?php
include_once('../../../connect.html');
//perform lookup
$title = ($_GET['postal_code']);
$statement = $connection->prepare ("SELECT city, state FROM cities, states WHERE cities.state_id = states.state_id AND cities.postal_code = ?");
$statement->execute(array($title));
$statement->setFetchMode(PDO::FETCH_BOTH);
//print out results
while($r = $statement->fetch()){
echo $r['city'].",".$r['state'];
}
Por otra parte tengo un error. Si escribo un código postal válido funciona, pero si escribo uno que no existe me saca un "undefined" en ambos campos. ¿Como podría hacer que al intriducir un código postal que no existe se rellenen los campos con algo como "El código postal no existe?. He intentado solucionarlo tocando un poco la parte de "echo..." de la consulta a la DB, probando con un if else pero no doy con ello. ¿Alguna sugerencia?