javascript - 使用 document.innerHTML 在 div 标签内动态生成表单

Question

在我的网站上有一个带有表单的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 生成时，为什么提交按钮(或为此按下回车键)不提交表单？我在 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？

Answer 1

loginForm ，从您的按钮的 onclick 开始，未在此处定义，因此我假设它在您替换 innerHTML 之前已定义。

因为您要替换结构，所以 loginForm 现在引用了一个死窗体。尝试:

<button ... onclick="this.form.submit();">

至于为什么 enter 不起作用，您需要一个提交按钮 ( <input type="submit"> )，而不是 <button>