Question

I am trying to submit a form using jsRoutes in ajax after first doing a validation of the input using jquery form validation plugin. The problem is that when I add “data : form” to the parameters to the ajax call, the response handlers are never called. Some code to explain the issue further:

jsRoutes.controllers.Application.authenticate().ajax({
    data : {
        form : this //this messes things up!
    },
    success : function(data) {
        window.location = "/"; //never called with the above data stuff
    },
    error : function(err) {
        alert(err); //never called with the above data stuff
    }
});

I am able to read the form fields in the controller. One solution is of course to extract every field from the form manually into the data section (like below), but this is not desired. Is there any other solution?

data : {
    username : <username from form>
    password : <password from form>
},

Answer 1

Set an unique ID attribute for your <form> tag ie: <form id="my_form" ...> and later serialize it using the ID as a jQuery selector:

   jsRoutes.controllers.Application.authenticate().ajax({
    data : $("#my_form").serialize(),
    success : function(data) {
        // ...
    },
    error : function(err) {
        // ...
    }
});

Use some in-browser inspection tool (ie FireBug) to check if it sends what you want and if response is formatted as required