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

为什么提交按钮（或就此按下Enter键），当它从.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();"> 

至于为什么回车不工作，你需要一个提交按钮（<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> 

不能完全确定，如果它使任何容易，但我希望能帮助到你。欢呼声