Dovrebbe $ (form) .submit () di jQuery; non attivare onSubmit all'interno del tag del modulo?

Question

Ho il seguente:

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

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

Quando faccio clic sul " Annulla " pulsante, l'onsubmit dal tag form non viene attivato.

Questa riga invece invia correttamente il modulo: $(button.form).submit(); ma salta alert('here'); all'interno di onsubmit nel tag del modulo.

È corretto o sto facendo qualcosa di sbagliato?

A proposito, in questo caso, desidero questa funzionalità, ma mi chiedo solo se avrò un problema in un browser in cui viene attivato onsubmit.

Answer 1

Siamo spiacenti, ho frainteso la tua domanda.

Secondo Javascript - cattura onsubmit quando chiama form.submit () :

  

Di recente mi è stato chiesto: " Perché non il   L'evento form.onsubmit viene generato quando I   invia il mio modulo usando javascript? "

     

La risposta: i browser attuali no   aderire a questa parte dell'html   specifica. L'evento si attiva solo   quando è attivato da un utente - e   non si attiva quando attivato da   codice.

(enfasi aggiunta).

Nota: " attivato da un utente " include anche premere i pulsanti di invio (probabilmente includendo il comportamento di invio predefinito dal tasto Invio ma non l'ho provato). Né, credo, si attiva se (con il codice) fai clic su un pulsante di invio.

Answer 2

Questo aggirare risolverà il problema riscontrato da @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);
}

Funzionerà su tutti i browser moderni.
Funzionerà su schede / finestre figlio generate (sì, anche in IE < 9).
Ed è in vaniglia!

Basta passargli un riferimento DOM a un elemento del modulo e si assicurerà che tutti i listener collegati, l'onsubmit e (se non è stato impedito da allora), infine, invia il modulo.

Answer 3

La mia soluzione semplice:

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

È lavoro per me.

Answer 4

Suppongo che sia ragionevole volere questo comportamento in alcuni casi, ma direi che il codice che non attiva l'invio di un modulo dovrebbe (sempre) essere il comportamento predefinito. Supponiamo di voler ricevere l'invio di un modulo con

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

, quindi esegui una convalida sull'input. Se il codice potesse attivare gestori di invio, non potresti mai includere

$("form").submit()

all'interno di questo gestore perché si tradurrebbe in un ciclo infinito (il gestore SAME sarebbe chiamato, impedire l'invio, convalidare e reinoltrare). Devi essere in grado di inviare manualmente un modulo all'interno di un gestore di invio senza attivare lo stesso gestore.

Mi rendo conto che questo non RISPONDE direttamente alla domanda, ma ci sono molte altre risposte in questa pagina su come questa funzionalità può essere compromessa, e ho sentito che questo doveva essere sottolineato (ed è troppo lungo per un commento ).

Answer 5

trigger ('submit') non funziona. Perché il metodo onSubmit non viene attivato. il seguente codice funziona per me, chiama il metodo onSubmit quando usi questo codice:

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

Answer 6

Prova ad attivare l'evento () nella tua funzione:

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

Answer 7

Invece di

$("form").submit()

prova questo

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

Answer 8

Ho trovato questa domanda utile anni fa.

recentemente ho provato a " riscrivere " il metodo di invio. sotto è il mio codice

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 ha fatto in IE, ma non è riuscito in altri browser per lo stesso motivo di " cletus "

Answer 9

La soluzione più semplice per aggirare il problema è creare input "temporanei" con il tipo submit e trigger click:

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