2009-03-14 73 views
36

Tengo el siguiente:

<script type="text/javascript"> 
function CancelFormButton(button) { 
    $(button.form).submit(); 
} 
</script> 

<form onsubmit="alert('here');"> 
<input type="button" value="Cancel" onClick="CancelFormButton(this);" /> 
</form> 

Al hacer clic en el botón "Cancelar", el onsubmit de la etiqueta de formulario no se activa.

Esta línea envía el formulario correctamente: $(button.form).submit(); pero omite el alert('here'); dentro de la publicación en la etiqueta del formulario.

¿Es correcto o estoy haciendo algo mal?

Por cierto, en este caso, quiero esta funcionalidad, pero me pregunto si me voy a encontrar con un problema en un navegador donde se activa el onsubmit.

Respuesta

46

Lo siento, no entendí tu pregunta.

Según Javascript - capturing onsubmit when calling form.submit():

Recientemente me pregunté: "¿Por qué no el evento form.onsubmit despedido cuando presento mi formulario utilizando javascript"

La respuesta: los navegadores actuales no se adhieren a esta parte de la especificación HTML . El evento solo se dispara cuando es activado por un usuario - y no se dispara cuando se activa con el código .

(énfasis añadido).

Nota: "activado por un usuario" también incluye presionar los botones de envío (probablemente incluido el comportamiento de envío predeterminado de la tecla Intro, pero no lo he intentado). Tampoco, creo, se activa si usted (con código) hace clic en un botón de enviar.

+0

Esto todavía no desencadena la onsubmit de la forma ... es esto normal? –

+0

Sí, this.form es válido y correcto y funciona en todos los navegadores. http://stackoverflow.com/questions/418076/is-there-a-better-jquery-solution-to-this-form-submit Además, no respondió la pregunta. –

+0

Además, confundido por "específicamente existe un atributo de formulario conocido en el botón". –

1

pretenden desencadenar() evento en su función:

$("form").trigger('submit'); // and then... do submit() 
+0

No, tampoco activa el envío. –

+0

nice, Aprendí algo nuevo también :-) – Sergei

+0

Vote vote :) Sí, algo útil y algo molesto. –

0

me encontré con esta pregunta hace años serval.

Recientemente traté de "reescribir" el método de envío. a continuación es mi código

window.onload= function(){ 
for(var i= 0;i<document.forms.length;i++){ 
    (function (p){ 
     var form= document.forms[i]; 
     var originFn= form.submit; 
     form.submit=function(){ 
      //do something you like 
      alert("submitting "+form.id+" using submit method !"); 
      originFn(); 
     } 
     form.onsubmit= function(){ 
      alert("submitting "+form.id+" with onsubmit event !"); 
     } 
    })(i); 


} 

}

<form method="get" action="" id="form1"> 
<input type="submit" value="提交form1" /> 
<input type="button" name="" id="" value="button模拟提交1" onclick="document.forms[0].submit();" /></form> 

Ya lo hizo en IE, pero no en otros navegadores por la misma razón como "Cletus"

4

Mi solución simple:

$("form").children('input[type="submit"]').click(); 

Es trabajo para mí.

+0

Eso es asumiendo que tiene el botón Enviar – artemave

+1

Si tiene un botón de enviar, entonces el envío será disparado. Creo que el problema es cuando escriba = button onclick = ... –

+0

esta es una solución fácil de tener un botón type = sumbit – Bamboo

0

La solución más fácil de solucionar este es la creación de 'temporal' de entrada con el tipo de presentar y el gatillo clic:

var submitInput = $("<input type='submit' />"); 
$("#aspnetForm").append(submitInput); 
submitInput.trigger("click"); 
6

supongo que es razonable querer este comportamiento en algunos casos, pero yo diría que el código no desencadenar un envío de formulario debe ser (siempre) el comportamiento predeterminado. Supongamos que se desea capturar la presentación de un formulario con

$("form").submit(function(e){ 
    e.preventDefault(); 
}); 

y luego hacer una validación de la entrada. Si el código podría desencadenar presentar manipuladores, que nunca podría incluir

$("form").submit() 

dentro de este controlador, ya que daría lugar a un bucle infinito (el mismo controlador sería llamado, prevenir la presentación, validar y volver a presentar). Debe poder enviar manualmente un formulario dentro de un controlador de envío sin activar el mismo controlador.

Me doy cuenta de que esto NO RESPONDE la pregunta directamente, pero hay muchas otras respuestas en esta página sobre cómo se puede piratear esta funcionalidad, y sentí que era necesario señalarla (y es demasiado larga para una comentario).

22

This solucionará el problema encontrado por @Cletus.

function submitForm(form) { 
    //get the form element's document to create the input control with 
    //(this way will work across windows in IE8) 
    var button = form.ownerDocument.createElement('input'); 
    //make sure it can't be seen/disrupts layout (even momentarily) 
    button.style.display = 'none'; 
    //make it such that it will invoke submit if clicked 
    button.type = 'submit'; 
    //append it and click it 
    form.appendChild(button).click(); 
    //if it was prevented, make sure we don't get a build up of buttons 
    form.removeChild(button); 
} 

Funcionará en todos los navegadores modernos.
Funcionará a través de pestañas/ventanas hijas generadas (sí, incluso en IE < 9).
¡Y está en vainilla!

Solo tiene que pasar una referencia DOM a un elemento de formulario y se asegurará de que todos los oyentes conectados, el envío y, si no se lo impidió por el momento, finalmente, envíe el formulario.

+2

Esta es una buena solución. –

+0

Simplemente ponga esto en la carpeta de scripts de la aplicación web MVC. ¡¡Funciona genial !! Utilizo esto cuando tengo botones de diálogo de interfaz de usuario de JQuery que intentan enviar formularios que se muestran desde el IFRAME secundario. – bkwdesign

+0

Probé con diferentes soluciones, solo esta funciona en todos los navegadores, activa eventos de envío y verifica la validez de formularios (muestra mensajes de error) http://dabblet.com/gist/97a733d9c787dcf99cff – mems

0

En lugar de

$("form").submit()

probar esto

$("<input type='submit' id='btn_tmpSubmit'/>").css('display','none').appendTo('form'); 
$("#btn_tmpSubmit").click(); 
1

gatillo ('enviar') no work.beacuse onSubmit método no ser despedido. el siguiente código funciona para mí, llamar onSubmit método cuando se utiliza este código:

$("form").find(':submit').click();

Cuestiones relacionadas