Duda en codigo

bandolera · #1 (**permalink**) 11/11/2010, 19:32

Encontré este código para avanzar con la tecla enter entre los campos de un formulario:
[URL="http://www.elcodigo.com/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=82"]http://www.elcodigo.com/cgi-bin/DBread.cgi?tabla=scripts&campo=0&clave=82[/URL]

El codigo completo es este:

Código PHP:

  <script language="javascript" type="text/javascript">

siguienteCampo = "campo1"

nombreForm = "miFormulario"

 
function TelcaPulsada( e ) {

 
   if ( window.event != null)        //IE4+

      tecla = window.event.keyCode;

   else if ( e != null )         //N4+ o W3C compatibles

      tecla = e.which;

   else

      return;

  

   if (tecla == 13) {           //se pulso enter

      if ( siguienteCampo == 'fin' ) {      //fin de la secuencia, hace el submit

         alert('Envio del formulario.')      //eliminar este alert para uso normal

         return false          //sustituir por return true para hacer el submit

      } else {             //da el foco al siguiente campo

         eval('document.' + nombreForm + '.' + siguienteCampo + '.focus()')

         return false

      }

   }

}

 
document.onkeydown = TelcaPulsada;      //asigna el evento pulsacion tecla a la funcion

if (document.captureEvents)        //netscape es especial: requiere activar la captura del evento

  document.captureEvents(Event.KEYDOWN)

</script>

 
   </head>

 
<body onload="document.miFormulario.campo1.focus();">

     <p>ejemplo</p>

 
 
<form name="miFormulario" onSubmit="return false" >

1. <input type="text" name="campo1" size="12" onFocus="siguienteCampo ='campo2';"><br>

2. <input type="text" name="campo2" size="12" onFocus="siguienteCampo ='campo3';"><br>

3. <input type="text" name="campo3" size="12" onFocus="siguienteCampo ='campo4';"><br>

4. <input type="text" name="campo4" size="12" onFocus="siguienteCampo ='fin';"><br>

 
<input type="submit" name="done" value="Enviar"></form>

 
   </body>

 </html>

Mis dudas son:
Cuando se le da click a Enviar hacia donde envía la data?? No le falta el archivo destino a este ejemplo??
Dónde debe ir si al dar click en Enviar no hace foco en el botón??
Gracias.

zerokilled · #2 (**permalink**) 11/11/2010, 20:00

tu duda no tiene nada que ver con javascript sino mas bien sobre las caracteristicas del navegador. por norma del w3c, un formulario debe tener un action. sin embargo, cuando el formulario carece de action, los datos se envian a la misma ruta. o sea, al mismo documento que muestra el formulario. la ultima pregunta no la comprendi...

Código:

<!ATTLIST FORM
  action      %URI;          #REQUIRED -- server-side form handler --
...
>

bandolera · #3 (**permalink**) 12/11/2010, 11:27

Cita:

Iniciado por zerokilled

tu duda no tiene nada que ver con javascript sino mas bien sobre las caracteristicas del navegador. por norma del w3c, un formulario debe tener un action. sin embargo, cuando el formulario carece de action, los datos se envian a la misma ruta. o sea, al mismo documento que muestra el formulario. la ultima pregunta no la comprendi...

Código:

<!ATTLIST FORM
  action      %URI;          #REQUIRED -- server-side form handler --
...
>

Entonces mi pregunta sería: Si quiero modificar ese formulario para uno propio, en donde necesito colocar un action="procesar.php" qué tengo que modificar en ese formulario ??

Y sobre la pregunta que no entendiste era que no hace foco en Enviar pero dice que envía los datos. Esa era mi duda.

zerokilled · #4 (**permalink**) 12/11/2010, 12:18

disculpa si tiene un tono sarcastico o lo considero demasiado obvio.... ¿sabes lo que son atributos de elementos? el action lo agregas como atributo del elemento <form>. sobre la ultima pregunta pues parece que depende de cada UA (user-agent: motor de los navegadores que procesa html). por ejemplo, en webkit (chrome y safari) el boton no recibe foco, pero en gecko (firefox) y trident (iexplorer8) el boton recibe foco. de todos modos, en webkit esto sucede cuando usas el raton pero si mueves el foco ya sea con funciones javascript o con la tecla Tab (Tabular) el boton recibe foco.

bandolera · #5 (**permalink**) 12/11/2010, 13:15

Cita:

Iniciado por zerokilled

disculpa si tiene un tono sarcastico o lo considero demasiado obvio.... ¿sabes lo que son atributos de elementos? el action lo agregas como atributo del elemento <form>. sobre la ultima pregunta pues parece que depende de cada UA (user-agent: motor de los navegadores que procesa html). por ejemplo, en webkit (chrome y safari) el boton no recibe foco, pero en gecko (firefox) y trident (iexplorer8) el boton recibe foco. de todos modos, en webkit esto sucede cuando usas el raton pero si mueves el foco ya sea con funciones javascript o con la tecla Tab (Tabular) el boton recibe foco.

, No me enoja tu sarcasmo... claro que sé los elementos, pero también sé que hay otras formas de armar los elementos sobre todo cuando se usa javascript.
Tons quedaría así cierto??

Código PHP:

  <form name="miFormulario" onSubmit="return false" action="proceso.php">

(sin ningún otro cambio?).
Te hago la pregunta porque leí en algún sitio que si tiene un evento como OnSubmit es mejor utilizar un Onclick para enviar los datos a otro archivo (creo).

Y sobre lo otro que depende del navegador, entonces, como opinión personal tuya sugieres utilizar esta forma de pasar con los enters sobre los campos?? o sugieres alguna otra forma mejor??

Gracias por tu tiempo y tus comentarios.

zerokilled · #6 (**permalink**) 12/11/2010, 14:06

pues de acuerdo a los comentarios/instrucciones del codigo tienes que eliminar una linea y substituir un valor por otro.

Código:

         alert('Envio del formulario.')      //eliminar este alert para uso normal 
         return false          //sustituir por return true para hacer el submit

lo cierto es que con esos cambios no me trabaja en chrome; no he probado en otro navegador pero debe ser lo mismo. en el elemento <form> tiene el evento onsubmit, es por ello que no se envia el formulario, simplemente elimina ese atributo.

Cita:

Te hago la pregunta porque leí en algún sitio que si tiene un evento como OnSubmit es mejor utilizar un Onclick para enviar los datos a otro archivo (creo).

seguramente lo habras entendido mal. no es lo mismo onclick que onsubmit; ambos responden a eventos distintos. el evento submit no necesiariamente se inicia con accion del raton, incluso puede ser con el teclado o dependiendo del equipo/dispositivo pudiera iniciarse con otra interfaz. por tanto, lo correcto seria utilizar onsubmit para cualquier tarea: validacion, manipulacion de formulario, cancelacion de envio, u otros. para el envio de datos no hay que preocuparse, de eso se encargara el navegador.

Cita:

Y sobre lo otro que depende del navegador, entonces, como opinión personal tuya sugieres utilizar esta forma de pasar con los enters sobre los campos?? o sugieres alguna otra forma mejor??

en mi opinion no tiene importancia como lo quieras hacer siempre y cuando sea un formulario accesible. es decir, que funcione incluso sin javascript. lo que antes quise comentar era una observacion de que cada navegador tiene sus particularidades pero en la mayoria de los casos este no afecta o no deberia afectar la funcionalidad principal. o sea, si al hacer click sobre el boton de envio, éste no recibe el foco, no deberia afectar en el proceso de envio. aqui la culpa no es el script, sino las caracteristicas del navegador.

pd: solo por aclarar... lo del sarcasmo, no era el tono que queria darle, era solo si lo percibias de esa forma...

bandolera · #7 (**permalink**) 12/11/2010, 17:14

Cita:

Iniciado por zerokilled

pues de acuerdo a los comentarios/instrucciones del codigo tienes que eliminar una linea y substituir un valor por otro.

Código:

         alert('Envio del formulario.')      //eliminar este alert para uso normal 
         return false          //sustituir por return true para hacer el submit

lo cierto es que con esos cambios no me trabaja en chrome; no he probado en
(...)
pd: solo por aclarar... lo del sarcasmo, no era el tono que queria darle, era solo si lo percibias de esa forma...

Creo que entendí todo. Ahora voy a probar y te aviso cualquier problema. ok? Y no hay problema. Además debo agradecer el tiempo que te has dado para analizar y responder.
Gracias.

bandolera · #8 (**permalink**) 12/11/2010, 20:51

Le hice algunos cambios, creo que ahora sí funciona, en FF, IE y en Chrome.

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script language="javascript" type="text/javascript">

siguienteCampo = "campo1"

nombreForm = "miFormulario"

 
function TelcaPulsada( e ) {

 
   if ( window.event != null)        //IE4+

      tecla = window.event.keyCode;

   else if ( e != null )         //N4+ o W3C compatibles

      tecla = e.which;

   else

      return;

  

   if (tecla == 13) {           //se pulso enter

      if ( siguienteCampo == 'fin' ) {      //fin de la secuencia, hace el submit

         return true          //sustituir por return true para hacer el submit

      } else {             //da el foco al siguiente campo

         eval('document.' + nombreForm + '.' + siguienteCampo + '.focus()')

         return false

      }

   }

}

document.onkeydown = TelcaPulsada;      //asigna el evento pulsacion tecla a la funcion

if (document.captureEvents)        //netscape es especial: requiere activar la captura del evento

  document.captureEvents(Event.KEYDOWN)

</script>

</head>

<body onload="document.miFormulario.campo1.focus();">

<p>ejemplo</p>

<form name="miFormulario" action="procesar.php" method="post">

1. <input type="text" name="campo1" size="12" onFocus="siguienteCampo ='campo2';"><br>

2. <input type="text" name="campo2" size="12" onFocus="siguienteCampo ='campo3';"><br>

3. <input type="text" name="campo3" size="12" onFocus="siguienteCampo ='campo4';"><br>

4. <input type="text" name="campo4" size="12" onFocus="siguienteCampo ='submit';"><br>

<input type="submit" name="submit" value="Enviar" onFocus="siguienteCampo ='fin';"></form>

</body>

</html>

No he capturado los datos pero hace la llamada a proceso.php.
Espero comentarios y sugerencias para mejorar esto.
Gracias y saludos.