表单提交输入未运行我的 onClick 功能答案

【问题标题】：Form submit input not running my onClick function表单提交输入未运行我的 onClick 功能
【发布时间】：2021-04-23 18:28:52
【问题描述】：

我创建了一个简单的登录表单，并希望在表单提交后运行一个 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")
}

【问题讨论】：

你为什么要给输入字段 type="submit" 而不是使用按钮。给 form 动作。动作=“发布”

标签： javascript html forms input onclick

【解决方案1】：

当您按下提交按钮时，浏览器窗口是否会重新加载？如果是，那么您的表单确实已提交。

您看不到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")
}

建议的改进：

不要在button 元素上使用onclick 属性，而是使用.addEventListener() 在按钮上添加点击事件监听器。
将script 元素移动到关闭body 标记之前。

替代解决方案

另一种方法是保存日志。在浏览器开发者工具的“网络”选项卡中，勾选“保留日志”复选框输入。这样做将保留console.log 语句的输出，即使在提交表单时重新加载了浏览器窗口。

有关如何在开发者工具中启用此选项的详细信息，请访问：

How to enable “Preserve Log” in Network tab in Chrome developer tools by default?

【讨论】：

【解决方案2】：

如果你想通过点击提交来执行某些操作，那么在表单标签内声明事件onsubmit。像这样：

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

并添加禁用默认行为 - event.preventDefault()。

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

但我不建议你在 html 标签中声明 js 事件。因为这会导致不好的后果。

试试看：

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

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

然后从input submit 中删除onclick="login()"。这里：

<input type="submit" onclick="login()">

【讨论】：

【解决方案3】：

我现在在这里看到两件事。

将包含 js 文件的代码放在 HTML 的底部，就在结束 body 标记的上方。 <script src="index.js"></script>
检查您的 JavaScript 文件是否名为 index.js

【讨论】：

【解决方案4】：

将<input type="submit" onclick="login()"> 替换为<button type="button" onclick="login()">Login</button>
在表单中添加 ID：<form id="myform"> ...

在你的 JS 中做：

function login(){
    alert("here");
    document.querySelector("#myform").submit();
}

【讨论】：