Ajax Registration FOSUserBundle - ajax

Question

I am trying to register a user via AJAX using FOSUserBundle.
The problem is that the name value in the form is fos_user_registration_form_[username] so it isn't accepted by javascript as array.
<input type="text" id="fos_user_registration_form_username" name="fos_user_registration_form[username]" required="required" />
How can I solve that?
Can I change the name parameter in FOSUserBUndle to fos_user_registration_form_username ?
How can I create an array with fos_user_registration_form_[username] value in Javascript?
$("#registerButton").click( function(){
data = {
fos_user_registration_form_[username]:$("#name").val(), // HERE IS WHERE IT CRASHES, IN THE [username] field.
fos_user_registration_form_[email]:$("#email").val(),
fos_user_registration_form_[plainPassword]:$("#password").val(),
};
$.ajax({
type: "POST",
url: serviceURL,
asyn:false,
data: data,
dataType: "json",
success: function(res) {
alert("success"); // JUST FOR TEST
}
});
I am testing a basic example..
This works (triggers the alert)
<script type="text/javascript">
data = {
fos_user_registration_form_username:"blabla"
};
alert(true);
</script>
This doesn't works: (do not trigger the alert)
<script type="text/javascript">
data = {
fos_user_registration_form_[username]:"blabla"
};
alert(true);
</script>

Answer 1

To fetch the data from your input fields, you need to combine the name_of_the_form_ + the name_of_the_field. For example:
fos_user_registration_form_ + username => fos_user_registration_form_username
data = {
fos_user_registration_form[username]:$("#fos_user_registration_form_username").val(),
fos_user_registration_form[email]:$("#fos_user_registration_form_email").val(),
fos_user_registration_form[plainPassword]:$("#fos_user_registration_form_plainPassword").val(),
};