# Getting server-side feedback when submitting forms with jQuery Form plugin

I've got a few simple front-end forms that users can use to update their profiles. I'm using the combo of the jQuery Validate and Form plugins to handle validation and submission.

I can successfully update profiles when the fields are technically correct, but can't figure out how to get feedback from the server if an error occurs after submission (aka invalid password, username already in use, etc).

Here's an example of my password update form:

      <form action="" class="secondary-content" method="post" accept-charset="UTF-8" id="pwForm">
<fieldset>
<input type="hidden" name="redirect" value="/profile">
<input type="hidden" name="action" value="users/saveUser">
<input type="hidden" name="userId" value="{{ user.id }}">
<div class="field">
</div>
<div class="field">
<button class="button--red" type="submit">Update</button>
</div>
</div>
</fieldset>
</form>


Here is the javascript (in CoffeeScript syntax):

$('#pwForm').validate submitHandler: (form) ->$(form).ajaxSubmit
type: 'POST'
dataType: 'json'
beforeSubmit: ->
$(pwFields).transition opacity: 0$('#pwLoader').spin(opts).transition opacity: 1
error: (xhr, status, error) ->
$('#pwLoader').stop().transition opacity: 0$(pwFields).transition opacity: 1
$(pwFields).append('<label class="error">There was an error. Please try again.</label>') success: ->$('#pwLoader').stop().transition opacity: 0
$(pwFields).text ''$(pwFields).html('<h3>Password updated</h3>').transition
opacity: 1
delay: 200


In this case, I'm actually tripping the "There was an error…" error no matter what I put in the field. If I pull out the javascript, the page refreshes and I don't get errors, but the password doesn't update.

I'm guessing it has to do with posting to the correct URL. Any ideas? Is it even worth using both/either of these plugins?

Thanks!

I myself am building a data locker using JavaScript to talk to Craft. How I have it set up is that the AJAX request is pointing to a template (which a request can be routed to without defining it in the Control Panel) that will load if there are errors. I can then redirect to a success template if I find no errors. Alternatively, you can set the location to redirect to like you did in your example. I'm returning JSON on both templates so that I can run client-side checks to see what I'm getting back.

So if I have errors, I check for those on my request url template and output the JSON if necessary. If I don't, I load my redirect template which either returns a success message or the data I'm looking to retrieve.

You can tell Craft that it's returning a JSON file by giving it a ".json" extension. Alternatively you can also set it manually with:

{% header "Content-Type: application/json" %}


Either way, this should get you what you're looking to achieve.

• Thanks for the reply. Sorry, I'm a little bit confused. Do you have a code sample? I'm just not sure a) what to actually put in those request templates or b) how to read/print the results. I'm a bit of an ajax form newb. – Travis Gertz Jun 19 '14 at 21:04
• I think I have the concept here. I'm just having trouble figuring out how to return json on these error/success templates. I can get the form submitting, but am only getting 200 OK errors, which I believe means the data is formatted incorrectly. – Travis Gertz Jun 20 '14 at 19:58