联系表单提交与灯箱成功弹出窗口

时间:2012-02-27 23:44:46

标签: jquery lightbox submission

我正在为客户制作新的营销活动的最后细节。该项目的最后一个阶段是通过获取用户信息并将其发送出来来获得转换。

这里棘手的部分是我的客户已经死定,一旦表单通过ajax提交,他们就会在灯箱上弹出成功的图像弹出窗口。我正在运行wordpress并使用联系表单7.

以下是相关网页: http://igs.link-networkonline.com/campaign-landing-page/

您可以看到链接标题"图片#1"已成为成功页面的工作灯箱。

到目前为止,我找到了这段代码:

<script type = 'text/javascript'>

 $(function(){
      //handle the form submitting
      $(".wpcf7-form").submit(function(){
          var data = $(this).serialize();
          //do an ajax call that expects html to be returned
          $.ajax({
             type:"POST",
             dataType:'html',
             data:data,
             success:function(data){
                //put the returned html into the info div and turn it 
                //into a facebox popup
                $("#info").html(data);
                jQuery.facebox({ div: '#success' });
             }

          }); // end ajax

         //prevent form from submiting normally
         return false;
      })
  });
</script>

我需要在成功消息弹出之前验证表单,因此jquery中的ajax行(不确定这是否正确实现...)。我是jquery的新手,所以这对我来说都是令人生畏的。我真的需要自己学习如何做到这一点,所以任何方向都会非常感激。

1 个答案:

答案 0 :(得分:0)

返回false并不会阻止表单正常提交您需要做的事情

$(".wpcf7-form").submit(function(event){
    event.preventDefault();

    // continue to do AJAX request
});

您的ID #info在您的来源中无处可寻,这会导致问题,但不会出现您在上面看到的内容。