2009-02-12 9 views
8

¿Hay alguna forma de determinar qué elemento envió un formulario desde un controlador onsubmit? Tratando de escribir un controlador genérico que sepa en qué elemento se hizo clic. Por ejemplo, dada la siguiente forma:Determine qué elemento envió un formulario desde 0subtitulo

<form onsubmit="onSubmitHandler"> 
    <input type="submit" name="submit1" /> 
    <input type="submit" name="submit2" /> 
</form> 

¿Cómo puedo determinar el interior de la cual onSubmitHandler botón de enviar se hace clic? Intenté event.target/event.srcElement, pero eso da el formulario, no el botón de envío real.

Actualización: Estoy escribiendo un control genérico aquí, por lo que no tiene idea de lo que hay en el formulario. La solución debe funcionar sin conocer ni cambiar el html del formulario. Mi alternativa es recorrer el DOM para encontrar todos los botones que podrían causar un envío, pero me gustaría evitar eso.

+0

No hay garantía de que se haya hecho clic en ningún botón de envío. P.ej. Al enviar por JS (form.submit()) no se incluirá ningún valor de botones en la publicación –

+0

. Eso está bien también. Un poco más de antecedentes sobre el problema: esto es para un componente AJAX.Estoy cancelando el primer envío, haciendo lo mío, y luego tengo que volver a ejecutar el primer envío como sucedió, con todos los valores de formulario correctos. Por lo que he podido determinar, la única forma de hacerlo es recorrer el DOM y agregar manejadores de clics a todo lo que pueda causar un envío, y luego guardarlo. Supongamos que lo último que se hizo clic fue lo que envió el formulario, y luego llama a .click() cuando necesito volver a enviar el formulario. –

Respuesta

3

Una solución alternativa sería mover el gatillo caso de un evento presentará de forma, al evento onclick del elemento presentar, como tal:

<form name='form1'> 
    <input type="submit" name="submit1" onclick="onSubmitHandler"/> 
    <input type="submit" name="submit2" onclick="onSubmitHandler"/> 
</form> 

En la función de controlador puede determinar el elemento de sometimiento simplemente inspeccionando el nombre del objetivo del evento, y si necesita acceder a la información del formulario u otros elementos, puede obtenerlo del atributo "formulario" de elementos de envío.

+0

Aún necesitará un controlador onsubmit además de estos, ya que es posible que un evento de envío tenga lugar sin presionar un botón. La especificación deja semiabierta la pregunta de qué botón (si hay alguno) se activa al presionar Enter mientras se enfoca en un control sin botones , y los navegadores no son consistentes (aunque según mis experimentos, parece ser el primer botón en el formulario o ninguno en absoluto). – Stewart

1

No utilizaría un botón de envío estándar.

Realiza la función de presentar toma un argumento adicional que representa el elemento que lo haya presentado, y el botón tendría un onclick que envía this como el parámetro:

<input type="button" onclick="submitHandler(this)"> 
+0

Eso romperá innecesariamente el botón cuando JavaScript no esté disponible. – bobince

+0

El botón seguirá funcionando sin js, pero luego el único método para determinar el botón real presionado será uno del lado del servidor. Usted puede hacer eso dando un valor al botón, por cierto. – KooiInc

+0

Esto debe ser del lado del cliente. No me importa el servidor en este caso. También debe ser genérico: no tengo acceso a la página html. –

0

Mi repliegue está caminando el DOM a encuentre todos los botones que podrían causar un envío, pero me gustaría evitar eso.

... y agregarles oyentes de clics para almacenar el botón "último clic" que luego lee el oyente de envío, ¿no?

No puedo pensar de otra manera, lo siento.

+0

Sí, exactamente. Es frágil porque si algo más en la página agrega un botón de enviar después de que enganche, se romperá. Pero esa parece ser la mejor opción, desafortunadamente. –

+0

O debería decir solo la opción. –

0

Esta solución funciona en Firefox. No lo he comprobado en otros navegadores compatibles o IE.
No tengo mucha esperanza para IE, tendrías que investigarlo y publicar tus resultados.

<form id="myForm"> 
    <input type="submit"> 
    <input type="submit"> 
</form> 

_

document.getElementById('myForm').addEventListener('submit', function(e){ 
    e.preventDefault(); 
    e.explicitOriginalTarget.style.background = 'red'; 
}, false); 
+0

Eso es bastante dulce, pero parece un no en el navegador: http://stackoverflow.com/questions/179826/crossbrowser-equivalent-of-explicitoriginaltarget-event-parameter, y desafortunadamente esto necesita manejar los 4 navegadores grandes, para que uno esté fuera. –

0

eventos Click de burbujas, por lo que sólo podría añadir un detector de "onclick" a la forma en sí, que comprueba si la fuente de clic de destino es un botón de envío; si es así, almacene una referencia en algún lugar asociado con el formulario al que puede acceder desde su controlador onsubmit.

Si desea manejar formularios "Enter" correctamente también, escuche el evento "onkeypress" o "onkeydown" del formulario, verifique "Enter" y borre la información del botón de envío si el evento se dirige a ISN ' T un botón de enviar.

Cuestiones relacionadas