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

不能完全確定，如果它使任何容易，但我希望能幫助到你。歡呼聲