jQuery метод .submit()

Определение и применение

jQuery метод .submit() привязывает JavaScript обработчик событий submit (обработчик отправки формы), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).submit() // метод используется без параметров

$( selector ).submit( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).submit( eventData, handler )

eventData - Anything

handler - Function ( Event eventObject )

Обращаю Ваше внимание, что метод .submit(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "submit", handler )

$( selector ).trigger( "submit" )

Добавлен в версии jQuery

Значения параметров

Пример старого кода

Пример использования jQuery метода .submit() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Trigger submit</button><br /><br />
<form>
  <input type="text" name="login" placeholder="Login" required="" />
  <input type="password" name="password" placeholder="Password" required="" />
  <input type="submit" /><span></span>
</form>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('form').submit()
    })

    $('form').submit(function (event) {
        event.preventDefault()
        $('span')
            .text('Form submitted')
            .css({
                display: 'inline',
                color: 'forestgreen',
            })
            .fadeOut(1000)
        $("input[type='text'], input[type='password']").val('')
    })
})

В этом примере с использованием jQuery метода .submit() мы при нажатии на элемент <button> (кнопка) вызываем событие "submit" на элементе <form>, которому задали, что при срабатывании события "submit" необходимо добавить с использованием jQuery метода .text() текстовое содержимое в элемент <span>, с использованием метода .css() установить этому элементу цвет текста светло-зеленый и строчное отображение, после этого с использованием эффекта .fadeOut() плавно изменить прозрачность элемента для его скрытия.

Обратите внимание, что эффект .fadeOut() устанавливает по завершению элементу свойство display в значение none (элемент не отображается), по этой причине мы каждый раз устанавливаем, что элемент <span> должен быть строковый, для его отображения при следующем срабатывании события "submit". Кроме того, мы указали метод .preventDefault() объекта Event, благодаря которому, действие события по умолчанию не будет срабатывать (отправка данных формы в адресной строке - метод GET).

Обратите внимание, что при использовании метода .submit() без параметров мы можем инициировать событие "submit" и с пустыми полями не смотря на наличие атрибутов required.