использование 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>

Функция отправки формы работает нормально, пока я не попытаюсь сгенерировать точно такой же контент в теге div, используя .innerHTML для тега div «col-1». Я использую .innerHTML, чтобы заменить HTML в «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 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? Я проверил сгенерированный HTML в Firefox, и он точно такой же, как и исходный HTML (как и должно быть), но не будет отправлять ...

Просто для справки, это фактический вызов .innerHTML для замены HTML внутри тега div "col-1":

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, от нажатия кнопки, здесь не определено, поэтому я предполагаю, что оно определено до того, как вы замените 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>

Не совсем уверен, если это будет легче, но я надеюсь, что этопомогает.ура