創建背景提交表單

Question

我有兩個表單代碼（getresponse webform代碼和一個普通的formcode）。我希望只有一個可見的OPTIN FORM用於輸入用戶電子郵件地址，當用戶提交FORM時，它會將getresponse網絡表單代碼提交到後臺。我知道它會做一些jQuery和Ajax你能告訴我示例代碼如何做到這一點？

常規表單：

<!--VISIBLE FORM --> 
<form method="post" action="#" target="frame_result"> 
    <input id="email" type="text" name="email" placeholder="email" /> 
    <br /> 
    <input id="blast" type="button" value="GET FREE QOUTE" name="submit" /> 
</form> 
<!--VISIBLE FORM --> 

我想要得到的可見形式的電子郵件地址放在Web窗體的GetResponse電子郵件領域的背景，並提交有關的背景。我真的很想幫助你。感謝提前。遺憾的英語不好:)

GET RESPONSE Web表單代碼必須對用戶不可見，並運行於後臺：

<div id="WFItem505952" class="wf-formTpl"> 
<form accept-charset="utf-8" action="https://app.getresponse.com/add_contact_webform.html" 
method="post"> 
     <div id="WFIcenter" class="wf-body"> 
      <ul class="wf-sortable" id="wf-sort-id"> 
       <li class="wf-email" rel="undefined" style="display: block !important;"> 
        <div class="wf-contbox"> 
         <div class="wf-labelpos"> 
          <label class="wf-label">Email:</label> 
         </div> 
         <div class="wf-inputpos"> 
          <input class="wf-input wf-req wf-valid__email" type="text" name="email"></input> 
         </div> 
         <em class="clearfix clearer"></em> 
        </div> 
       </li> 
       <li class="wf-submit" rel="undefined" style="display: block !important;"> 
        <div class="wf-contbox"> 
         <div class="wf-inputpos"> 
          <input type="submit" class="wf-button" name="submit" value="Sign Up!" 
          style="display: inline !important; width: 120px !important;"></input> 
         </div> 
         <em class="clearfix clearer"></em> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <input type="hidden" name="webform_id" value="505952" /> 
</form> 

Answer 1

DEMO

的錯誤僅僅是因爲我的表格還沒有一個有效的行動&方法呢:-)取代你的，你會沒事的。我只是展示如何隱藏第二個表單並通過第一個表單提交。如果需要，可以將變量傳遞給第二種形式。

HTML：

<form id="form1"> 
    <h5>Form 1</h5> 
    <label for="username"><span>Username</span><input name="username" id="username" type="text" /></label><br/> 
    <label for="email"><span>Email</span><input name="email" id="email" type="text" /></label><br/> 
    <input type="submit" value="Submit Form 1" /> 
    </form> 
    <form id="form2"> 
    <h5>Form 2</h5> 
     <input type="text" name="username1" id="username1" /> 
     <input type="text" name="email1" id="email1" /> 
    <input type="submit" value="Submit Form 2"/> 
    </form> 

CSS：

/* Hiding Form 2 */ 
#form2{ 
    visibility:hidden; 
} 

JS：

$(function(){ 
    $('#form1').on('submit', function(){ 
     $('#username1').val($('#username').val()); 
     $('#email1').val($('#email').val()); 
     $('#form2').submit(); 
     return false; 
    }); 
});