创建背景提交表单

时间:2013-08-18 17:04:14

标签: jquery ajax

我有两个表单代码(getresponse webform代码和一个普通的表单代码)。我希望只有一个可见的OPTIN FORM用于输入用户电子邮件地址,当用户提交FORM时,它会将getresponse webform代码提交给后台。我知道它会做一些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 -->

我希望在可见表单上获取电子邮件地址,以便在后台添加getresponse webform电子邮件字段并在后台提交。我真的很想要你的帮助。谢谢你提前。抱歉英文不好:)

获取回应网页表格代码必须对用户不可见并运行到后台:

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

1 个答案:

答案 0 :(得分:0)

DEMO

错误仅仅是因为我的表单没有有效的操作&amp;方法呢:-)用你的替换,你会没事的。我只是展示如何隐藏你的第二张表格并通过你的第一张表格提交。如果需要,可以将变量传递给第二个表单。

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;
    });
});