如何在body.innerHTML中异步设置html后执行onsubmit方法
我异步获取了一个登录表单，并将其设置在 document.body 中。我之前声明它在提交表单上，但现在收到参考错误。有没有办法使用html设置onsubmit，而不必调用loginForm.onsubmit = login。在chrome检查器源中，即使在body中设置了/session后，它仍然显示原始的index.html代码。
下面你会发现public/js/app.js
const result = await fetch('/session');
if (result) {
const login = await result.text();
document.body.innerHTML = login;
}
function login(e) {
e.preventDefault();
const loginForm = document.getElementById('loginForm');
console.log(loginForm);
const options = { method: loginForm.method, body: new FormData(loginForm) };
const loginButton = document.getElementById('loginButton');
const loginButtonHTML = loginButton.innerHTML;
loginButton.innerHTML = 'Loading...';
disableElements(loginForm);
// const result = await fetch(loginForm.action, options);
}
从/session返回的html是
<form id="loginForm" action="/user/login" method="post" onsubmit="login(event)">
<input type="text" name="username" autocomplete="username" placeholder="Username">
<input type="password" name="password" autocomplete="current-password" placeholder="Password">
<button id="loginButton" type="submit">Login</button>
</form>
完整的错误代码是： Uncaught ReferenceError: login is not Define at HTMLFormElement.onsubmit ((index):1:1)
原始 html 页面包含脚本 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aveloz</title>
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<div>
<h1 style="text-align: center;">Loading...</h1>
</div>
<script type="module" src="public/js/app.js"></script>
</body>
</html>
I fetched a login form asynchronously, and setted it inside document.body. I declared it's on submit form before that, and now getting a Reference error. Is there any way to set onsubmit using html, without having to call loginForm.onsubmit = login. In chrome inspector sources, even after setting /session in body, it still shows original index.html code.
Bellow you will find public/js/app.js
const result = await fetch('/session');
if (result) {
const login = await result.text();
document.body.innerHTML = login;
}
function login(e) {
e.preventDefault();
const loginForm = document.getElementById('loginForm');
console.log(loginForm);
const options = { method: loginForm.method, body: new FormData(loginForm) };
const loginButton = document.getElementById('loginButton');
const loginButtonHTML = loginButton.innerHTML;
loginButton.innerHTML = 'Loading...';
disableElements(loginForm);
// const result = await fetch(loginForm.action, options);
}
The html returned from /session is
<form id="loginForm" action="/user/login" method="post" onsubmit="login(event)">
<input type="text" name="username" autocomplete="username" placeholder="Username">
<input type="password" name="password" autocomplete="current-password" placeholder="Password">
<button id="loginButton" type="submit">Login</button>
</form>
The complete error code is:Uncaught ReferenceError: login is not defined at HTMLFormElement.onsubmit ((index):1:1)
The original html page which includes with the script index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aveloz</title>
<link rel="stylesheet" href="public/css/style.css">
</head>
<body>
<div>
<h1 style="text-align: center;">Loading...</h1>
</div>
<script type="module" src="public/js/app.js"></script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
由于您将 javascript 作为模块导入，因此需要导出登录函数：
然后您必须从非模块的内容导入 html：
Since you import the javascript as a module, you need to export the login function:
you'd then have to import into you html from something that isn't a module: