Saludos, si no os importa os comento mi problema. Cabe decir que es lo primero que hago con ajax pero lo necesito solucionar como el respirar ya que ahora en mi web se dan de alta usuarios mediante el formulario y no es hasta que hacen submit que este les indica que el usuario ya existe. Así pues he intentado modificar mi formulario para que los campos se validen por ajax y compruebe si el Usuario y el E-mail son únicos.
El problema llega cuando quiero habilitar y desabilitar el botón de Submit. No se habilita y deshabilita siempre correctamente, tiene algun bug en según qué combinaciones. Os pongo el código y si alguien me recomienda algo mejor y más sencillo tipo jQuery pues mucho mejor.
Código:
// A function to handle the response from the PHP script
function handleHttpResponse() {
//function loadpage(http, vLoadarea) {
if(http.readyState == 4) {
// Refering to the PHP script, for every validation we'll get
// either true or false and apply some visual changes in order to
// get the user focusing on each field whether it's ok or not
// If one of the input fields contains an error, the submit button
// will be disabled, until the error (that means all errors) are
// solved
if(http.responseText == "userAvailable") {
var sInput = document.getElementById(vId);
var vButton = document.getElementById("submit");
document.getElementById(vLoadarea).innerHTML = http.responseText;
document[vId].src = "img/true.png";
sInput.style.border = "1px solid green";
sInput.style.background = "#ffffff";
return checkSubmit();
} else if(http.responseText == "userNotAvailable") {
var sInput = document.getElementById(vId);
var vButton = document.getElementById("submit");
document.getElementById(vLoadarea).innerHTML = http.responseText;
document[vId].src = "img/false.png";
sInput.style.border = "1px solid orange";
sInput.style.background = "#ffffff";
vButton.disabled = true;
vError.push(vId);
}
if(http.responseText == "existsEmail") {
var sInput = document.getElementById(vId);
var vButton = document.getElementById("submit");
document.getElementById(vLoadarea).innerHTML = http.responseText;
document[vId].src = "img/false.png";
sInput.style.border = "1px solid #d12f19";
sInput.style.background = "#f7cbc2";
vButton.disabled = true;
vError.push(vId);
}
if(http.responseText == "false") {
var sInput = document.getElementById(vId);
var vButton = document.getElementById("submit");
var errMsg = document.getElementById(vLoadarea);
document[vId].src = "img/false.png";
sInput.style.border = "1px solid #d12f19";
sInput.style.background = "#f7cbc2";
errMsg.innerHTML = "Valor necesario o incorrecto.";
vButton.disabled = true;
vError.push(vId);
}
if(http.responseText == "true") {
var sInput = document.getElementById(vId);
var errMsg = document.getElementById(vLoadarea);
document[vId].src = "img/true.png";
sInput.style.border = "1px solid #338800";
sInput.style.background = "#c7f7be";
errMsg.innerHTML = "ok";
return checkSubmit();
}
if(http.responseText == "none") {
var sInput = document.getElementById(vId);
var vButton = document.getElementById("submit");
var errMsg = document.getElementById(vLoadarea);
document[vId].src = "img/blank.gif";
sInput.style.border = "1px solid #aaa";
sInput.style.background = "#ffffff";
return checkSubmit();
}
}
}
//AQUI SE DEBERÍA DE VERIFICAR SI TODOS LOS CAMPOS SON CORRECTOS O SI TIENEN ALGUN ERROR
function checkSubmit(){
// We do a check if our element is in the error array, and if
// so, we can delete it from the array
if(vError.indexOf(vId) != -1) {
var aId = vError.indexOf(vId);
document.getElementById("errs").innerHTML = aId;
vError.splice(aId, 1);
if(vError.length > 0) {
var vButton = document.getElementById("submit");
vButton.disabled = true;
} else {
var vButton = document.getElementById("submit");
vButton.disabled = false;
}
}
}
Un saludo,