• Viernes 8 de Noviembre de 2024, 20:15
« anterior próximo »
Páginas: [1]

Autor Tema:  Mensaje De Alerta  (Leído 3722 veces)

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Mensaje De Alerta
« en: Jueves 19 de Agosto de 2004, 16:31 »
0
Hola yo quiero que en un formulario de altas al no meter nada en una caja de texto me apareza un mensaje indicando q debe introducir un valor, tengo el siguiente código en la cabecera del html
<script>
function Comprueba(Nombre) {
var n = Nombre.value;
 if(n.length == 0 )  {
     alert('¡Introduzca un valor!');
   Nombre.focus();
 }
}
</SCRIPT>

y el código de la caja de texto es el siguiente:
<input name="Nombre" type="text" maxlength="15" onBlur="Comprueba(this)">

el mensaje me sale el problema que tengo esq a la hora d aceptar el sms e ir a la caja a introducir el valor no me deja cerrar la ventana del sms.

A ver si me podeis ayudar

Gracias

nostromo

  • Miembro MUY activo
  • ***
  • Mensajes: 134
    • Ver Perfil
    • http://win32cpp.cjb.net
Re: Mensaje De Alerta
« Respuesta #1 en: Viernes 20 de Agosto de 2004, 00:43 »
0
Hola;

Lo más fácil, si tienes un formulario con varios textbox, colocar disabled=true, menos con el textbox inicial, ese queda activado.

En la onkeypress lo accesas a un java script para al apretar enter valide si el texbox este lleno y con tab para posicionarte y activar el siguiente textbox para darle el foco.

Código: Text
  1.  
  2. function desactivar()
  3. {
  4.      with(document.formulario)
  5.       {
  6.             apellidos.disabled = true;
  7.             envio.disabled = true;
  8.       }
  9. }
  10.  
  11. function comprobar(obj)
  12. {
  13.         with(document.formulario)
  14.         {
  15.       var com = event.keyCode;
  16.              switch(obj)
  17.              {
  18.                case &#34;1&#34;:
  19.          if (nombre.value != &#34;&#34; && com == 13)
  20.         {with(apellidos){disabled=false; focus();}}
  21.       break
  22.                case &#34;2&#34;:
  23.          if (apellidos.value != &#34;&#34; && com == 13)
  24.         {with(envio){disabled=false;focus();}}
  25.       break
  26.     :
  27.     :
  28.     etc
  29.              }
  30.         }
  31. }
  32.  

En el body:
Código: Text
  1.  
  2. &#60;body onload=desactivar();&#62;
  3.  
  4. &#60;form name=formulario&#62;
  5.       &#60;input type = text size=10 name=nombre onkeypress=comprobar('1');&#62;
  6.         &#60;br&#62;
  7.       &#60;input type=text size=10 name=apellidos onkeypress =  comprobar('2');&#62;
  8.         &#60;br&#62;
  9.       &#60;input type=submit value=Enviar name=envio&#62;
  10. &#60;/form&#62;
  11.  
  12.  

Así de esta manera tienes más control sobre la validación de los formularios.

Nos vemos.

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Re: Mensaje De Alerta
« Respuesta #2 en: Viernes 20 de Agosto de 2004, 09:33 »
0
nostromo, yo lo que quiero esq al dejar en blanco una de las cajas de texto me salga el mensaje de alerta indicando q deba introducir un campo (bueno esto me sale con el código anterior, pero el problema es q no se cierra el mensaje de alerta para volver a meter un campo).
No se que hace tu código, lo he probado pero no me funciona ( no se si quieres q te desabilite un campo si no has introducido el anterior)

Gracias.

nostromo

  • Miembro MUY activo
  • ***
  • Mensajes: 134
    • Ver Perfil
    • http://win32cpp.cjb.net
Re: Mensaje De Alerta
« Respuesta #3 en: Sábado 21 de Agosto de 2004, 21:54 »
0
Hola;

Realize el ejemplo de cero, ahora funciona sin problemas.

El codigo que tengo es habilitar los campos siempre y cuando el campo anterior contenga algo y no te deja avanzar hasta que el campo se encuentre lleno, el uso de alert dejalo un poco de lado, el beep es bastante molesto.

La validación es más profesional y luego puedes hacer ingresar solamente números y letras, para validar los campos de nombres y fonos, etc.

Ahora al inicializar la página, se coloca automaticamente en el primer campo.

El ejemplo se encuentra probado en Win98 SE, Explorer 5.0 y 6.0, Opera. Se utilizo el Crimson Editor (Block de notas con resalte de sintaxis) para editar el código.

Código: Text
  1. /------------------------------
  2.   /*
  3.     Cedido por Alejandro Ramírez Bastias
  4.     Profesional forestal, programador en VisualBasic, html, css, JavaScript, Xml
  5.     a_ramirezb@latinmail.com
  6.     Iquique, Chile
  7.   */
  8.   //-------------------------------
  9.  

Código: Text
  1. &#60;html&#62;
  2. &#60;head&#62;&#60;title&#62;&#60;/title&#62;
  3. &#60;style&#62;
  4. body {cursor:default;font-family:verdana;font-size:12px;}
  5. .texto {font-family:verdana;font-size:12px;}
  6. .borde {border:solid 1px #000000;} .btn {border:solid 1px #000000;font-family:verdana;font-size:14px;}
  7. &#60;/style&#62;
  8. &#60;script&#62;
  9.   //------------------------------
  10.   /*
  11.     Cedido por Alejandro Ramírez Bastias
  12.     Profesional forestal, programador en VisualBasic, html, css, JavaScript, Xml
  13.     a_ramirezb@latinmail.com
  14.     Iquique, Chile
  15.   */
  16.   //-------------------------------
  17. function menus()
  18. {
  19.   with (document)
  20.     {
  21.       oncontextmenu = new Function(&#34;return false&#34;);
  22.       onselectstart = new Function(&#34;return false&#34;);
  23.     }
  24. }  
  25. function desactivar()
  26. {
  27.   with(document.formul)
  28.     {
  29.       //--- Desactivar campos y boton enviar
  30.       apell.disabled = true;
  31.       direc.disabled = true;
  32.       emilio.disabled = true;
  33.       listo.disabled = true;
  34.       //--- Colocar foco en el primer campo
  35.       nom.focus();
  36.     }
  37. }
  38. function salto(obj)
  39. {
  40.   with(document.formul)
  41.     {
  42.       //--- Declarar variables ----
  43.       var e_kc = event.keyCode;
  44.       switch(obj)
  45.         {
  46.          
  47.           case &#34;1&#34;:
  48.             if (e_kc == 13 && nom.value != &#34;&#34;)
  49.               {
  50.                 with(apell) {disabled=false;focus();}
  51.               }
  52.               break
  53.           case &#34;2&#34;:
  54.             if (e_kc == 13 && apell.value != &#34;&#34;)
  55.               {
  56.                 with(direc) {disabled=false;focus();}
  57.               }
  58.               break
  59.           case &#34;3&#34;:
  60.             if (e_kc == 13 && direc.value != &#34;&#34;)
  61.               {
  62.                 with(emilio) {disabled=false;focus();}
  63.               }
  64.               break
  65.           case &#34;4&#34;:
  66.             if (e_kc == 13 && emilio.value != &#34;&#34;)
  67.               {
  68.                 with(listo) {disabled=false;focus();}
  69.               }
  70.               break
  71.         }
  72.     }
  73. }
  74. &#60;/script&#62;
  75. &#60;/head&#62;
  76. &#60;body onload=desactivar();menus();&#62;
  77. &#60;center&#62;
  78. &#60;form name=formul&#62;
  79.   &#60;table border=0 cellspacing=0 cellpadding=0 class=texto&#62;
  80.     &#60;tr&#62;
  81.       &#60;td&#62;Nombre :&#60;/td&#62;&#60;td&#62;&#60;input type=text size=7 name=nom class=borde onkeypress=salto('1');&#62;(*)&#60;/td&#62;
  82.     &#60;/tr&#62;
  83.     &#60;tr&#62;&#60;td height=30 colspan=2&#62;&#60;/td&#62;&#60;/tr&#62;
  84.     &#60;tr&#62;
  85.       &#60;td&#62;Apellido :&#60;/td&#62;&#60;td&#62;&#60;input type=text size=7 name=apell class=borde onkeypress=salto('2');&#62;(*)&#60;/td&#62;
  86.     &#60;/tr&#62;
  87.     &#60;tr&#62;&#60;td height=30 colspan=2&#62;&#60;/td&#62;&#60;/tr&#62;
  88.     &#60;tr&#62;
  89.       &#60;td&#62;Direcci&oacute;n :&#60;/td&#62;&#60;td&#62;&#60;input type=text size=7 name=direc class=borde onkeypress=salto('3');&#62;(*)&#60;/td&#62;
  90.     &#60;/tr&#62;
  91.     &#60;tr&#62;&#60;td height=30 colspan=2&#62;&#60;/td&#62;&#60;/tr&#62;
  92.     &#60;tr&#62;
  93.       &#60;td&#62;Email :&#60;/td&#62;&#60;td&#62;&#60;input type=text size=7 name=emilio class=borde onkeypress=salto('4');&#62;(*)&#60;/td&#62;
  94.     &#60;/tr&#62;
  95.     &#60;tr&#62;&#60;td height=30 colspan=2&#62;&#60;/td&#62;&#60;/tr&#62;
  96.     &#60;tr&#62;
  97.       &#60;td&#62;&#60;input type=button value=Enviar name=listo class=btn&#62;&#60;/td&#62;
  98.     &#60;/tr&#62;
  99.   &#60;/table&#62;
  100. (*) Todos los campos son obligatorios, llene el campo respectivo para poder continuar.
  101. &#60;/form&#62;  
  102. &#60;/center&#62;
  103. &#60;/body&#62;
  104. &#60;/html&#62;
  105.  

Nos vemos.

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Re: Mensaje De Alerta
« Respuesta #4 en: Domingo 22 de Agosto de 2004, 13:15 »
0
Hola ya entido tu codigo, inabilitar el boton de enviar hasta que no se llenen todos los campos, está muy bien.
Pero he creado un página html con ese mismo código y al meter el campo nombre ni con el tabulardor ni con el ratón me deja posicionarme en el segundo campo, no detectará el valor??

Mi código anterior, me funciona con un campo, pero ya al poner al campo siguiente que llame a comprobar si tiene algo hay se me bloquea y no se cierra el mensaje de alerta.

Muchas gracias por tu ayuda.

Un saludo

nostromo

  • Miembro MUY activo
  • ***
  • Mensajes: 134
    • Ver Perfil
    • http://win32cpp.cjb.net
Re: Mensaje De Alerta
« Respuesta #5 en: Lunes 23 de Agosto de 2004, 00:49 »
0
Hola;

Compa se me olvido un detalle enorme, disculpa.

Los campos siguientes se activan cuando aprietas la Tecla Enter, como apellidos se encuentra con la propiedad disabled a True, la validación del campo y posicionarse en el siguiente, se produce cuando aprietas Enter o Intro en el teclado, no sirve solamente escribir, ni el tab, ni nada.

Nos vemos.

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Re: Mensaje De Alerta
« Respuesta #6 en: Lunes 23 de Agosto de 2004, 15:26 »
0
Hola de nuevo
He probado tu código y funciona perfectamente, pero a la hora de adaptarlo al mio, no se que pasa que no me manda el foco a la primera caja de texto.
Este es el código no se que puede ser.


<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
 //------------------------------
  /*
    Cedido por Alejandro Ramírez Bastias
    Profesional forestal, programador en VisualBasic, html, css, JavaScript, Xml
    a_ramirezb@latinmail.com
    Iquique, Chile
  */
  //-------------------------------
function menus(){
  with (document){
      oncontextmenu = new Function("return false");
      onselectstart = new Function("return false");
    }
}  
function desactivar(){
  with(document.RegistrarUsu) {
      //--- Desactivar campos y boton enviar
      Nombre.disabled = true;
      Contrasena.disabled = true;
      Direccion.disabled = true;
      Telefono.disabled = true;
      NIF.disabled = true;
     listo.disabled=true;
   
      Nombre.focus();
    }
}
function salto(obj){
  with(document.RegistrarUsu) {
      //--- Declarar variables ----
      var e_kc = event.keyCode;
      switch(obj)     {
          case "1":
            if (e_kc == 13 && Nombre.value != "")
              {
                with(Contrasena) {disabled=false;focus();}
              }
              break
          case "2":
            if (e_kc == 13 && Contrasena.value != "")
              {
                with(Direccion) {disabled=false;focus();}
              }
              break
          case "3":
            if (e_kc == 13 && Direccion.value != "")
              {
                with(Telefono) {disabled=false;focus();}
              }
              break
          case "4":
            if (e_kc == 13 && Telefono.value != "")
              {
                with(NIF) {disabled=false;focus();}
              }
              break
        
          case "5":
            if (e_kc == 13 && NIF.value != "")
              {
                with(listo) {disabled=false;focus();}
              }
              break    
        }
    }
}

</script>
</head>


 <body  bgcolor="#99CCFF" onload=desactivar(); menus();>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00CCFF">

  <tr bgcolor="#6699CC">
    <td height="129" colspan="3" valign="top">
    <div align="left">
 

        <blockquote> <img src="../../images/cubo2.jpg" name="cube"  border="0" style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
          <font size="7" face="Georgia, Times New Roman, Times, serif"> PUNTO
          LIMPIO </font> </blockquote>
        </div>          
           <div align="right"> <strong>
         <script language="Javascript">
var dias_semana = new Array ('Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado');
var nombres_mes = new Array ('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto', 'Septiembre','Octubre','Noviembre','Diciembre');
var fecha = new Date ();
var dia = fecha.getDay ();
dia = dias_semana[dia];
var dia_mes = fecha.getDate();
var mes = fecha.getMonth ();
mes = nombres_mes[mes];
var anio = fecha.getYear();
anio = anio;
document.write (dia + ' ' + dia_mes + ' de ' + mes + ' de ' + anio);
</script>  
</strong></div>
    </tr>
  <tr>
    <td width="180" height="495" valign="top" bgcolor="#0099FF"> <p> </p>
      <blockquote>
        <p> </p>
      </blockquote>
     <br> <br> <br> <br><br><br><br><br>
   
      <p><strong>
     
</td>
    <td width="100%" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
   
        <tr>
          <td width="100%" height="494" valign="top" bgcolor="#99CCFF"><br>  
            <div align="left"> <br>
              <p align="center"><font size="4" face="Verdana, Arial, Helvetica, sans-serif"><strong>DATOS
                PERSONALES</strong></font> <br><br>
              <div align="center"> </div>
              <form name="RegistrarUsu" method="post" action="http://localhost:8080/PUNTOLIMPIO/servlet/RegistrarU">
                <div align="center">
                  <table width="35%" border="1">
                 
                    <tr>
                      <td width="80%"><div align="center"><strong>Nombre</strong></div></td>
                      <td width="20%"><input type="text" name="Nombre" maxlength="15" onkeypress=salto('1')>(*)</td>
                    </tr>
                    <tr>
                      <td><div align="center"><strong>Contraseña</strong></div></td>
                      <td><input type="password" name="Contrasena" maxlength="40" onkeypress=salto('2')>(*)</td>
                    </tr>
                    <tr>
                      <td><div align="center"><strong>Dirección</strong></div></td>
                      <td><input name="Direccion" type="text" maxlength="80" onkeypress=salto('3')>(*)</td>
                    </tr>
                    <tr>
                      <td><div align="center"><strong>Teléfono</strong></div></td>
                      <td><input name="Telefono" type="text" maxlength="15" onkeypress=salto('4')>(*)</td>
                    </tr>
                    <tr>
                     
                    <tr>
                      <td><div align="center"><strong>NIF</strong></div></td>
                      <td><input name="NIF" type="text" maxlength="10" onkeypress=salto('5')>(*)</td>
                    </tr>
                  </table>
                  <br>
                  <br>
                  <br>
         <input type="button" value="Enviar" name="listo">
               </div>
              </form>
              <br>
              <label></label>
            </div>
           </td>
        </tr>
      </table></td>
    <td width="252"></td>
  </tr>
</table>  
       

</body>
</html>

Un saludo

y muchas gracias por todo

nostromo

  • Miembro MUY activo
  • ***
  • Mensajes: 134
    • Ver Perfil
    • http://win32cpp.cjb.net
Re: Mensaje De Alerta
« Respuesta #7 en: Martes 24 de Agosto de 2004, 01:51 »
0
Hola;

Nunca te resultaria por:

en function desactivar(); colocaste esto:

(Esta línea de código esta incorrecta la debes sacar!!!)

Nombre.disabled = true;

Siempre debes dejar activo el primer campo nunca lo desactives. De esta manera  no funciona el focus(), ni absolutamente nada.

Nos vemos.

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Re: Mensaje De Alerta
« Respuesta #8 en: Martes 24 de Agosto de 2004, 09:34 »
0
Muchas gracias por todo nostromo ahora ya funciona bien, pero tengo una duda, los botones les quiero hacer con una imagen.
Este sería el código del botón aceptar:

 <a href="javascript:document.RegistrarUsu.submit()">          
   <img name="listo" src="../../images/BAceptar.jpg"></a>

el problema esq no me sale deshabilitado, se puede hacer con imágenes o debería poner un boton.

Un saludo

nostromo

  • Miembro MUY activo
  • ***
  • Mensajes: 134
    • Ver Perfil
    • http://win32cpp.cjb.net
Re: Mensaje De Alerta
« Respuesta #9 en: Miércoles 25 de Agosto de 2004, 06:12 »
0
Hola;

Desactivar la imajen no se si se pueda pero intenta esto:

En el Body coloca esto:

Código: Text
  1.  
  2. &#60;span id=1 style=&#34;display:none;&#34;&#62;
  3.     &#60;a href=&#34;javascript:document.RegistrarUsu.submit()&#34;&#62;
  4.     &#60;img name=&#34;listo&#34; src=&#34;../../images/BAceptar.jpg&#34;&#62;&#60;/a&#62;
  5. &#60;/span&#62;
  6.  
  7.  

en la sección del JavaScript agrega esta nueva función:

Código: Text
  1.  
  2. function boton(id)
  3. {
  4.   obj = document.getElementById(id);
  5.   if (id == &#34;1&#34;)
  6.     {
  7.       if (obj.style.display == &#34;none&#34;)
  8.         {
  9.           obj.style.display = &#34;&#34;;
  10.         }
  11.       
  12.     }
  13. }
  14.  
  15.  

En la función JavaScript function salto(obj), debes ir al case "4":, y le agregas la nueva función:

Código: Text
  1.  
  2. case &#34;4&#34;:
  3.             if (e_kc == 13 && emilio.value != &#34;&#34;)
  4.               {
  5.                 
  6.                 boton(&#34;1&#34;);
  7.               }
  8.               break
  9.  
  10.  

postea para ver como te fue.

Por último no olvides sacar de la function desactivar(); el listo.disabled = true;

Nos vemos.

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Re: Mensaje De Alerta
« Respuesta #10 en: Miércoles 25 de Agosto de 2004, 09:57 »
0
Buenas!!!!

Si que me ha funcionado!!, el botón aceptar desaparece hasta que termino de rellenar el ultimo campo y al pulsar intro aparece.

Muchas gracias!!!!

Nos vemos

lulial

  • Nuevo Miembro
  • *
  • Mensajes: 22
    • Ver Perfil
Re: Mensaje De Alerta
« Respuesta #11 en: Martes 31 de Agosto de 2004, 22:40 »
0
Hola!

Ahora quiero meter el mismo código en un servlet que me permite modificar datos personales e igual que anteriormente quiero obligarle a meter todos los campos.

Lo pongo igual en el servlet y no me funciona.

htmlPage += "<script>";
         htmlPage += "function menus(){";
         htmlPage += " with (document){";
         htmlPage += "  oncontextmenu = new Function('return false');";
         htmlPage += "  onselectstart = new Function('return false');";
         htmlPage += "    }";
         htmlPage += "}";  
         htmlPage += "function desactivar(){";
         htmlPage += "with(document.RegistrarUsu) {";
               //--- Desactivar campos y boton enviar
         
         htmlPage += "Direccion.disabled = true;";
         htmlPage += "Telefono.disabled = true;";
              
         htmlPage += "Fax.disabled = true;";
         htmlPage += "Email.disabled = true;";
         htmlPage += "Contrasena.disabled = true;";
         htmlPage += "NIF.disabled = true;";
         htmlPage += "listo.disabled=true;";
           
         htmlPage += "      Nombre.focus();";
         htmlPage += "    }";
         htmlPage += "}";
         htmlPage += "function salto(obj)";
         htmlPage += "{";
         htmlPage += "  with(document.RegistrarUsu)";
         htmlPage += "    {";
               //--- Declarar variables ----
         htmlPage += "  var e_kc = event.keyCode;";
         htmlPage += "       switch(obj)";
         htmlPage += "         {";
                   
         htmlPage += "    case '1':";
         htmlPage += "   if (e_kc == 13 && Nombre.value != '')";
         htmlPage += " {";
         htmlPage += "   with(Direccion) {disabled=false;focus();}";
         htmlPage += "     }";
         htmlPage += "   break";
         htmlPage += "      case '2':";
         htmlPage += "   if (e_kc == 13 && Direccion.value != '')";
         htmlPage += "           {";
         htmlPage += "    with(Telefono) {disabled=false;focus();}";
         htmlPage += "  }";
         htmlPage += " break";
         htmlPage += " case '3':";
         htmlPage += " if (e_kc == 13 && Telefono.value != '')";
         htmlPage += " {";
         htmlPage += " with(Fax) {disabled=false;focus();}";
         htmlPage += " }";
         htmlPage += " break";
         htmlPage += " case '4':";
         htmlPage += " if (e_kc == 13 && Fax.value != '')";
         htmlPage += " {";
         htmlPage += " with(Email) {disabled=false;focus();}";
         htmlPage += " }";
         htmlPage += " break";
         htmlPage += " case '5':";
         htmlPage += " if (e_kc == 13 && Email.value != '')";
         htmlPage += " {";
         htmlPage += " with(Contrasena) {disabled=false;focus();}";
         htmlPage += " }";
         htmlPage += " break";
         htmlPage += " case '6':";
         htmlPage += " if (e_kc == 13 && Contrasena.value != '')";
         htmlPage += " {";
         htmlPage += " with(NIF) {disabled=false;focus();}";
         htmlPage += " }";
         htmlPage += " break";
               
                    
         htmlPage += "   case '7':";  
         htmlPage += " if (e_kc == 13 && NIF.value != '')   {";
                         
         htmlPage += "          boton('1');";
         htmlPage += " }";
         htmlPage += " break";
                    
         htmlPage += "                  }";
         htmlPage += " }";
         htmlPage += " }";


         htmlPage += " function boton(id){";
         htmlPage += " obj = document.getElementById(id);";
         htmlPage += " if (id == '1')    {";
         htmlPage += " if (obj.style.display == 'none')    {";
         htmlPage += " obj.style.display = '';";
         htmlPage += " }";
               
         htmlPage += "              }";
         htmlPage += " }";
           htmlPage += " </script>";


las cajas de texto las tengo igual:
htmlPage += "  <td><input name='Nombre' type='text' maxlength='40' onkeypress=salto('1')></td>";
 

No se que puede ser.

Gracias

Un saludo
Páginas: [1]
« anterior próximo »