Почему onsubmit не работает и если я вызываю функцию в консоли, она запускается?
У меня есть этот html:
<!doctype html>
<html class = "no-js" lang = "">
<head>
<meta charset = "utf-8">
<script src = "js/filename.js"></script>
</head>
<body>
<form id = "dp5" action = "" method = "POST" onsubmit = "Write_Text()">
<h3>5- Do you know any browsers?</h3>
<input id = "No" type = "radio" name = "dp5N" value = "false">
<label for = "No">No </label>
<input id = "yes" type = "radio" name = "dp5S" value = "true">
<label for = "yes">Yes</label>
<label for = "text">6 - Which?</label>
<input id = "text" type = "text" name = "dp5text" value = "">
</form>
<div id = "next">
<input id = "sub" type = "submit" name = "submit" value = "Next">
</div>
</body>
</html>
И это javascript "имя файла":
function Write_Text() {
let x = document.forms["dp5"]["No"].value;
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value = "";
} else {
document.getElementById("text").disabled =false;
}
}
Текстовое поле должно начинаться с отключения и быть доступным только тогда, когда пользователь выберет вариант «да». Функция вообще не работает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Как только вы исправите проблема, на которую указал Sreekanth MK, у вас появится новая проблема:
Ничто не препятствует действию по умолчанию отправки формы, которое заключается в отправке данных формы на URL-адрес action (в вашем случае это будет собственный URL-адрес страницы) и заменять текущей страницы с тем, что возвращает этот URL-адрес.
Вам нужно предотвратить действие по умолчанию. Минимальный способ:
<form id = "dp5" action = "" method = "POST" onsubmit = "Write_Text(); return false">
или
<form id = "dp5" action = "" method = "POST" onsubmit = "event.preventDefault(); Write_Text();">
... но я рекомендую вместо этого использовать современную обработку событий, удалив атрибут onsubmit и изменив JavaScript следующим образом:
function Write_Text(event) {
event.preventDefault();
let x = document.forms["dp5"]["No"].value;
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value = "";
} else {
document.getElementById("text").disabled =false;
}
}
document.getElementById("dp5").addEventListener("submit", Write_Text);
Обратите внимание, что вам нужно переместить тег script. Включение script в head - это антипаттерн. Скрипты идут в конце страницы, прямо перед закрывающим тегом </body>.
Боковое примечание: вы можете делать все, что захотите, в своем собственном коде, но FWIW, соглашение подавляющий в JavaScript заключается в том, что имена функций начинаются с буквы нижнего регистра и используют camelCase, кроме конструкторов, которые вместо этого использовали изначально ограниченный CamelCase. Так что writeText, а не Write_Text.
@AdathSkyderson - последний работает нормально, если ваш script находится в нужном месте (в конце body, непосредственно перед закрывающим тегом </body>).
У меня есть файл .js
@AdathSkyderson - неважно, это отдельный файл или встроенный скрипт. Важно расположение тега script относительно элементов, с которыми он работает. Пожалуйста, посмотрите конец ответа, а также страницу, на которую он ссылается.
@AdathSkyderson - Да. Я сказал это в ответе и связал с чем-то, что тоже вам об этом говорит.
Ваша кнопка отправки находится за пределами формы. Поместите его внутрь формы, и он будет работать.
<form id = "dp5" action = "" method = "POST" onsubmit = "Write_Text(); return false">
<h3>5- Do you know any browsers?</h3>
<input id = "No" type = "radio" name = "dp5N" value = "false">
<label for = "No">No </label>
<input id = "yes" type = "radio" name = "dp5S" value = "true">
<label for = "yes">Yes</label>
<label for = "text">6 - Which?</label>
<input id = "text" type = "text" name = "dp5text" value = "">
<div id = "next">
<input id = "sub" type = "submit" name = "submit" value = "Next">
</div>
</form>
Что ж, это не сработает так сильно, что выйдет из строя по-другому. :-) См. Мой (сейчас) ответ вики сообщества о том, почему и что с этим делать: stackoverflow.com/a/53187046/157247
Ах .. забыл о предотвращении поведения формы по умолчанию. Спасибо, что указали.
вам нужно использовать здесь объект события, чтобы предотвратить Default, потому что страница обновляется при отправке, а затем отправляет форму в вашей функции Write_Text ()
function Write_Text(event) {
//This will prevent Default Behaviour
event.preventDefault();
let x = document.forms["dp5"]["No"].value;
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value = "";
} else {
document.getElementById("text").disabled =false;
}
// then submit using JS
}
Прежде всего, проблему отправки можно легко решить, переместив кнопку в форме и предотвратив поведение по умолчанию.
Что касается проблемы отправки, я думаю, что ваш код можно было бы значительно улучшить, решив также следующую проблему: вы можете выбрать оба радио входа: заключить их в набор полей и использовать для них одно и то же имя; Почему? получить выбранный ответ проще, и его можно расширить до нескольких входов.
Ниже у вас есть рабочий пример того, что я сказал.
Ваше здоровье!
function Write_Text(event) {
event.preventDefault();
let x = document.querySelector('input[name = "ans"]:checked').value
console.info(x);
if (x === "false") {
document.getElementById("text").disabled=true;
document.getElementById("text").value = "";
} else {
document.getElementById("text").disabled =false;
}
}<!doctype html>
<html class = "no-js" lang = "">
<head>
<meta charset = "utf-8">
</head>
<body>
<h3>5- Do you know any browsers?</h3>
<form id = "dp5" action = "" method = "POST" onsubmit = "return Write_Text(event)">
<fieldset>
<input id = "No" type = "radio" name = "ans" value = "false">
<label for = "No">No </label>
<input id = "yes" type = "radio" name = "ans" value = "true">
<label for = "yes">Yes</label>
</fieldset>
<label for = "text">6 - Which?</label>
<input id = "text" type = "text" name = "dp5text" disabled value = "">
<div id = "next">
<input id = "sub" type = "submit" name = "submit" value = "Next">
</div>
</form>
</body>
</html>
Я выложу, ошибка