Должен ли jQuery's $ (form) .submit (); не вызывать onSubmit внутри тега формы?

Question

У меня есть следующее:

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

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

Когда я нажимаю кнопку «Отмена», отправка из тега формы не запускается.

Эта строка вместо этого успешно отправляет форму: $(button.form).submit();, но пропускает alert('here'); внутри отправки в теге формы.

Это правильно или я что-то не так делаю?

Кстати, в этом случае я хочу эту функциональность, но мне просто интересно, не столкнусь ли я с проблемой в браузере, когда инициируется отправка.

Answer 1

Извините, неправильно понял ваш вопрос.

Согласно Javascript - захват onsubmit при вызове form.submit () :

Меня недавно спросили: «Почему событие form.onsubmit срабатывает, когда я отправить мою форму, используя JavaScript? "

Ответ: современные браузеры не придерживаться этой части HTML Спецификация. Событие только зажигает когда он активирован пользователем - и не срабатывает при активации код.

(выделение добавлено).

Примечание:"активируется пользователем" также включает нажатие кнопок отправки (возможно, включая поведение отправки по умолчанию с помощью клавиши ввода, но я не пробовал этого). Я полагаю, что он не сработает, если вы (с кодом) нажмете кнопку отправки.

Answer 2

Этот обходной путь исправит проблему, обнаруженную @ 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);
}

Будет работать во всех современных браузерах.
Будет работать с вкладками / порожденными дочерними окнами (да, даже в IE <9). <Br /> И в ванили!

Просто передайте ему ссылку DOM на элемент формы, и он удостоверится, что все подключенные слушатели, onsubmit, и (если это не будет предотвращено к тому времени), наконец, отправит форму.

Answer 3

Я полагаю, что в некоторых случаях разумно хотеть такого поведения, но я бы сказал, что код, не вызывающий отправку формы, должен (всегда) быть поведением по умолчанию. Предположим, вы хотите отследить отправку формы с помощью

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

, а затем выполнить некоторую проверку ввода. Если код может вызвать обработчики отправки, вы никогда не сможете включить

$("form").submit()

внутри этого обработчика, потому что это приведет к бесконечному циклу (будет вызываться один и тот же обработчик, предотвращающий отправку, проверку и повторную отправку). Вы должны иметь возможность вручную отправить форму внутри обработчика отправки, не вызывая тот же обработчик.

Я понимаю, что это НЕ ОТВЕЧАЕТ на вопрос напрямую, но на этой странице есть много других ответов о том, как эту функциональность можно взломать, и я чувствовал, что на это нужно указать (и это слишком долго для комментария ).

Answer 4

Мое простое решение:

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

Это работа для меня.

Answer 5

триггер ('submit') не работает. Метод onSubmit не запускается. у меня работает следующий код, вызовите метод onSubmit при использовании этого кода:

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

Answer 6

вместо

$("form").submit()

попробуйте это

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

Answer 7

Попробуйте вызвать событие () в вашей функции:

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

Answer 8

Самое простое решение для обхода этой проблемы - создать «временный» ввод с типом отправки и щелчком триггера:

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

Answer 9

Я нашел этот вопрос, сервал много лет назад.

недавно я пытался "переписать" метод отправки. ниже мой код

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>

Это произошло в IE, но не удалось в других браузерах по той же причине, что и "cletus"