<p>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.</p>

<p>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.</p>

<p>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:</p>

<pre><code>{% header "Content-Type: application/json" %}
</code></pre>

<p>Either way, this should get you what you're looking to achieve.</p>

CC BY-SA 3.0
2014-06-19T21:04:47.537Z
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
CC BY-SA 3.0
2014-06-20T19:58:23.207Z
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
CC BY-SA 3.0
2014-06-18T19:46:25.390Z
2014-06-18T19:46:25.390Z
Bryan Redeagle
<p>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.</p>

<p>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).</p>

<p>Here's an example of my password update form:</p>

<pre><code>      &lt;form action="" class="secondary-content" method="post" accept-charset="UTF-8" id="pwForm"&gt;
    &lt;h2&gt;Update password&lt;/h2&gt;
    &lt;fieldset&gt;
      &lt;input type="hidden" name="redirect" value="/profile"&gt;
      &lt;input type="hidden" name="action" value="users/saveUser"&gt;
      &lt;input type="hidden" name="userId" value="{{ user.id }}"&gt;
      &lt;input type="hidden" name="password" value="{{ currentUser.password }}"&gt;
      &lt;div id="passwordFields"&gt;
        &lt;div class="field"&gt;
          &lt;label for="npw"&gt;New password &lt;a href="#npw" class="js-show-pw micro pull-right"&gt;Show password&lt;/a&gt;&lt;/label&gt;
          &lt;input type="password" id="npw" name="newPassword" class="text-input" value="" required /&gt;
        &lt;/div&gt;
        &lt;div class="field"&gt;
          &lt;button class="button--red" type="submit"&gt;Update&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
</code></pre>

<p>Here is the javascript (in CoffeeScript syntax):</p>

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

<p>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.</p>

<p>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?</p>

<p>Thanks!</p>

<form><ajax>
Getting server-side feedback when submitting forms with jQuery Form plugin
# Getting server-side feedback when submitting forms with jQuery Form plugin

(Asked by: username_0 on 2014-06-18)

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:
      
    Update password
    
      
      
      
      
      
        
          New password Show password
          
        
        
          Update
        
      
    
  

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('There was an error. Please try again.')
      success: ->
        $('#pwLoader').stop().transition opacity: 0
        $(pwFields).text ''
        $(pwFields).html('Password updated').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!

**Tags:** form, ajax


---

## 1 answers

### Answer by username_1 on 2014-06-18. Score: 2

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.

> **Comments:**
> **username_0**: 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.  
> **username_0**: 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.  

---

