Ajax multiple form submit with fancybox modal's content update

here's my problem:
I've got a fancybox modal with an html form within it. The modal is triggered by an anchor tag and the actual form is wrapped inside an hidden div (I'm using laravel 5.1 and Blade).

<div style="display:none;">
       <div id="create-event" class="page">
            <div class="container">
              <!-- Title Page -->
              <h2>New Event</h2>
              <!-- End Title Page -->

              <!-- Create Event Form -->
              <div class="row">
                <div class="span12">

                    {!! Form::open(['url' => 'admin', 'id' => 'create-event-form', 'role' => 'form', 'method' => 'POST', 'class' => 'create-event-form']) !!}
                    {!! csrf_field() !!}
                      <p class="create-event-name">
                        {!! Form::text('event-name', old('event-name'), ['id' => 'event-name','placeholder' => 'Nome dell\' evento']) !!}
                      </p>
                      <p class="create-event-location">
                       {!! Form::text('event-location', old('event-location'), ['id' => 'event-location','placeholder' => 'Luogo dell\' evento']) !!}
                      </p>
                      <p class="create-event-date">
                       {!! Form::text('event-date', old('event-date'), ['id' => 'event-date','placeholder' => 'Data dell\' evento']) !!}
                      </p>
                      <p class="create-event-submit">
                        <a id="create-event-submit" class="submit" href="" onclick="document.getElementById('create-event-form').submit()">Crea evento</a>
                      </p>
                    {!! Form::close() !!}

                  </div>
              </div>
              <!-- End Create Event Form -->
            </div>
        </div>
        <!-- End Create Event Section -->
  </div>  

This is my fancybox js:

TEMPLATE.fancyBox = function(){
    if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){

        $(".fancybox").fancybox({               
                padding : 0,
                autoSize : false,
                beforeShow: function () {
                    this.width = 1200;
                    this.height = 800;
                },
            });

        $('.fancybox-media').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            helpers : {
                media : {}
            }
        });
    }
}  

And here's my trigger (.fancybox is just a custom css class)

{!! link_to('#create-event', 'Creat new event', ['class' => 'fancybox']) !!}

Now, my goal is to submit the current form, which is gonna create a new row into the db (event table), in some asynchronous way, in order to update the content of the modal with a second form where I'm going to upload some photos (Dropzone drag&drop) related with the neo-created event. Eventually, when the 2nd form is submitted, I'm going to inject a third form that will hold a table with the previous updated photos and each photo will have some text input such as description, location, etc. May sounds weird to you, basically I need to set up a 3-steps 'event-creation', each step with its own form, without leaving the original modal.
I've been wandering on the net for a while and I came up with a couple of hit:

1) ajaxForm: this should allow me to submit the specified form asynchronously

<script>  
        $(document).ready(function() { 
            // bind the form and provide a simple callback function 
            $('#create-event-form').ajaxForm(function() { 
                alert("Successfully submitted!"); 
            }); 
        }); 
</script>

2) JQuery function .html(): this should set a new content into the specified div

$("#div").html("My new text");

My thought was to set up all the forms in 3 separated hidden div and then replace the modal content one form at the time. The problem is I'm kinda newbie to ajax and stuff, therefore I'd love a tip on wiring everything up. How can I prevent the modal to close upon submit? And how can I actually use the .html() function to replace the whole form?
Any kind of help will be appreciated, thanks.

via Chebli Mohamed