Symfony 2 Ajax submit, Token CSRF invalid

[MatthieuF]

There is my problem, i need to submit forms in several steps. I have an app form and a login form

Code: Select all

<form id="app_form" action="{{ path('app_create') }}" method="post" {{ form_enctype(formApp) }}>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.name, 'Name'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.name, { required : true }) }}</div>
                <div class="span2" id="error_app_name">{{ form_errors(formApp.name) }}</div>
            </div>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.description, 'Description'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.description, { required : true }) }}</div>
                <div class="span2">{{ form_errors(formApp.description) }}</div>
            </div>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.iosUrl, 'iOS'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.iosUrl) }}</div>
                <div class="span2">{{ form_errors(formApp.iosUrl) }}</div>
            </div>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.androidBundle, 'Android Bundle'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.androidBundle) }}</div>
                <div class="span2">{{ form_errors(formApp.androidBundle) }}</div>
            </div>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.wpUrl, 'Windows Phone'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.wpUrl) }}</div>
                <div class="span2">{{ form_errors(formApp.wpUrl) }}</div>
            </div>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.bbUrl, 'Blackberry'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.bbUrl) }}</div>
                <div class="span2">{{ form_errors(formApp.bbUrl) }}</div>
            </div>
   
            <div class="row-fluid">
                <div class="span2">{{ form_label(formApp.fallbackUrl, 'Fallback Url'|trans) }}</div>
                <div class="span4">{{ form_widget(formApp.fallbackUrl) }}</div>
                <div class="span2">{{ form_errors(formApp.fallbackUrl) }}</div>
            </div>
   
            {{ form_rest(formApp) }}
   
            <button type="submit" class="btn">{{ 'Next step'|trans }}</button>
   
        </form>

Code: Select all

<form id="form_login">
            <input type="hidden" id="login_csrf_token" name="_csrf_token" value="{{ csrf_token }}" />
   
            <label for="login_username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
            <input type="text" id="login_username" name="_username" value="{{ last_username }}" required="true" />
   
            <label for="login_password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
            <input type="password" id="login_password" name="_password"  required="true" />
   
            <input type="checkbox" id="login_remember_me" name="_remember_me" value="on" />
            <label for="login_remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
   
            <button type="submit" class="btn">{{ 'Login'|trans }}</button>
   
            <button class="btn" id="register_show" type="button">{{ 'Want to register ?'|trans }}</button>
   
            <div id="error_login"></div>
   
        </form>

I want to submit the login form en ajax and then submit the app form, but when i do that i've got an error

> The CSRF token is invalid. Please try to resubmit the form

The Javascript code :

Code: Select all

 $('#form_login').submit(function(){
                event.preventDefault();
   
                $.post('./login_check', {   _csrf_token : $('#login_csrf_token').val() ,
                                            _username : $('#login_username').val() ,
                                            _password : $('#login_password').val(),
                                            _remember_me : $('#login_remember_me').val() },
                        function (data) {
   
                            console.log(data);
                            /**
                             * If the login was ok we submit the app form
                             */
                            if(data.success){
                                $('#app_form').submit();
                            }
                            /**
                             * Else we sow to the user the error
                             */
                            else{
                                $('#error_login').html(data.message);
                            }
                        }
                );
            });

The login form return success, but when i submit the app form

$('#app_form').submit();

the error appears in the next page.

Thanks in advance

[mjnet]

Didn't you forget {{ form_widget(form._token) }} in app form?

I'm interested in ajax form submitting:
Can you recommend any bundles? Or just write id by hand?