Hola, en tu pagina del formulario tendrias que colocar un div donde iria el mensaje
<div id="mensaje" style="display:none"></div>
Y luego con una funcion ajax, habilitar de acuerdo al estado este div mientras se esta ejecutando el action.
Bueno este ejemplo lo uso para logeo , x ahi t puede servir para adaptarlo.
ajax.js
function formulario_ajax(url, goto_url, formid, contenedor){
var contenedor = document.getElementById(contenedor);
var Formulario = document.getElementById(formid);
var rand=Math.floor(Math.random()*9999);
var cadenaFormulario = "";
var sepCampos;
sepCampos = "";
for (var i=0; i <= Formulario.elements.length-1;i++) {
cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURIComponent(Formulario.elements[i].value);
sepCampos="&";
}
cadenaFormulario +="&rand="+rand;
ajax.open("POST", url, true);
ajax.onreadystatechange = function (){
if (ajax.readyState==1) {
contenedor.innerHTML = "<img src=\"images/ajax-loader.gif\" alt=\"Loading...\" />";
}
else{
if (ajax.readyState==4){
if(ajax.status==200){
contenedor.innerHTML = ajax.responseText;
if(ajax.responseText=="usuario validado"){
// redireccionar al home
document.location.href=goto_url;
}
}
else{
if(ajax.status==404){
contenedor.innerHTML = "La direccion no existe";
}
else{
contenedor.innerHTML = "Error: "+ajax.status;
}
}
}
}
}
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=iso-8859-1");
ajax.send(cadenaFormulario);
}
index.php
<form action="javascript
:valida_login()" name="formLogin" class="formLogin" id="formLogin">
<fieldset>
<legend>Acceso a usuarios </legend>
<p>
<label for="username" accesskey="u">Username: </label>
<input type="text" id="username" name="username" tabindex="1" value="" title="username" />
</p>
<p>
<label for="password" accesskey="p">Password:</label>
<input type="password" id="password" name="password" tabindex="2" title="password" />
<span class="text_form"> </span></p>
<table width="267" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="133"> </td>
<td width="128"> </td>
</tr>
<tr>
<td> </td>
<td><div align="right">
<input name="submit" type="submit" class="button" id="submit" tabindex="3" value="Ingresar" />
</div></td>
</tr>
</table>
</fieldset>
<p><a href="index.php"><img src="images/botones/ir_web_1.gif" alt="Ir a la web" name="Image9" width="141" height="18" border="0" id="Image9" /></a></p>
<div id="mensaje" style="display:none"></div>
</form>
VALIDO DATOS DLE FORMULARIO
<script>
// validar el ingreso
function valida_login(){
usuario=document.formLogin.username.value;
password=document.formLogin.password.value;
//seguridad=document.formLogin.txt_seguridad.value;
if(cortarBlancos(usuario).length==0){
alert("ingrese el usuario");
document.formLogin.username.focus();
return;
}
if(cortarBlancos(password).length==0){
alert("ingrese su password");
document.formLogin.password.focus();
return;
}
/*if(cortarBlancos(seguridad).length==0){
alert("ingrese su robot");
document.formLogin.txt_seguridad.focus();
return;
}*/
else{
formulario_ajax("proc_login.php","pages/frm_ml.php","formLogin","mensaje");
// activar el div de errores
document.getElementById("mensaje").style.display = "";
// volver a llenar datos
document.formLogin.username.focus();
document.formLogin.username.select();
}
}
Bueno saludos.
Alan.
