Debe jQuery's $ (form) .submit (); No se activa onSubmit dentro de la etiqueta del formulario?

Question

Tengo lo 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>

Cuando hago clic en " Cancelar " botón, el envío de la etiqueta de formulario no se activa.

En su lugar, esta línea envía el formulario con éxito: $(button.form).submit(); pero omite el alert('here'); dentro del envío 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 envío.

Answer 1

Lo siento, entendí mal tu pregunta.

De acuerdo con Javascript: captura de onsubmit al llamar a form.submit () :

  

Recientemente me preguntaron: " ¿Por qué el   el evento form.onsubmit se activa cuando   enviar mi formulario usando javascript? "

     

La respuesta: los navegadores actuales no   adherirse a esta parte del html   especificación. El evento solo se dispara   cuando es activado por un usuario: y   no dispara cuando es activado por   código.

(énfasis agregado).

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

Answer 2

Esta solución 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á en pestañas / ventanas secundarias generadas (sí, incluso en IE < 9).
¡Y está en vainilla!

Simplemente pásele una referencia DOM a un elemento de formulario y se asegurará de que todos los oyentes adjuntos, el subenvío y (si no está impedido para entonces) finalmente, envíe el formulario.

Answer 3

Mi solución simple:

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

Es un trabajo para mí.

Answer 4

Supongo que es razonable querer este comportamiento en algunos casos, pero diría que el código que no desencadena el envío de un formulario debería (siempre) ser el comportamiento predeterminado. Supongamos que desea ver el envío de un formulario con

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

y luego realice alguna validación en la entrada. Si el código pudiera activar los controladores de envío, nunca podría incluir

$("form").submit()

dentro de este controlador porque daría como resultado un bucle infinito (se llamaría al mismo controlador, evitaría el envío, se validaría y se volvería a enviar). 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 hackear esta funcionalidad, y sentí que era necesario señalarlo (y es demasiado largo para un comentario ).

Answer 5

El disparador

('submit') no funciona porque el método onSubmit no se activa. el siguiente código funciona para mí, llame al método onSubmit cuando use este código:

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

Answer 6

Intenta activar el evento () en tu función:

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

Answer 7

En lugar de

$("form").submit()

prueba esto

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

Answer 8

Encontré esta pregunta hace varios años.

recientemente intenté " reescribir " El método de envío. a continuación está 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>

Lo hizo en IE, pero falló en otros navegadores por la misma razón que " cletus "

Answer 9

La solución más fácil para solucionar esto es crear una entrada 'temporal' con el tipo submit y activar el clic:

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