Событие onsubmit не работает, если в форме введено имя подтверждения или идентификатор.
если я добавлю ниже входные данные в форму, событие onsubmit не работает
<input type = "checkbox" name = "confirm" id = "confirm">
<form action = "/" method = "post" onsubmit = "return confirm('Are you sure ?')">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirm" id = "confirm">
<button type = "submit">submit</button>
</form>когда я удалил ввод с подтверждением имени, событие onsubmit сработало!!! это очень странно и необычно.
🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).
Избегайте использования зарезервированных слов или встроенных имен функций для имен или идентификаторов элементов формы. Эта проблема возникает из-за того, что подтверждение — это встроенная функция JS, которая отображает диалоговое окно с кнопками «ОК» и «Отмена». Когда входные данные формы имеют имя или идентификатор «подтверждение», они конфликтуют с этой функцией, что приводит к сбою события onsubmit.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv = "X-UA-Compatible" content = "ie=edge">
<title>Document</title>
</head>
<body>
<form action = "/" method = "post" onsubmit = "return confirm('Are you sure ?')">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirmCheck" id = "confirmCheck">
<button type = "submit">submit</button>
</form>
</body>
</html>
Диалоговое окно подтверждения свойства onsubmit формы, вероятно, мешает процессу отправки формы, что и вызывает проблему, которую вы видите. В частности, отправка формы будет остановлена, если пользователь не подтвердит диалог. Это может быть проблематично, если вы ожидаете, что определенные действия будут выполняться независимо от одобрения пользователя.
Вот краткое описание того, как вы можете справиться с этим лучше:
Обеспечьте отправку формы на основе флажка: вы должны проверить состояние флажка в функции Javascript, если вы хотите, чтобы форма отправлялась только тогда, когда пользователь подтверждает диалог и флажок установлен.
Проверка JavaScript: измените функцию onsubmit, чтобы она сначала запрашивала подтверждение после определения того, установлен ли флажок.
Это самая последняя версия вашей формы:
function validateForm() {
var checkbox = document.getElementById("confirm");
if (!checkbox.checked) {
alert("You must agree to the terms.");
return false;
}
return confirm("Are you sure?");
}<form action = "/" method = "post" onsubmit = "return validateForm()">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirm" id = "confirm"> I agree
<button type = "submit">submit</button>
</form>В этом коде:
validateForm проверяет, установлен ли флажок подтверждения идентификатора.
поставил галочку.Это гарантирует, что отправка формы продолжится только в том случае, если пользователь одобрит действие и будет установлен флажок.
Ваша проблема в том, что область действия обработчиков атрибутов onXYZ (обработчиков DOM уровня 0) «дополняется» таким образом, что идентификаторы формы добавляются в область действия вашего скрипта, указанную в атрибуте, и поэтому confirm в конечном итоге ссылается на ваш элемент ввода, а не метод confirm браузера (window.confirm).
Для этого браузер создает специальную функцию и помещает содержимое вашего атрибута в эту функцию (return confirm('Are you sure ?')), которая выполняется при возникновении события (в вашем случае onsubmit), однако большинство браузеров меняют цепочку областей действия. этой функции, чтобы она была заполнена свойствами document, form и текущего элемента. Итак, ваш код onsubmit заключен в функцию, которая выглядит примерно так (см. ссылку ):
function onsubmit(event) {
with (document) {
with (this.form) { // in your case `undefined` (not applicable in this scenario, but good to know for when you add `onXYZ` attributes to input elements inside a form for example)
with (this) { // in your case, `this` is the form element (and has properties like the `confirm` and `name` inputs)
return confirm('Are you sure ?') // contents of your onsubmit attribute is inserted into here (here `confirm` refers to the input element, not the browsers confirm method due to the with-block above)
}
}
}
}
Поскольку область вашего метода onsubmit изменена и теперь имеет привязки к свойствам вашей формы, доступ к confirm (или name) обеспечивает доступ к элементам ввода DOM, а не к глобальному методу confirm. Самый простой способ исправить это — получить доступ к window.confirm или изменить форму name и id, чтобы она не конфликтовала с глобальным:
<form action = "/" method = "post" onsubmit = "return window.confirm('Are you sure ?')">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirm" id = "confirm">
<button type = "submit">submit</button>
</form>Но более подходящим решением было бы избегать использования обработчиков событий атрибутов DOM уровня 0 и вместо этого использовать addEventListener() с e.preventDefault(), чтобы остановить отправку формы.
const form = document.getElementById("form");
form.addEventListener("submit", event => {
if (!confirm('Are you sure ?')) {
event.preventDefault();
}
});<form action = "/" method = "post" id = "form">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirm" id = "confirm">
<button type = "submit">submit</button>
</form>Проблема возникает из-за того, что функция подтверждения() в событии onsubmit переопределяется элементом ввода подтверждения. Если у вас есть элемент с идентификатором, он создает глобальную переменную с этим именем, что может мешать работе встроенных функций JavaScript.
Чтобы это исправить, у вас есть несколько вариантов:
<!--
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "style.css" />
<title>Browser</title>
</head>
<body>
<form action = "/" method = "post" onsubmit = "return confirm('Are you sure ?')">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "agreement" id = "agreement">
<button type = "submit">submit</button>
</form>
</body>
</html><!--
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "style.css" />
<title>Browser</title>
</head>
<body>
<form action = "/" method = "post" onsubmit = "return confirmSubmission()">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirm" id = "confirm">
<button type = "submit">submit</button>
</form>
<script>
function confirmSubmission() {
return confirm('Are you sure ?');
}
</script>
</body>
</html><!--
Online HTML, CSS and JavaScript editor to run code online.
-->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<link rel = "stylesheet" href = "style.css" />
<title>Browser</title>
</head>
<body>
<form action = "/" method = "post" id = "myForm">
<input type = "text" name = "name">
<br>
<input type = "checkbox" name = "confirm" id = "confirm">
<button type = "submit">submit</button>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(event) {
if (!confirm('Are you sure ?')) {
event.preventDefault();
}
});
</script>
</body>
</html>Любое из этих решений должно решить проблему и обеспечить правильную работу подтверждения отправки формы.