使用facebox提交表单

Question

我有一个正在运行的 Rails 应用程序，我想为其添加一些 ajaxiness。

我目前有一个多步骤表单，想要执行以下操作：

• 用户在第 1 步单击“提交”（表单被提交）
• fancybox 启动显示注册表单，并且“注册”或“跳过”按钮
• 与“注册”无关或者在精美的框中单击“跳过”，用户将转到我的应用程序的步骤 2。

我正在搜索 launching fancybox on form Submit 和 submitting form via fancybox

在演示中我什么也没找到。

在我使用 fancybox 之前，有人使用 fancybox 插件完成了这个工作流程吗？

我阅读了一些SO问题，其中用户提交时遇到问题形式。对于我提到的工作流程有更好的插件吗？

Answer 1

我已经完成了与 fancybox 类似的实现。我有一个用户结帐，单击结帐后，会出现一个带有问题提示的精美框。在显示提示之前，它将提交表单。这是我使用的代码的概要：

我将表单提交按钮更改为链接：

<a id='various2' href='#submitform'>Submit</a>

将 fancybox 绑定到链接并添加 oncomplete 以便在 fancybox 打开后立即处理表单：

$(document).ready(function() {


            $("#various2").fancybox({
                'cache' : false,
                'hideOnOverlayClick' : false,
                'showCloseButton'   : false,
                'autoDimensions'    : false,
                'width'             : 650,
                'titlePosition'     : 'inside',
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'scrolling'         : 'no',

                'onComplete'            : function(){
                    processform();
                }
            });
});

使用 javascript 函数使用 ajax 处理表单然后显示您的登录/创建帐户信息。如果是我，我会执行另一个 ajax 调用来显示您的登录/注册，但我已将这部分代码保留在外面，但用注释表示，您可以在其中调用它：

function processform(){
        var idcardnumber1 = jQuery("#field1").val();
        var idcardnumber2 = jQuery("#field2").val();
        $.ajax({
            cache : false, 
           type: "POST",
           url: "processform.php",
           data: "field1="+field1+"&field2="+field2,
            dataType: "json",
           success: function(data){
            if(data.valid == 1){
             // Display Your Login Signup Form
            }
            else{
                // Close Fancybox since the form did not submit

                $.fancybox.close();
            }


           }
         });
    }