reCAPTCHA v2 reset not working with ajax request - javascript

I have checkboxes that need to confirm they are not being checked by bots over and over. I first setup reCAPTCHA V3. It only returns .9 as a score and the bots continue to enable and disable the checkboxes.
<input type="checkbox"
id="some_ID"
name="some_ID"
onchange="toggleLayer('some_IDTimeLayer')"/>
<label for="some_ID"
title="some_Title">{{ some_Title }}</label>
So I wanted to try V2 so they would have to do a click test. In the toggleLayer function I do:
grecaptcha.render('captcha_div', {
'sitekey': 'whatever_my_site_key_is',
'callback': function() {
wms_verification('','',this.layerId);
}
});
wms_verification does an ajax call to the server where I validate the token and return the response. If response.success then the box gets checked and the layer is toggled. If not I handle the fact that it's a bot. This works fine for the initial click. However, when the box is changed again and i try to get a new token to verify I get:
Uncaught Error: reCAPTCHA has already been rendered in this element
I so researched:
I saw the suggestion to use grecaptcha.reset
I tried that, it does remove the token from grecaptcha.getResponse however I still get the same error if I try to render the reCAPTCHA a second time.
I found grecaptcha.execute
The error message was grecaptcha.execute only works with invisible reCAPTCHA.
I found a suggestion to remove the element and recreate it
this also gives the same error.
I found a suggestion to reload the recaptcha js
same error.
Has anyone had success using reCAPTCHA V2 with ajax on an element that has to check authenticity of the click multiple times with no reload of the page?

Related

JavaScript code on onClick event causing "dangerous Request.Path" error

I am attempting to expand a CMS system we are using ... writing HTML code to create a Button with the onClick event calling a custom JavaScript function defined.
The function that is being called first queries the user with a "confirm()", and if the user clicks OK then it performs a window.location redirect; if the user clicks CANCEL then the method does nothing.
The redirection ultimately happens, however, in BOTH cases an error appears. In the case selecting OK, because of the redirect, the error that is displayed is short-lived (however the error still happens). In the case of selecting the CANCEL button, at the bottom of my page is get the following error: "There was an error with the form. Please contact the administrator or check logs for more info."
I checked all logs I could find and no further details could be found. I turned "customErrors" off and when viewing the actions performed in Chrome's DevTools environment I see the following: "A potentially dangerous Request.Path value was detected from the client (:)"
I have no clue why I am seeing this error ... I am also pasting my button code below. Any suggestions?
P.S. Running Bootstrap v3
function jsDeleteFileID(p_intFileID)
{
var objAnswer = confirm("Are you sure you want to delete this file?");
if (objAnswer == true)
{
//****************************************
// Reload Page w/ Parameters
//****************************************
location.href='http://www.MyRedactedWebsiteDomain.com/RedactedWebpageName?DFID=' + p_intFileID + '&ReturnURLID=AAA-AAA-AAA-AAA';
}
else
{
return false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button type="button"
data-loading-text="Please wait..."
data-name="DeleteFile152"
class="btn submit form-button af-btn-loading btn-normal btn-danger"
id="dnn111DeleteFile152"
onClick="jsDeleteFileID(152); return false;"
<i class="glyphicon glyphicon-trash"></i> Delete
</button>
After posting the above, I figured out what the problem was. I would like to post my solution here in case anyone else that is programming on DotNetNuke and using DNNSharp Modules has the same issue.
The problem was in the labels listed in the class property. I removed two class labels: "submit", and "form-button". These two classes added some sort of additional processing that ran AFTER my custom java code which caused errors. Since I only want my code to run and nothing else, removing these two class labels stopped that extra code from running, and now my button behaves as expected.

Invisible reCAPTCHA callback on fail or exit

The Invisible reCAPTCHA lets you easily set a callback upon successful verification:
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback='successfulVerification()'>Submit</button>
But it doesn't appear to have any option to trigger a callback if the modal for further verification is closed (or the reCAPTCHA is unable to verify that you're a human - actually not sure if this ever happens, maybe it just keeps showing you new challanges forever?)
The reason why this is important is say we have a loading spinner or some kind of visual cue to show the user that we're working on the submission. If the reCAPTCHA is unable to automatically determine that the user is indeed human, the modal will be shown - now if the user completes it successfully then that's fine - but if he/she exits it, the loading spinner will still be visible as it doesn't know that the reCAPTCHA failed/user exited it.
One workaround is to only show the loading spinner after the reCAPTCHA succeeds and the request begins - however this would be a poor experience for the user as there would be a delay between clicking the button and the form "appearing" to be submitted - leaving the user to possibly wonder if the form actually submitted or not.
Any ideas on how to remedy this? Thanks!
I haven't found a solution to this but a hack workaround would be to reenable the submission button after a timeout so at least the user isn't locked out indefinitely if they cancel the recaptcha attempt.
var timeout = setTimeout(function () { enableSubmit(); }, 3000);
grecaptcha.render(elem, {
...
callback: function (token) {
clearTimeout(timeout);
continueWithSubmission();
}
});
grecaptcha.execute();

How to setup event tracking on Google Analytics on form submission?

Im trying to track when a user hits the submit button on a contact form.
The page's URL doesn't change, its static.
I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button.
Do I need to edit my analytics account?
Where do I add the additional javascript?
UA is installed correctly (analytics.js)
I'm new to GA and javascript so please break it down for me.
Thanks
I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button.
That is a bit of a non sequitur. Even when the Url does not change there is probably some stuff happening - before you send it there is probably some form validation, and there is some action behind the scene to send there form, like e.g an ajax call.
You could attach event tracking to a submit handler:
<form onSubmit="ga('send','event','category','action','label')">
<input type="text" id="text" name="text">
<input type="submit">
</form>
However this would just tell you that somebody hit the submit button, not if they filled in the form correctly or if the form actually has been sent.
Now I enter speculation land, because I do not know how your form actually works - maybe you can show us an url or give more information.
But maybe you have a validation function that is called on the submit action of the form to see if the form is filled in correctly. In that case it would be advisable to do the tracking in the validation function (horribly simplified example, not production code):
<form onSubmit="validate()"><input type="text" id="text" name="text"><input type="submit"></form>
<script>
function validate() {
var test = document.querySelector('#text').value
if(test = "") {
ga('send','event','Form','Submit','Submitted, but not filled in');
return false;
}
ga('send','event','Form','Submit','Submitted with correct values');
return true;
}
</script>
That's a tad better, at least it tracks the difference between correct submissions and invalid submissions.
Even more speculation: If your form is sent without page reloads it uses probably an ajax call, and there is a huge probability that is uses jQuery (I say that because a) it really is probable and b) it's easier to construct an example in jQuery. The same can be achivied with other libraries or in native JS, but the example will produce an error if you do not use jQuery).
jQuery has a thing called "global ajax handlers". "Global" means they are not callbacks for a specific action, they hook into jQuerys ajax "mechanism" whenever a call to an ajax function is made. The following might work if you have only one aja event per page (else you need logic to distinguish the different ajax event e.g, by checking the url they are being send to), and allows you to track if the ajax call has returned successfully, like when your form data has been send to the server and the request return a 2xx status code:
$(document).ajaxSuccess(function() {
ga('send','event','Form','Submit','Yeah, form data sent to the server');
});
However this does not tell you if the data has been processed correctly. For that you need to make the server emit a success message and check the response:
$( document ).ajaxSuccess(function( event, xhr, settings ) {
if ( settings.url == "formprocessor.php" ) {
if(xhr.responseText.indexOf("success") > -1) {
ga('send','event','Form','Response Received','Form data processed ');
} else {
ga('send','event','Form','Response Received','Form data NOT processed ');
}
}
});
The global ajax event handler is attached to the document - you can put that anywhere on your page, it will do nothing unless an ajax event was called.
Again, this is not production code. Do not try to copy and paste.
This was certainly a bit much if you are new to this, but it should at least help you to improve the question and to see what kind of things are possible. If you can share an Url to your form I can possibly improve the answer.

Contact Form 7 AJAX Callback

Been searching around on this for a while and can't come up with any documentation to outline what i want to achieve.
I'm using wordpress and the Contact Form 7 plugin, all is working perfectly, what i want to achieve is to run some particular javascript upon form submit, i know we can use "on_sent_ok:" in the additional settings, but this only performs if the form is actually submitted.
What i'd like to do is to do some other javascript when the form doesn't submit ok, which throws the user back to the section which didn't validate.
I can use the following code to run after 1.7s of the form submit being clicked, however it's a bit sloppy as if the user was running with a slow connection, there's potential this could run before the form is submitted properly.
$('.wpcf7-submit').click(function() {
setTimeout(function() {
if ($('.fs1 input,.fs1 textarea').hasClass('wpcf7-not-valid')) {
$('.pop-up-form').removeClass('pustep2').removeClass('pu-closing');
$('.form-step').hide();
$('.fs1').show();
}
if ($('.fs2 *').hasClass('wpcf7-not-valid')) {
alert('error on page 2 - take user back to the area with issues')
}
}, 1700);
});
Is there any particular function or hook i can use to run JS when the form AJAX has completed?
Thanks!
In version 3.3 new jQuery custom event triggers were introduced:
New: Introduce 5 new jQuery custom event triggers
wpcf7:invalid
wpcf7:spam
wpcf7:mailsent
wpcf7:mailfailed
wpcf7:submit
You can use wpcf7:invalid like the example below:
$(".wpcf7").on('wpcf7:invalid', function(event){
// Your code here
});
Given the variety of responses on this topic the plugin developer seems to change their mind about how this should work every 5 minutes. Currently (Q1 2017) this is the working method:
document.addEventListener( 'wpcf7mailsent', function( event ) {
alert( "Fire!" );
}, false );
And the valid events are:
wpcf7invalid — Fires when an Ajax form submission has completed
successfully, but mail hasn’t been sent because there are fields with
invalid input.
wpcf7spam — Fires when an Ajax form submission has
completed successfully, but mail hasn’t been sent because a possible
spam activity has been detected.
wpcf7mailsent — Fires when an Ajax
form submission has completed successfully, and mail has been sent.
wpcf7mailfailed — Fires when an Ajax form submission has completed
successfully, but it has failed in sending mail.
wpcf7submit — Fires
when an Ajax form submission has completed successfully, regardless
of other incidents.
Sauce: https://contactform7.com/dom-events/
Sometimes it may not work, as Martin Klasson pointed out, only 'submit' event works, most probable because it's triggered by a form and bubbles up to the selected object. Also as I can understand, now events have other names, like "invalid.wpcf7", "mailsent.wpcf7", etc. In short, this should work:
jQuery('.wpcf7').on('invalid.wpcf7', function(e) {
// your code here
});
More detailed explanation here: How to add additional settings on error in Contact form 7?
This code works since 5.8.x version:
$('.wpcf7').on('wpcf7invalid wpcf7spam wpcf7mailsent wpcf7mailfailed', function () {
// your code here
});
I had quite a go at this, and I found that when only the Submit event works, it means that there is a js problem / conflict in your theme.
If it's a custom theme you built, make sure jQuery and jQuery migrate are both loaded, in this order, and that the Contact form 7 js is also loaded in the footer.
Make sure you have wp_head, and wp_footer in your php templates.
For DOM events to work, your form must be in Ajax mode. If the page reloads upon submission, forget about DOM events. If you have the form ID showing up in the URL, same thing. My form was initially not in Ajax mode because the Contact Form JS was not loaded, and jQuery Migrate either.
The form must behave exactly like shown on this page for the DOM events to be fired properly. Once you have that, it should be working.
I've tested this with jQuery 3.3.1 and Migrate 3.0.1 and the following event listener worked:
document.addEventListener( 'wpcf7mailsent', function( event ) {
console.log('mail sent OK');
// Stuff
}, false );
To check if your theme is the culprit, test your form using Wordpress' default theme, if it works, you know the issue is on your end and not so much in the dev's doc!
I tried to implement the dom event behavior in wordpress contact form 7 plugin as described here, but after trying numerous methods which are given as fixes in different forums I implemented a method of my own.
I m describing the method here below. The method involves some steps which are listed below:
Creating the contact form
Scripting for the contact form to capture event triggers and form data
Loading the script
1. Creating the contact form
<label> Your name
[text* cform7-name id:cform7-name autocomplete:name] </label>
<label> Your Number
[tel* cform7-contact id:cform7-contact] </label>
<label> Course You are interested (Press Ctrl + Select to select Mutiple)
[select* cform7-courses id:cform7-courses multiple "JAVA" "Python" "C#" "Others"] </label>
<label> Your message (optional)
[textarea cform7-submit id:cform7-message] </label>
[submit id:cform7Submit "Submit"]
Above is a sample script with ids so that we can easily retreive those elements from DOM tree using JS. [You can modify the field ids as your need]
2. Scripting for the contact form to capture event triggers and form data
document.addEventListener('DOMContentLoaded', function() {
var frmButton = document.getElementById('cform7Submit');
frmButton.addEventListener( 'click', function( event ) {
var data = {
name: document.getElementById('cform7-name').value,
contact: document.getElementById('cform7-contact').value,
courses: document.getElementById('cform7-courses').value,
comment: document.getElementById('cform7-message').value
};
event.preventDefault();
console.log('Event Data ', event);
console.log('Data ', data);
}, false );
}, false);
Save the above script in wordpress deployment directoty. In my case I placed the script in the root deployment directory itself(<worpress-root-directory>) and saved the file as cform7.js.
Ex: /var/www/wordpress-site/cform7.js
After finishing this we need to load the script.
3. Loading the script
function cform7_script() {
wp_enqueue_script( 'cform7-js', '/cform7.js');
}
add_action('wp_enqueue_scripts', 'cform7_script');
Place the above code in the <worpress-root-directory>/wp-includes/functions.php file
That's done! On clicking the form submit button(cform7-submit) you must see the data logged in the console.

Error while redirecting callback to modal dialog window

I have a main search page with a find and enquire button.
When I click the enquire button. I open a modaldialog window and allow user to enter his name and I'd and hit submit. I transfer the call to a servlet and query is db. If the response takes longer than 30 sec. I forward the request back to the modal page and resubmit the form.
When I forward the request back to the modal window to resubmit I get a script error. The script error occurs before the form.Submit. Am I doing something wrong in forwarding the request. Back.
Edited:
File1.jsp: I call File2.jsp on a button click
returnVal= showModalDialog ( "File2.jsp?Name=Jack" , "" , "dialogWidth:650px;dialogHeight:400px" );
In File2.jsp:
<form name="Refresh" action="<%=contextPath%>/Someservlet" id="Refreshing" method="post" target="result">
I have a name field here with a button to submit
set a hidden param request_old ='N'
</form>
On submitting the button:
In Somservlet.java
I get the parameter
Call a threadpool executor
if request_old ='N' I execute the TPE
else I just wait for response
Wait for 10 sec for response from db
If response did not come back: I set a param
request_old ='Y'
and send it back to the calling
request.getRequestDispatcher("File2.jsp?Name=Jack").forward ( request, response );
So this should resturn the call back to File2.jsp
But somewhere before File2.jsp's form.submit--> I get a script error Object not found
Error:
Object expected
under url it shows my context path with the servlet name.
What confuses me is whether the showmodal dialog is not able to re-submit, or is there an issue in the servlet calling the jsp?
I have been trying to figure this one for 3 days now. any help appreciated.
Web.xml mapping is correct
re-direction happens with a weird script error. I am executing this in IE (using js and servlet)
RE-wrote the files from scratch to make it works. Issues with one of the supporting js files was the cause.

Categories