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

StackOverflow https://stackoverflow.com/questions/645555

  •  22-07-2019
  •  | 
  •  

Вопрос

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

<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'); внутри onsubmit в теге формы.

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

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

Это было полезно?

Решение

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

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

  

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

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

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

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

Другие советы

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

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

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

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

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

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

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

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

$("form").submit()

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

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

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

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

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

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

Вместо того, чтобы

$("form").submit()

попробуй это

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

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

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

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, но не сработало в других браузерах по той же причине, что и "клетус".

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

var submitInput = $("<input type='submit' />");
$("#aspnetForm").append(submitInput);
submitInput.trigger("click");
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top