validacion - validar formulario javascript html5

Cómo saber qué botón de envío activó el evento onsubmit

Question

Cuando tiene más de un botón de envío en un formulario, ¿hay alguna forma de saber cuál onsubmit evento de onsubmit sin agregar código a los botones?

Editar: necesito hacer el control en el lado del cliente, es decir, con JavaScript.

Answer 1

¿Tener un detector de eventos en cada botón cuenta como agregar código? De lo contrario, no hay forma de ver qué botón desencadenó el evento de envío, a menos que desee bajar y ensuciar, calcular la posición del mouse durante el evento y compararlo con las posiciones de los botones.

De lo contrario, la mejor alternativa sería asignar un controlador de eventos para el evento de clic del botón y asignar el nombre de ese botón a una variable que puede verificar en el evento de envío del formulario.

Answer 2

El evento "enviar" no se activa con el botón, pero se activa con el "formulario". Una prueba rápida prueba esto:

  <form id="myform">
     <input id="email" type="text" value="1st Email" />
     <input id="action1" type="submit" value="Action 1" />
     <input id="action2" type="submit" value="Action 2" />
  </form>

  <script type="text/javascript">

     document.getElementById("myform").onsubmit = function(evt)  {
        var event = evt || window.event;
        alert(event.target.id); // myform
        alert(event.explicitOriginalTarget.id); // action2 (if action2 was clicked)
                                                // but only works in firefox!
     }

  </script>

Aunque en Firefox, puede usar la propiedad event.explicitOriginalTarget en el evento para obtener la entrada (enviar) en la que se hizo clic y provocar el lanzamiento del evento. (si tu quieres saber)

Entonces, las mejores opciones para ti son:

• Tener un valor diferente a tus botones de envío O
• Tenga esos botones como normales y haga clic en controladores a través de javascript.

Answer 3

Hay un par de formas en que puedo pensar.

Puede usar diferentes valores, y su javascript discreto puede ayudarlo.

Una discusión sobre este enfoque (usando diferentes valores para cada botón) está aquí:

http://www.chami.com/tips/internet/042599I.html

Tiendo a usar diferentes atributos de name para cada botón.

Un blog sobre eso está aquí: http://www.codetoad.com/javascript/multiple.asp

No sigo ninguno de estos, qué enfoque funcionará mejor dependerá de diferentes factores, como por ejemplo, si está manejando los botones de envío en javascript, o el servidor obtendrá el formulario, entonces tendrá que descubrir qué es lo que el usuario querido.

Personalmente, prefiero usar el enfoque ajax ahora, donde solo adjunto eventos a los botones después de que se cargue la página, usando javascript discreto y luego, dependiendo de la elección del usuario llamo a la función correcta, pero eso depende de si puede agregar un enlace de script a la página html.

ACTUALIZAR:

Para hacer esto con javascript, la forma más sencilla es adjuntar un evento al hacer clic en el botón, y luego mirar el nombre para decidir cómo manejarlo.

En realidad, la forma nunca debe enviarse al servidor, pero puede manejar todo en segundo plano al completar los parámetros (opciones) y enviarlos al servidor, y dejar que el usuario conozca los resultados.

Answer 4

Perdón por calentar este viejo hilo. La pregunta no había sido respondida aquí, pero antes solo se han presentado enfoques para soluciones prácticas.

Pero el objeto-evento contiene información sobre qué objeto lo ha iniciado. En un controlador b4submit (e) puede obtener el botón de enviar de esta manera:

function b4submit(e) {
    var but = e.originalEvent.explicitOriginalTarget;
    ...
}

Y es un objeto HTML con todos los atributos que le asignó, como nombre, id, valor, etc.

Me encontré con esto después de algunas depuraciones, y pensé que podría ser de mayor interés como una solución limpia para este problema.