Symfony2 multiple forms in different JQuery UI tabs but single page

I'm facing a problem that I can summarize as it follows: I have a TWIG template page like this (reg.html.twig):

{% extends "::base.html.twig" %}
{% block body %}
<ul class="tabs">
    <li class="left"><a href="#tab1">tab1</a></li>
    <li class="left"><a href="#tab2">tab2</a></li>
    <li class="left"><a href="#tab3">tab3</a></li>
    <li class="right"><a href="#tab4">tab4</a></li>
</ul>
<div class="tabs_container">
    <div id="tab1" class="blocco-tab">
        <form action="{{ path('AAA') }}" method="post" {{ form_enctype(form) }}>
            <div id="name_field">
                {{ form_row(form.name) }}
            </div><!-- /name_field -->
            <div id="address">
                 {{ form_row(form.addresses[0].road) }}
            </div><!-- /address_field -->
        </form>
    </div>
    <div id="tab2" class="blocco-tab">
        <form action="{{ path('BBB') }}" method="post" {{ form_enctype(form) }}>
            <div id="surname_field">
                {{ form_row(form.surname) }}
            </div><!-- /surname_field -->
        </form>
    </div>
</div> <!-- contenitore_tabs -->
{% endblock %}

Fields name, surname and addresses belong to a sample Symfony2 entity Person. addresses is the first and only element of a collection of addresses (I need this as collection for other reasons)

The working JS file is:

jQuery(document).ready(function() {
    $(".blocco-tab").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".blocco-tab:first").show();
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".blocco-tab").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});

The Entity file:

class Person {
    protected $name;
    protected $surname;
    protected $addresses;

    public function __construct(){
        $this->addresses = new ArrayCollection();
    }
}

And in the DefaultController:

public function tab1Action(Request $request){
    $person = new Person();
    $address = new Address();
    $addr_coll = new ArrayCollection();
    $addr_coll->add($address);
    $tab1_type = new Tab1Type();
    $person->setAddresses($addr_coll);
    $form = $this->createForm($tab1_type, $person);
    if ($request->getMethod() == 'POST')
    {
        $form->bindRequest($request);
        if ($form->isValid())
    /*ecc ecc ecc*/
}

public function tab2Action(Request $request){
    $person = new Person();
    $tab2_type = new Tab2Type();
    $form = $this->createForm($tab2_type, $person);
    if ($request->getMethod() == 'POST')
    {
        $form->bindRequest($request);
        if ($form->isValid())
    /*ecc ecc ecc*/
}

Actually I took the way of having every FormType having all fields that I don't need rendered but put 'hidden' and 'property_path' => false, because I can't render only my desired fields cause the other ones will cause errors at runtime (they're null) , but I still get problems handling both cases in a joined way.

Putting every form in a different page (== different Route), with different Controllers, everything works fine, so it's not a problem related to basic use of symfony, It's the integration of N forms in a single page with JQuery UI that makes me cry.

Fixed that I have to use this tabs, how can I solve?

Do I have to make a single Action handling everything?
Do I have to make a single form?
Do I miss something?

Thanks in advance, I hope I've been clear in explaining my issue.

Solution

as I mentioned before I solved wrapping all tabs in a single form. Both of your solutions are ok, thank you for your time.

Linuxatico