Formulario , Confirmación y Deshabilitar

[fr1974]

Estoy tratando de hacer un formulario que haga lo siguiente o más bien un boton que realice estas 3 funciones , se hacerlas pro separado pero no conjuntamente , el tema consiste en lo siguiente


Al presionar el boton de envio , el sistema le pide al usuario confirmación para el envio del formulario , y si se acepta el botón se deshabilita par aa continuación mostrar la palabra enviando o el mensaje que queramos , bueno esa es la idea , a ver si se le ocurre a alguien como hacer esto , saludos a todos y gracias

[rol2007]

cuack mira eso se puede hacer con el lightbox....por ahi hay un post de esconde la pantalla....yo lo hize haciendo algo similar...

pesionas el boton te sale un alert, si das aceptar se pone negra y sale un gif loading sino se keda donde mismo.....cancel
algo asi?

[rol2007]

Iniciado por gvargas

Pregunta: ¿Cómo muestro un gif animado con el mensaje "cargando..." mientras se procesa la respuesta con AJAX?


Respuesta: Este ejemplo es muy similar al efecto que hace gmail cuando se borra o carga un correo. (un mensaje en la ezquina superior derecha)

yo le he puesto ademas un gif animado para indicar el progreso.

Primero el código CSS:

Código PHP:

  .msgStatus {
position:fixed;
top:1px;
right:1px;
border:1px solid #FF6600;
background-color:#FEEB9D;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width:auto;
height:auto;
display:none;
}  
   

Ahora el HTML de la página donde se hará uso del efecto.

Código PHP:

  <!--Esto en el header de la pagina -->
<script language="javascript" type="text/javascript">
        Ajax.Responders.register(globalCallbacks);
</script>

<!--Esto dentro del body -->
<div class="msgStatus" id="status"><center><img src='img/ajax-loader.gif' border='0' align='absmiddle'>Procesando tu solicitud.</center></div>  
  

Yo uso el siguiente gif:
http://mypage.bluewin.ch/yuppi/image...jax-loader.gif


Ahora la solicitud por AJAX.

Código PHP:

  // Generalmente tenemos un archivo .js con las funciones javascript/ajax, poner esto
var globalCallbacks = {
    onCreate: function(){$('status').style.display = 'block';},
    onComplete : function(){
        if (Ajax.activeRequestCount == 0){
            $('status').style.display = 'none';
        }
    }
}

// despues de esto hacer cualquier petición con ajax por ejemplo:
function MiFuncionAjax(list_params){
    var parametros = 'parametros=' + list_params;
    new Ajax.Request('script.php', {method: 'post', parameters: parametros });
}  
   

Y ya!

¿Cómo funciona? La variable globalCallbacks contiene dos funciones anonimas onCreate y onComplete, cuando el objeto ajax se crea el div se activa, y con onComplete se oculta.
Para que esto funcione se debe de colocar en el header de la pagina el responder: Ajax.Responders.register(globalCallbacks); que constatemente monitorea el comportamiento de la pagina, cuando se detecta que hay una petición Ajax pues le avisa a globalCallbacks que hay trabajo que hacer

Hecho esto, practicament cualquier petición hecha con ajax es detectada y proceso visual con el div hace el resto.

Nota: Esto funciona usando Prototype.

sacado desde ajax

[fr1974]

Muy interesante todo lo q me comentas pero queria a poder ser un javascript sencillito , meterse a ajax ufff me supone comprenderlo bien y de momento me parece complicado , pero te agradezco la informacion desde luego

Me gustaria eso un javascript que implementase esas 3 cosas , realmente tengo esas 3 cosas , tengo un javascript que al pulsar una vez deshabilita el boton y pone el mensaje q quiera , enviando , guardando etc , en el propio boton , submit vamos

Pero lo unico que me faltaria implementar sería finalmente el mensaje de confirmación para el envio , pongo el ejemplo

<form name="form" name="form">
<input type='submit' name='borrar' value='Eliminar' onClick=" this.value='Enviando'; this.disabled=true;this.form.submit();">
</form>

Con esto envio el formulario y deshabilita el boton y aparece el mensaje en el mismo boton de enviando

Lo unico que necesitaria es q se implementara el mensaje típico de , ¿ Confirma que desea enviar el formulario ? , eso seria todo

Muchas gracias y a ver si a alguien se le ocurre alguna cosa , saludos

[JavierB]

Hola fr1974

Mira si te sirve este ejemplo:

Código PHP:

  <html>
<head>
<script type="text/javascript">
function confirmar(frm) {
  if (!confirm('Seguro')) return false;
  frm.enviar.disabled=true;
  document.getElementById('envio').style.display = 'block';
}
</script>
</head>
<body>
<form onsubmit="return confirmar(this)">
<p id="envio" style="display:none">Enviando...</p>
<input type="submit" name="enviar" />
</form>
</body>
</html>  
  

Saludos,

[fr1974]

ok , muchas gracias hice una pequeña modificacion de tu script y ya hace las 3 cosas a la vez , ahi os lo paso

<script type="text/javascript">
function confirmar(frm) {
if (!confirm('Seguro')) return false;

frm.enviar.disabled=true;

document.getElementById('envio').style.display = 'block';
}
</script>

<form onsubmit="return confirmar(this)">
<input onclick="this.value='Enviando';" type="submit" name="enviar" />
</form>

De esta forma tambíen muestra el mensaje de enviando en el propio boton , saludos y gracias por la solucion a los dos