Extension

Developer
Supported

Snaptcha

ExpressionEngine 2, ExpressionEngine 3, ExpressionEngine 4, ExpressionEngine 5

Back to this add-on's main page
View Other Add-ons From PutYourLightsOn

     

You must be logged in to post.

Doesn’t seem to work with AJAX

Support Request

matrix10
matrix10

Hi,
We have this working on a site that has multiple forms that use AJAX to submit the forms and as the add-on works perfectly with forms that have the Submit button, there is an issue with the AJAX.

I have tried adding the Snaptcha field and its corresponding value to the form, but this just duplicated the Snaptcha code within the forms.

The error that comes up is the error message that is set within the Snaptcha settings:

Sorry, you have failed the security test. Please ensure that you have javascript enabled and that you refresh the page that you are trying to submit.

We are running ExpressionEngine 4.3.3 and Snaptcha 2.1.0

Any ideas on how we can fix this? We have tried the three different levels of security with no luck.

Here is one form that doesn’t work:

{exp:channel:form {if in_group_8} author_only="yes" {/if}id="edit_contact_name" secure_action="yes" return="system/{p_ch}/ENTRY_ID" channel="{p_ch}" class="form modal_form" include_jquery="no" include_assets="no" json="yes" entry_id="{entry_id}" show_fields="contact_name"}
<div class="modal-body">
    <
input type="text" value="{contact_name}" name="contact_name" class="form-control" type="text" data-original="{contact_name}">
</
div>
<
div class="modal-footer">
    
{save_buttons}
</div>
<
input type="hidden" name="structure_uri" value="{url_title}" />
{/exp:channel:form} 
matrix10
# 1
matrix10

Can anyone look at this issue please, or just get to us with?

PutYourLightsOn
# 2
Developer
PutYourLightsOn

If the form is submitting correctly using the submit button, then the Snaptcha input field must be present in the rendered code. When submitting the form via AJAX, you will need to submit the name-value pair of the Snaptcha input field along with the rest of the values. If you’d like us to take a look at the code then please paste the Javascript code you are using to submit the form with AJAX.

matrix10
# 3
matrix10
function sendData(formcallbackerror_callback){
    formData 
= new FormData(form);
    
fetch(form.action{
        method
"POST",
        
bodyformData,
        
credentials'same-origin'
    
})
    .
then(checkStatus)
    .
then(parseJSON)
    .
then(function(response){
        
//success
        
stop_saving_mode(formresponse.successresponse.field_errorscallbackerror_callback);
    
}, function(error){
        
//error
        
stop_saving_mode(formfalseerrornullerror_callback);
    
});
PutYourLightsOn
# 4
Developer
PutYourLightsOn

If you inject this code into the function (or run it in the browser console), does the Snaptcha field appear?

var formData = new FormData(form);

console.log(...formData); 
matrix10
# 5
matrix10

Nope :(

PutYourLightsOn
# 6
Developer
PutYourLightsOn

That’s the problem then. You may need to adjust the Javscript code to work with the mark-up output of the form.