using document.innerHTML to dynamically generate form within div tag

There is a div tag with a form inside of it on my website as follows:

<div class="col-1">
        <h4>Login</h4>
                <form id="login-form" acti开发者_如何学Con="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>

The form submission functions fine, until I attempt to generate the exact same content within the div tag using .innerHTML on the "col-1" div tag. I use .innerHTML to replace the HTML in "col-1" with the following:

<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>

Why does the submit button (or pressing enter for that matter) not submit the form when it is generated from .innerHTML? I checked the generated HTML in Firefox and it is exactly the same as the original HTML (as it should be), but will not submit...

Just for reference, this is the actual call to .innerHTML to replace the HTML within the "col-1" div tag:

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>';

My ultimate goal is to add an "onsubmit" method to the form, is there an easier way to do that? Perhaps with jQuery?

loginForm, from your button's onclick, isn't defined here so I'm assuming it's defined before you replace the innerHTML.

Because you're replacing the structure, loginForm is now referencing a dead form. Try:

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

As for why enter isn't working, you need a submit button (<input type="submit">), not a <button>

I think there's an error with button's onClick call, I would change that innerHTML text to

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>';

Using jQuery I'd do something like this

The 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>

And, here' the script, that goes on your head section of the page

<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>

Not exactly sure, if it makes any easier but, I hope it helps. cheers