<p>Thanks to <strong>Robin Schambach</strong>. The answer was as simple as serialize the form data with the CSRF in there already by using the default <code>{{ getCsrfInput() }}</code></p>

<blockquote>
  <p>serializeArray won't produce data in a way Craft CMS will proceed it.
  It's not a good idea to do that. Besides that why don't you include
  the token in your form from the beginning? Because this is never the
  default code you can find in every ajax request – <em>Robin Schambach 14
  hours ago</em></p>
</blockquote>

CC BY-SA 4.0
2018-08-24T07:46:48.153Z
2018-08-24T07:46:48.153Z
Tom De Smet
<p>I have quite a simple registration form, something like this:</p>

<pre><code>    &lt;script type="text/javascript"&gt;
        window.csrfTokenName = "{{ craft.config.get('csrfTokenName') }}";
        window.csrfTokenValue = "{{ craft.request.getCsrfToken }}";
    &lt;/script&gt;

    &lt;form id="registerUser" method="post" accept-charset="UTF-8" class="flex-stack" novalidate @submit.prevent="userFormValidation()"&gt;
                        &lt;input type="hidden" name="action" value="users/saveUser"&gt;
                        &lt;input type="hidden" name="redirect" value="user/registration-success"&gt;

                        &lt;label for="username"&gt;{{ "Username (no spaces)"|t }} &lt;em&gt;*&lt;/em&gt;&lt;/label&gt;
                        &lt;input id="username" type="text" name="username" v-model.lazy.trim="user.userDetails.userName" :class="{ 'error-field': usernameHasError }" required&gt;
    &lt;/form&gt;
</code></pre>

<p>It gets passed to VueJS (which works). There I have the default code I find in every AJAX post on Craft StackExchange:</p>

<pre><code>var data = $('#registerUser').serializeArray();

            //--- Add CSRF token to data
            data[window.csrfTokenName] = window.csrfTokenValue;

            $.ajax({
                type: "POST",
                data: data,
                url: "",
                success: function(data, response){
                    console.log("success", response, data);
                },
                error: function(response) {
                    console.log("error", response);
                }
            });
</code></pre>

<p>This works when the CSRF is disabled in the config, but when enabled, I always get a <strong>bad request, CSRF token invalid error</strong>.</p>

<p>What am I doing wrong here? There's no Craft caching going on.</p>

CC BY-SA 4.0
2018-08-23T17:06:03.500Z
`serializeArray` won't produce data in a way Craft CMS will proceed it. It's not a good idea to do that. Besides that why don't you include the token in your form from the beginning? Because this is never the default code you can find in every ajax request
Robin Schambach
CC BY-SA 4.0
2018-08-23T21:48:36.797Z
But using the {{ getCsrfInput() }} in my form doesn't work with Ajax right? All I read on SE is by doing it the way I do it. But I can't add it to the data when I use serialize() instead. What does craft expect to get from a post Ajax to work with anyway? Any good examples I didn't find that you know of?
Tom De Smet
CC BY-SA 4.0
2018-08-23T21:50:18.480Z
Of course it works with ajax, why shouldn't it? You can't add it to the data because you are not supposed to do that. Just include the value to the form, serialize it and submit it
Robin Schambach
CC BY-SA 4.0
2018-08-24T07:43:27.197Z
Thanks man, it just works now. I don't know why all these other threads have the wrong answers. It's so simple...
Tom De Smet
CC BY-SA 4.0
2018-08-24T07:45:13.537Z
These answers are not wrong, you just used them wrong. Most other answers around here are about submitting custom data via ajax not about submitting serialized forms. So it's not their fault
Robin Schambach
CC BY-SA 4.0
2018-08-24T07:49:42.243Z
Just revisited some of those threads and I can see now where I made my wrong assumptions.
Tom De Smet
<form><ajax><csrf>
Another AJAX CSRF question
# Another AJAX CSRF question

(Asked by: username_0 on 2018-08-23)

I have quite a simple registration form, something like this:
    

    
                        
                        

                        {{ "Username (no spaces)"|t }} *
                        
    

It gets passed to VueJS (which works). There I have the default code I find in every AJAX post on Craft StackExchange:
var data = $('#registerUser').serializeArray();

            //--- Add CSRF token to data
            data[window.csrfTokenName] = window.csrfTokenValue;

            $.ajax({
                type: "POST",
                data: data,
                url: "",
                success: function(data, response){
                    console.log("success", response, data);
                },
                error: function(response) {
                    console.log("error", response);
                }
            });

This works when the CSRF is disabled in the config, but when enabled, I always get a bad request, CSRF token invalid error.
What am I doing wrong here? There's no Craft caching going on.

**Tags:** form, ajax, csrf
> **Comments:**
> **username_1**: `serializeArray` won't produce data in a way Craft CMS will proceed it. It's not a good idea to do that. Besides that why don't you include the token in your form from the beginning? Because this is never the default code you can find in every ajax request  
> **username_0**: But using the {{ getCsrfInput() }} in my form doesn't work with Ajax right? All I read on SE is by doing it the way I do it. But I can't add it to the data when I use serialize() instead. What does craft expect to get from a post Ajax to work with anyway? Any good examples I didn't find that you know of?  
> **username_1**: Of course it works with ajax, why shouldn't it? You can't add it to the data because you are not supposed to do that. Just include the value to the form, serialize it and submit it  
> **username_0**: Thanks man, it just works now. I don't know why all these other threads have the wrong answers. It's so simple...  
> **username_1**: These answers are not wrong, you just used them wrong. Most other answers around here are about submitting custom data via ajax not about submitting serialized forms. So it's not their fault  
> **username_0**: Just revisited some of those threads and I can see now where I made my wrong assumptions.  

---

## 1 answers

### Answer by username_0 on 2018-08-24. Score: 1 | Accepted answer

Thanks to **Robin Schambach**. The answer was as simple as serialize the form data with the CSRF in there already by using the default `{{ getCsrfInput() }}`

> serializeArray won't produce data in a way Craft CMS will proceed it.
> It's not a good idea to do that. Besides that why don't you include
> the token in your form from the beginning? Because this is never the
> default code you can find in every ajax request – *Robin Schambach 14
> hours ago*


---

