using facebox to submit a form

I have a working app in rails that I want to sprinkle some ajaxiness to.

开发者_JAVA百科

I currently have a Multistep form and want to do the following:

• user on step 1 clicks "submit" (form gets submitted)
• fancybox launches displaying signup form and "sign up" or "skip" buttons
• doesn't matter if "sign up" or "skip" was clicked on the fancy box, user moves to step 2 for my app.

I was searching for launching fancybox on form submit and submitting form via fancybox

In the demo's I found nothing.

Before I go with fancybox, has someone done this workflow using the fancybox plugin?

I read some SO questions with users having issues submitting forms. Is there a better plugin for the workflow I mentioned?

---

I have done an implementation similar with fancybox. I had a user checkout that upon clicking checkout, a fancybox would appear with a question prompt. Before showing the prompt it would submit the form. This is an outline of the code that I used:

I change the form submit button to a link:

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

Bind fancybox to the link and add an oncomplete to process the form as soon as fancybox opens:

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

Have a javascript function to process the form using ajax and then display your login/create account information. If it were me I would do another ajax call to display your login/signup but I have left that part of the code out but denoted with a comment where you can call it:

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


           }
         });
    }