<p>Based on your code - and our comments - you need something like this:</p>

<pre><code>&lt;form id="someFormId"&gt;
    &lt;input type="hidden" name="action" value="sproutForms/entries/saveEntry"&gt;
    &lt;input type="hidden" name="handle" value="test"&gt;
    &lt;input type="hidden" name="redirectOnFailure" value="{{ craft.request.getUrl() }}"&gt;
    &lt;!---some more fields--&gt;
    &lt;button type="button" id="sendRequest" value="send"&gt;
&lt;/form&gt;
</code></pre>

<p>and your javascript like</p>

<pre><code>$("#sendRequest").click(function(){
    var formData = $("#someFormId").serialize();
    //proceed with your ajax request 
});
</code></pre>

<p>reason: The Plugin checks all your variables in your <code>$_POST</code> request. Depending on the keys in this array it checks for spam. In your request you send none of those fields -> the plugin validation does not trigger. You can check which fields are injected with the <code>{{ craft.sproutInvisibleCaptcha.protect() }}</code> function and add them manually in your request as well but it's easier to just serialize the form. Maybe you have to play around with the action url. I'm used to craft 3 since two months and it could be I messed up the exact parameter in a serialize for craft2</p>

CC BY-SA 3.0
2017-10-17T14:05:35.110Z
Thank you! I refactored my AngularJS form, using jQuery _serialize()_ and the same hidden fields as you suggested: now it works!

I thought that if Sprout Invisible Captcha fields values were not sent, the form would not save. But as you explained, they have to be sent to enable the Sprout Invisible Captcha features.

Regarding how to handle redirect, I simply add something like _window.location.replace($('[name="redirectOnFailure"]').val())_ if _data.success_ is _false_ inside the AJAX submission.
Romain P.
CC BY-SA 3.0
2017-10-17T14:15:17.043Z
glad I could help you... btw you can use angular http instead of jquery too. If you are interested take a look at my code here: https://pastebin.com/T95umm2A this is just a quick example how to make sure craft will recognize the correct routing and put the request in `$_POST` instead of the regular way
Robin Schambach
CC BY-SA 3.0
2017-10-17T13:01:18.490Z
2017-10-17T13:07:28.227Z
2017-10-17T13:07:28.227Z
Robin Schambach
<p>I set up a custom form template using Sprout Forms and added <code>{{ craft.sproutInvisibleCaptcha.protect() }}</code> inside the <code>&lt;form&gt;</code> tag.</p>

<p>I can see there are several captcha tags added by the plugin, but as I am using AJAX submission:</p>

<ul>
<li>How can I make it works using this submission method?</li>
<li>How do I handle redirect to my 'redirect' location?</li>
</ul>

<p>I did these tests:</p>

<ul>
<li>Prevent a form from being submmitted if a user does not have JavaScript enabled ;</li>
<li>Block form submissions by robots who auto-fill all of your form fields ;</li>
<li>Require minimum time to fill out your form ;</li>
</ul>

<p>All of these tests have failed, spam haven't been caught.</p>

<hr>

<p>This is the captcha field inside custom Sprout Form template:</p>

<pre><code>{{ craft.sproutInvisibleCaptcha.protect() }}
&lt;input type="hidden" name="redirectOnFailure" value="{{ craft.request.getUrl() }}"&gt;
</code></pre>

<p>And this is the AJAX post inside JS script:</p>

<pre><code>var postUrl  = 'sproutForms/entries/saveEntry',
    formData = {
    action: postUrl,
    handle: 'test',
    fields: {}
};

formData['fields[minPrice]'] = $scope.results.minPrice;
formData['fields[maxPrice]'] = $scope.results.maxPrice;

formData = $.param(formData);

$.ajax({
    type     : 'POST',
    url      : postUrl,
    data     : formData,
    dataType : 'json',
    encode   : true
});
</code></pre>

CC BY-SA 3.0
2017-10-17T06:29:16.173Z
I have not used the plugin yet but his spam protection does not seem to be too complex. Is creating your own protection no option for you?
Do you use a custom controller or only craft logic?
Robin Schambach
CC BY-SA 3.0
2017-10-17T08:14:01.577Z
Sprout Invislbe Captcha is a great plugin that combine a set of smart SPAMs protections out of the box. It works fine without AJAX, using Sprout Forms plugin, but perhaps I'm missing something to make it works with AJAX... Of course I'll investigate an home-made solution if I finally can't handle with this one. Thanks!
Romain P.
CC BY-SA 3.0
2017-10-17T08:52:27.527Z
Could you provide more code? 
You should show us your AJAX request.. otherwise we can't know if you messed up your routing or something like that.
Do you use a custom controller and link you request directly to it? Because you skip the validation process if you do that
Robin Schambach
CC BY-SA 3.0
2017-10-17T09:54:25.240Z
Code example added. I'm not using a custom controller, following the Sprout Forms and Sprout Invisible Captcha documentations.
Romain P.
CC BY-SA 3.0
2017-10-17T12:51:11.053Z
As I thought... it seems like your `formData` does not even contain all the required fields from sproutForms. The plugin injects your form with several fields -> it adds much content to the form but you only send 2 of them to the plugin -> the plugin does not recognize the protection. 
you'll need to send all fields in your ajax request. Make a `$('#formId').serialize();` or look for every single field in your form manually.
Robin Schambach
<plugin-sproutforms><security><plugin-sproutemail>
How can I make Sprout Invisible Captcha plugin works using AJAX submission?
# How can I make Sprout Invisible Captcha plugin works using AJAX submission?

(Asked by: username_0 on 2017-10-06)

I set up a custom form template using Sprout Forms and added {{ craft.sproutInvisibleCaptcha.protect() }} inside the  tag.
I can see there are several captcha tags added by the plugin, but as I am using AJAX submission:

How can I make it works using this submission method?
How do I handle redirect to my 'redirect' location?

I did these tests:

Prevent a form from being submmitted if a user does not have JavaScript enabled ;
Block form submissions by robots who auto-fill all of your form fields ;
Require minimum time to fill out your form ;

All of these tests have failed, spam haven't been caught.

This is the captcha field inside custom Sprout Form template:
{{ craft.sproutInvisibleCaptcha.protect() }}


And this is the AJAX post inside JS script:
var postUrl  = 'sproutForms/entries/saveEntry',
    formData = {
    action: postUrl,
    handle: 'test',
    fields: {}
};

formData['fields[minPrice]'] = $scope.results.minPrice;
formData['fields[maxPrice]'] = $scope.results.maxPrice;

formData = $.param(formData);

$.ajax({
    type     : 'POST',
    url      : postUrl,
    data     : formData,
    dataType : 'json',
    encode   : true
});

**Tags:** plugin-sproutforms, security, plugin-sproutemail

> **Comments:**
> **username_1**: I have not used the plugin yet but his spam protection does not seem to be too complex. Is creating your own protection no option for you? Do you use a custom controller or only craft logic?  
> **username_0**: Sprout Invislbe Captcha is a great plugin that combine a set of smart SPAMs protections out of the box. It works fine without AJAX, using Sprout Forms plugin, but perhaps I'm missing something to make it works with AJAX... Of course I'll investigate an home-made solution if I finally can't handle with this one. Thanks!  
> **username_1**: Could you provide more code?  You should show us your AJAX request.. otherwise we can't know if you messed up your routing or something like that. Do you use a custom controller and link you request directly to it? Because you skip the validation process if you do that  
> **username_0**: Code example added. I'm not using a custom controller, following the Sprout Forms and Sprout Invisible Captcha documentations.  
> **username_1**: As I thought... it seems like your `formData` does not even contain all the required fields from sproutForms. The plugin injects your form with several fields -> it adds much content to the form but you only send 2 of them to the plugin -> the plugin does not recognize the protection.  you'll need to send all fields in your ajax request. Make a `$('#formId').serialize();` or look for every single field in your form manually.  

---

## 1 answers

### Answer by username_1 on 2017-10-17. Score: 3 | Accepted answer

Based on your code - and our comments - you need something like this:

    
    
    
    
    


and your javascript like
$("#sendRequest").click(function(){
    var formData = $("#someFormId").serialize();
    //proceed with your ajax request 
});

reason: The Plugin checks all your variables in your $_POST request. Depending on the keys in this array it checks for spam. In your request you send none of those fields -> the plugin validation does not trigger. You can check which fields are injected with the {{ craft.sproutInvisibleCaptcha.protect() }} function and add them manually in your request as well but it's easier to just serialize the form. Maybe you have to play around with the action url. I'm used to craft 3 since two months and it could be I messed up the exact parameter in a serialize for craft2

> **Comments:**
> **username_0**: Thank you! I refactored my AngularJS form, using jQuery _serialize()_ and the same hidden fields as you suggested: now it works!  I thought that if Sprout Invisible Captcha fields values were not sent, the form would not save. But as you explained, they have to be sent to enable the Sprout Invisible Captcha features.  Regarding how to handle redirect, I simply add something like _window.location.replace($('[name="redirectOnFailure"]').val())_ if _data.success_ is _false_ inside the AJAX submission.  
> **username_1**: glad I could help you... btw you can use angular http instead of jquery too. If you are interested take a look at my code here: https://pastebin.com/T95umm2A this is just a quick example how to make sure craft will recognize the correct routing and put the request in `$_POST` instead of the regular way  

---

