El caso es que tengo una página con tres divs, en el primero cargo un mapa de Google Maps con una serie de marcadores, y en el segundo genero un formulario desde un archivo XML con AJAX. Entonces quiero que cuando el usuario pulse enviar en el formulario, la respuesta del servidor se cargue en el tercer div.
En IE llego a ver la tabla, pero al cabo de unos segundos la página se recarga y desaparece el contenido de este tercer div, mientras que en Firefox directamente se recarga sin mostrar nada.
¿Qué puede fallar?
Código HTML:
<body>
<div id="map" style="width:830px; height:550px; float:left"></div>
<div id="form" style="float:left; margin-left:10px">
<form name="observation" method="post">
<select name="offering" id="offering" onchange="return offeringOnChange()">
<option>Select offering...</option>
<?php
$xml = simplexml_load_file('capabilities.xml');
$result = $xml->xpath("/ObservationOfferingList/ObservationOffering/Offering | /ObservationOfferingList/ObservationOffering/@id");
for ($i=0;$i<count($result);$i+=2) {
$e=$i+1;
echo("<option value='$result[$i]'>$result[$e]</option>");
}
?>
</select>
<!-- Aquí van más select y los input -->
<input name="Submit" type="submit" onclick="return cargarContenido()" />
</form>
</div>
<div id="contenedor" style="float:left"></div>
</body>
Código:
function cargarContenido(){
var contenedor = document.getElementById('contenedor');
CreateXmlHttpObj();
XmlHttpObj.open("POST", "form.php", true);
XmlHttpObj.onreadystatechange=function() {
if (XmlHttpObj.readyState==4) {
if (XmlHttpObj.status == 200) {
contenedor.innerHTML = XmlHttpObj.responseText;
}
}
}
XmlHttpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
XmlHttpObj.send('');
}
Un saludo.