Я создал простую форму входа и хочу запустить js-функцию после отправки формы. Однако, когда я нажимаю "Отправить", ничего не происходит. HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CARD GAME</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<script src="index.js"></script>
<form>
    Username: <input type="text" id="htmlUsername"><br><br>
    Password: <input type="password" id="htmlPassword"><br>
    <input type="submit" onclick="login()">
</form>
</body>
</html>

JS:

function login(){
    console.log("here")
}
0
bmynard 19 Янв 2021 в 15:45

4 ответа

Лучший ответ

Окно браузера перезагружается при нажатии кнопки отправки? Если да, то ваша форма действительно отправлена.

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

HTML:

<form>
    Username: <input type="text" id="htmlUsername"><br><br>
    Password: <input type="password" id="htmlPassword"><br>
    <input type="submit" onclick="login(event)">
</form>

JS:

function login(event){
    event.preventDefault();
    console.log("here")
}

Предлагаемые улучшения:

Альтернативное решение

Другой способ - сохранить журналы. На вкладке «Netowork» инструментов разработчика браузера установите флажок «Сохранить журналы». Это сохранит вывод оператора console.log, даже если окно браузера будет перезагружено при отправке формы.

Чтобы узнать, как включить эту опцию в инструментах разработчика, посетите:

Как по умолчанию включить «Сохранить журнал» на вкладке «Сеть» в инструментах разработчика Chrome?

1
Yousaf 19 Янв 2021 в 13:20

Сейчас я вижу здесь две вещи.

  1. Поместите свой код, который включает файл js, внизу вашего HTML, чуть выше закрывающего тега body. <script src="index.js"></script>
  2. Проверьте, называется ли ваш файл JavaScript index.js
0
browinski 19 Янв 2021 в 12:49

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

<form onsubmit="login();">
...

Но я не советую объявлять события js внутри тегов html. Поскольку это приведет к плохим последствиям.

Попытайся:

let form_submit = document.querySelector('form');

form_submit.onsubmit = function() {
    console.log("here");
}

И удалите onclick="login()" из input submit. Вот:

<input type="submit" onclick="login()">
0
s.kuznetsov 19 Янв 2021 в 12:54
  • Заменить <input type="submit" onclick="login()"> на <button type="button" onclick="login()">Login</button>
  • Добавьте идентификатор в форму: <form id="myform"> ...

В вашем JS сделайте:

function login(){
    alert("here");
    document.querySelector("#myform").submit();
}
-1
MiK 19 Янв 2021 в 12:52
65791789