javascript - 使用 Javascript 生成的表单不会提交

Question

我正在用 javascript 生成一个登录表单。表单显示完美，HTML 在 Google Dev Tools 中看起来很好，但是当我单击提交按钮时表单不会提交。

这是生成的表单代码:

var loginBox = '<div id="loginBox">';
loginBox    += '<h1>Login</h1>';
loginBox    += 'Please use the form to login below<br /><br />';
loginBox    += '<form action="home.php" method="post">';
loginBox    += '<div class="input">';
loginBox    += '<label for="username">Username</label>';
loginBox    += '<input type="text" name="username" />';
loginBox    += '</div>';
loginBox    += '<div class="input">';
loginBox    += '<label for="userpass">Password</label>';
loginBox    += '<input type="password" name="password" />';
loginBox    += '</div>';
loginBox    += '<div class="clear"></div>';
loginBox    += '<div class="input">';
loginBox    += '<input type="submit" class="submit button" value="Submit" />';
loginBox    += '</div>';
loginBox    += '</form>';
loginBox    += '</div>';

关于为什么这行不通的任何想法？我知道我可能会在按下提交按钮时编写一些 Javascript 来提交表单，但我不明白为什么有必要这样做。谢谢

Answer 1

更大的问题是您为什么要使用 Javascript 创建登录框？

我认为重构它并让表单位于隐藏的 div 中并根据需要使用 JavaScript 显示/隐藏它会更清晰。这将解决一些浏览器使用 element.innerHTML 动态添加表单的问题。

如果这不是一个选项，那么您可能必须更改您的 JS 以使用 DOM 添加它。这非常冗长且不易阅读。