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

来自你的按钮onclick的

loginForm在这里没有定义，所以我假设你在替换innerHTML之前定义它。

因为您正在替换结构，所以loginForm现在引用了死形式。尝试：

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

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

Answer 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标签内动态生成表单

2 个答案: