使用Javascript生成表单时不会提交

Question

我正在javascript中生成一个登录表单。 表单显示完美，HTML开发工具中的HTML看起来很好，但单击提交按钮时表单将不会提交。

Heres是生成的表单代码：

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添加它。 这非常冗长，不易阅读。

Answer 2

我把它添加到这个页面，它似乎工作。 您是否有可能拦截表单提交事件的客户端验证脚本？

我的代码：

$(loginBox).appendTo("body");