Acción del botón "submit" por defecto

freddy644 · #1 (**permalink**) 01/11/2014, 11:15

Saludos

He hecho un formulario y tengo el inconveniente que cada vez que se ingresa un dato en un cuadro de texto y se hace <enter>, se activa la acción del botón <submit> y no me permite seguir ingresando los datos en los demás controles.

He tratado de deshabilitar el botón <submit> pero al final cuando lo habilito se activa automaticamente la acción de dicho botón...

que puedo hacer para que eso no pase

Alexis88 · #2 (**permalink**) 01/11/2014, 15:17

Toma a todos los <input type = "text"> del formulario y asigna una función por cada vez que se pulse una tecla en cualquiera de dichos elementos. Si el código ASCII de la tecla pulsada es igual a 13 que corresponde al de la tecla ENTER, cancelas el evento con el método preventDefault.

Código Javascript:

Ver originalvar inputs = document.querySelectorAll("form [type=text]");
[].forEach.call(inputs, function(input){
    input.addEventListener("keypress", function(event){
        var code = event.keyCode || event.which;
        if (code == 13) event.preventDefault(); //Cancelo el envío
    });
});

En lugar de la estructura forEach, puedes usar un bucle for tradicional, o puedes implementar el algoritmo que se explica aquí para que no tengas problemas de compatibilidad con navegadores antiguos.

Saludos

IsaBelM · #3 (**permalink**) 02/11/2014, 07:55

no sólo puede cancelar el evento, sino que también puedes hacer que haya tabulación

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var fnc = (function() {

function Evento(elemento, nomevento, fnc) {

if (elemento.addEventListener) {

elemento.addEventListener(nomevento, fnc, false);

} else if (elemento.attachEvent) {

var foo = function() {fnc.call(elemento, window.event);}
elemento.attachEvent('on' + nomevento, foo);
elemento[fnc.toString() + nomevento] = foo;
}
}

function asig() {

var controles = document.querySelectorAll("form input");

for (var i = 0; i < controles.length; i++)

Evento(controles[i], 'keypress', function(event){tab(event, this)});
}

function tab(evt, control) {

var keyCode = evt.keyCode || evt.charCode;

if (keyCode != 13) return;

frm = control.form;

for (var i = 0; i < frm.elements.length; i++)

if (frm.elements[i] == control) {

if (i == frm.elements.length-1) i =-1;
break
}

frm.elements[i+1].focus();

if (evt.preventDefault) {

evt.preventDefault();

} else {

evt.returnValue = false;
}
}

Evento(window, 'load', asig);

})();
</script>
</head>
<body>

<form>
<input type="text" /><br />
<input type="text" value="2" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="radio" />
</form>

</body>
</html>

freddy644 · #4 (**permalink**) 05/11/2014, 08:58

Cita:

Iniciado por Alexis88

Toma a todos los <input type = "text"> del formulario y asigna una función por cada vez que se pulse una tecla en cualquiera de dichos elementos. Si el código ASCII de la tecla pulsada es igual a 13 que corresponde al de la tecla ENTER, cancelas el evento con el método [URL="https://developer.mozilla.org/es/docs/DOM/event.preventDefault"][inline]preventDefault[/inline][/URL].

Código Javascript:

Ver originalvar inputs = document.querySelectorAll("form [type=text]");
[].forEach.call(inputs, function(input){
    input.addEventListener("keypress", function(event){
        var code = event.keyCode || event.which;
        if (code == 13) event.preventDefault(); //Cancelo el envío
    });
});

En lugar de la estructura [URL="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach"][inline]forEach[/inline][/URL], puedes usar un bucle for tradicional, o puedes implementar el algoritmo que se explica [URL="https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach#Compatibility"]aquí[/URL] para que no tengas problemas de compatibilidad con navegadores antiguos.

Saludos

Yo soy primerizo en el desarrollo web y no tengo conocimientos de javascript, sin embargo he podido evitar la activación del botón enviar mediante la desactivación del mismo, pero al final me toca activarlo y pasa que al realizar el último ingreso se activa el botón enviar...

Ese código que publicaste sirve para evitar que se ejecute la función del botón enviar???

Alexis88 · #5 (**permalink**) 05/11/2014, 10:53

Cita:

Iniciado por freddy644

Ese código que publicaste sirve para evitar que se ejecute la función del botón enviar???

No. Como te expliqué en mi respuesta, solo evita el envío de los datos del formulario cuando se pulsa la tecla ENTER en el momento en el que alguna caja de texto tiene el enfoque. Lo que no me queda claro es por qué quieres evitar que se ejecute el envío de los datos cuando se pulse el botón 'Enviar' si ese es su fin.

Saludos

freddy644 · #6 (**permalink**) 05/11/2014, 12:26

Cita:

Iniciado por Alexis88

No. Como te expliqué en mi respuesta, solo evita el envío de los datos del formulario cuando se pulsa la tecla ENTER en el momento en el que alguna caja de texto tiene el enfoque. Lo que no me queda claro es por qué quieres evitar que se ejecute el envío de los datos cuando se pulse el botón 'Enviar' si ese es su fin.

Saludos

Claro que necesito que se ejecute la función enviar cuando lo requiera, el problema es que se ejecuta cada vez que doy enter al ingresar información en un cuadro de texto, solo funciona con tab pero cuando ingreso un dato y doy enter se ejecuta la función de enviar...

Alexis88 · #7 (**permalink**) 05/11/2014, 12:36

Pero para eso te mostré y expliqué el código que puedes ver en mi primera respuesta, ¿o es que ni siquiera lo has adecuado y probado?

Tampoco esperes a que hagamos todo por ti, solo podemos ayudarte, el resto va por tu cuenta.

Saludos

freddy644 · #8 (**permalink**) 05/11/2014, 13:31

Cita:

Iniciado por Alexis88

Pero para eso te mostré y expliqué el código que puedes ver en mi primera respuesta, ¿o es que ni siquiera lo has adecuado y probado?

Tampoco esperes a que hagamos todo por ti, solo podemos ayudarte, el resto va por tu cuenta.

Saludos

disculpas, no es mi intensión, no se nada acerca de programar web, de buenas a primeras nos mandan esto en el instituto a hacer como trabajo, y no se donde poner ese codigo, igual agradezco la ayuda, voy a seguir buscando por otro lado...

Alexis88 · #9 (**permalink**) 05/11/2014, 13:57

El detalle está en que, cuando te dejan una asignación, debes de investigar, no buscar las soluciones hechas, de otro modo, nunca aprenderías y no tendría sentido el que acudas al instituto. Tanto IsaBelM como yo te mostramos respuestas que satisfacen a tu petición, además, me di el tiempo de explicarte lo que hace el código que mostré. Si no entiendes algo, pregunta, pero si de plano no sabes por dónde empezar, deberías de preguntarle a tu maestro o leer libros de programación.

Saludos