使用 document.innerHTML 在 div 标签内动态生成表单
Posted
技术标签:
【中文标题】使用 document.innerHTML 在 div 标签内动态生成表单【英文标题】：using document.innerHTML to dynamically generate form within div tag 【发布时间】：2011-07-20 05:43:12 【问题描述】：在我的网站上有一个带有表单的 div 标签，如下所示：
<div class="col-1">
<h4>Login</h4>
<form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset>
<p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="loginForm.submit()"><span><span>Login</span></span></button>
<a href="https://mydomain.com/customer/account/forgotpassword/">Forgot your password?</a>
</div>
</form>
</div>
表单提交功能正常，直到我尝试在“col-1”div 标签上使用 .innerhtml 在 div 标签内生成完全相同的内容。我使用 .innerHTML 将“col-1”中的 HTML 替换为以下内容：
<h4>Login</h4>
<form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset><p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" type="text">
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input class="input-text validate-password required-entry" id="login-password" name="login[password]" type="password">
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="loginForm.submit()">
<span><span>Login</span></span>
</button>
<a href="https://mydomain.com/customer/account/forgotpassword/">Forgot your password?</a>
</div>
</form>
为什么从 .innerHTML 生成表单时，提交按钮（或按 Enter 键）不提交表单？我在 Firefox 中检查了生成的 HTML，它与原始 HTML 完全相同（应该如此），但不会提交...
仅供参考，这是对 .innerHTML 的实际调用，以替换 "col-1" div 标签内的 HTML：
loginFormDivTag.innerHTML='<h4>Login</h4><form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post"><fieldset><p>Already registered? Please log in below:</p><ul class="form-list"><li><label for="login-email">Email Address</label><div class="input-box"><input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" /></div></li><li><label for="login-password">Password</label><div class="input-box"><input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" /></div></li></ul></fieldset><div class="buttons-set form-buttons btn-only"><button type="button" class="button" onclick="loginForm.submit()"><span><span>Login</span></span></button><a href="https://mydomain.com/customer/account/forgotpassword/">Forgot your password?</a></div></form>';
我的最终目标是在表单中添加一个“onsubmit”方法，有没有更简单的方法可以做到这一点？也许用 jQuery？
【问题讨论】：
【参考方案1】：loginForm，来自您的按钮的 onclick，未在此处定义，因此我假设它是在您替换 innerHTML 之前定义的。
因为您要替换结构，所以 loginForm 现在引用了一个死表单。试试：
<button ... onclick="this.form.submit();">
至于为什么输入不起作用，您需要一个提交按钮（<input type="submit">），而不是<button>
【讨论】：
【参考方案2】：我认为按钮的 onClick 调用有错误，我会将 innerHTML 文本更改为
loginFormDivTag.innerHTML='<h4>Login</h4><form id="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post"><fieldset><p>Already registered? Please log in below:</p><ul class="form-list"><li><label for="login-email">Email Address</label><div class="input-box"><input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" /></div></li><li><label for="login-password">Password</label><div class="input-box"><input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" /></div></li></ul></fieldset><div class="buttons-set form-buttons btn-only"><button type="button" class="button" onclick="document.forms.login-form.submit()"><span><span>Login</span></span></button><a href="https://mydomain.com/customer/account/forgotpassword/">Forgot your password?</a></div></form>';
使用 jQuery 我会做这样的事情
HTML
<!-- I'd grab form text from here -->
<div id="div-form-content" style="display:none">
<h4>Login</h4>
<form id="login-form" name="login-form" action="https://mydomain.com/customer/account/loginPost/" method="post">
<fieldset>
<p>Already registered? Please log in below:</p>
<ul class="form-list">
<li>
<label for="login-email">Email Address</label>
<div class="input-box">
<input type="text" class="input-text required-entry validate-email" id="login-email" name="login[username]" value="" />
</div>
</li>
<li>
<label for="login-password">Password</label>
<div class="input-box">
<input type="password" class="input-text validate-password required-entry" id="login-password" name="login[password]" />
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set form-buttons btn-only">
<button type="button" class="button" onclick="$('#login-form').submit()"><span><span>Login</span></span></button>
<a href="https://mydomain.com/customer/account/forgotpassword/">Forgot your password?</a>
</div>
</form>
还有，这里的脚本，位于页面的头部
<script type="text/javascript">
$(document).ready(function()
// get the the innerHTML from #div-form-content and add it to .col-1
$('.col-1').html($('#div-form-content').html());
//remove innerHTML from #div-form-content, we don't want two forms with same ID in the same page
$('#div-form-content').html('');
);
</script>
不完全确定，如果它更容易，但我希望它有所帮助。干杯
【讨论】：
以上是关于使用 document.innerHTML 在 div 标签内动态生成表单的主要内容，如果未能解决你的问题，请参考以下文章
从 Javascript 中的 if 语句执行 DOM 的问题