submit event — jQuery

Привяжите обработчик событий к событию «submit» или вызовите это событие на элементе.

Содержание:

.on( "submit" [, eventData ], handler )
- .on( "submit" [, eventData ], handler )
.trigger( "submit" )
- .trigger( "submit" )

.on( "submit" [, eventData ], handler )Возвращает: jQuery

Описание: Привяжите обработчик событий к событию «submit».

версия добавлена: 1.7.on( "submit" [, eventData ], handler )
- "submit"
  
  Тип: строка
  
  Строка "submit".
- eventData
  
  Тип: Любой тип
  
  Объект, содержащий данные, которые будут переданы обработчику событий.
- handler
  
  Тип: Функция( Событие eventObject )
  
  Функция, которая выполняется каждый раз при срабатывании события.

Эта страница описывает событие submit. Для устаревшего метода .submit(), см. .submit().

Событие submit отправляется элементу, когда пользователь пытается отправить форму. Оно может быть привязано только к элементам <form>. Формы могут быть отправлены либо щелчком по явной <input type="submit">, <input type="image">, или <button type="submit">, либо нажатием клавиши Enter, когда фокус находится на определенных элементах формы.

В зависимости от браузера, нажатие клавиши Enter может вызвать отправку формы только в том случае, если форма содержит ровно одно текстовое поле или только при наличии кнопки отправки. Интерфейс не должен полагаться на определенное поведение для этой клавиши, если проблема не навязана наблюдением за событием keypress для нажатия клавиши Enter.

Например, рассмотрим HTML:

<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>

Обработчик событий можно привязать к форме:

$( "#target" ).on( "submit", function( event ) {
  alert( "Handler for `submit` called." );
  event.preventDefault();
});

Теперь, когда форма отправляется, выводится сообщение. Это происходит до фактической отправки, поэтому мы можем отменить действие отправки, вызвав .preventDefault() на объекте события или вернув false из нашего обработчика. Мы можем вызвать событие вручную, когда нажимается другой элемент:

$( "#other" ).on( "click", function() {
  $( "#target" ).trigger( "submit" );
} );

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

Событие JavaScript submit не распространяется в Internet Explorer. Однако скрипты, которые полагаются на делегирование событий с событием submit , будут работать последовательно во всех браузерах начиная с jQuery 1.4, в котором поведение события было стандартизировано.

Дополнительные замечания:

Формы и их дочерние элементы не должны использовать имена или идентификаторы ввода, которые конфликтуют с свойствами формы, такими как submit, length, или method. Конфликты имен могут привести к непонятным ошибкам. Полный список правил и проверку вашей разметки на эти проблемы можно найти на сайте DOMLint.

Примеры:

Если вы хотите предотвратить отправку форм, пока не установлена переменная флага, попробуйте:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    margin: 0;
    color: blue;
  }
  div,p {
    margin-left: 10px;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Type 'correct' to validate.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text">
    <input type="submit">
  </div>
</form>
<span></span>
 
<script>
$( "form" ).on( "submit", function( event ) {
  if ( $( "input" ).first().val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
 
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
} );
</script>
 
</body>
</html>

Демо:

Если вы хотите предотвратить отправку форм, пока не установлена переменная флага, попробуйте:

$( "form" ).on( "submit", function() {
  return this.some_flag_variable;
} );

Чтобы вызвать событие submit для первой формы на странице, попробуйте:

$( "form" ).first().trigger( "submit" );

.trigger( "submit" )Возвращает: jQuery

Описание: Вызвать событие "submit" на элементе.

версия добавлена: 1.0.trigger( "submit" )
- "submit"
  
  Тип: строка
  
  Строка "submit".

См. описание для .on( "submit", ... ).

событие submit