Question

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

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?

Answer 1

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>