I'm doing some research in CAPTCHAs' usability and I'm currently looking at reCAPTCHA from Google.
I'm trying to count the number of times a user reload a CAPTCHA because he can't solve it, but I can't seem to find a way to get that information.
Basically, every time the user ask for a new CAPTCHA, I'd like to increment a counter.
I'm using JS/PHP.
Thanks.
The HTML injected by the reCaptcha in PHP contains the following HTML for the reload button:
<a title="Get a new challenge" id="recaptcha_reload_btn"><img alt="Get a new challenge" src="http://www.google.com/recaptcha/api/img/red/refresh.gif" id="recaptcha_reload" height="17" width="25"></a>
This means you can add a Javascript event listener to the button and count the number of times it is clicked. This example uses jQuery to increment a global variable:
var recaptcha_reloaded = 0;
$(document).on("click", "#recaptcha_reload_btn", function() {
recaptcha_reloaded++;
});
How you send this information once it is captured is up to you. One possibility is injecting it into a hidden input field on a form before it is submitted.
Also note that this only counts the number of times the button was clicked, not the number of times it was actually reloaded. There is a delay between clicking the recaptcha reload button and when the recaptcha is actually reloaded, and additional clicks during this interval will be ignored.
$(document).on('click','#recaptcha_reload',function(){
try {
_gaq.push(['_trackEvent', location.href,
'Captcha reload', '']);
} catch(e) {}
});
Related
I have a multi-page form created with gravity forms. It's form I use for lead generation, with the last step asking for the user's name, email, and phone number.
In the second last step before asking for user's personal info, there is a page with a "loading" gif spinner and the animated text "searching for a quote".
I need help to set up a javascript code for the second last page for when the user is on that page with the loading gif after 6.5 seconds it will automatically click the hidden page next button to take the user to the last page asking for their personal info.
I'm using the code below, which works only when the user manually clicks using the mouse or mousepad and click on the third last page. If the user enters details in the third last page and hits the enter or return key on the keyboard the code doesn't fire.
I'm not too familiar with Javascript. Just getting started learning.
I understand there's a gravity forms javascript gform_page_loaded, but that seems to fire the code on every single page rather than just when the second last page is in the user's viewport. Please help.
SEE CODE BELOW
<script type="text/javascript">
const btnSearchMortgage = document.getElementById("gform_next_button_13_16");
btnSearchMortgage.addEventListener("click", function () {
setTimeout(function () {
document.getElementById("gform_next_button_13_9").click();
}, 6500);
});
</script>
The gform_page_loaded is the way to go. You can use the currentPage parameter it passes to only trigger code on a given form page.
jQuery( document ).on( 'gform_page_loaded', function( event, formId, currentPage ) {
if ( currentPage == 2 ) {
// bind your custom event
}
} );
I've been looking at how to automate actions on a webpage with PhantomJS, however I'm having issues manipulating the page to do what I want it to.
I'm using this as test site. I've managed to get Phantom to open the webpage and scrape the random sentence from the #result span. But now what I want to do is get another sentence without re-launching the script. I don't want to close and re-open the page as Phantom takes ages to launch the webkit and load the page. So I thought I could get another sentence by getting Phantom to click on the 'Refresh' button below the sentence box. Here's what I have at the moment:
var page = require('webpage').create();
console.log("connecting...");
page.open("http://watchout4snakes.com/wo4snakes/Random/RandomSentence", function(){
console.log('connected');
var content = page.content;
var phrase = page.evaluate(function() {
return document.getElementById("result").innerHTML;
});
console.log(phrase);
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.evaluate(function() {
$("frmSentence").click();
});
});
var content = page.content;
var phrase = page.evaluate(function() {
return document.getElementById("result").innerHTML;
});
console.log(phrase);
phantom.exit();
});
As you can see I'm trying to click the refresh button by using a .click() function, but this isn't working for me as I still get the same sentence as beforehand. Given the HTML for the button:
<form action="/wo4snakes/Random/NewRandomSentence" id="frmSentence" method="post" novalidate="novalidate">
<p><input type="submit" value="Refresh"></p>
</form>
I'm not sure what I should be referencing in the script to be clicked on? I'm trying the form ID 'frmSentence' but that isn't working. I'm wondering if .click() is the right way to go about this, is there some way for Phantom to submit the form that the button is linked to? Or maybe I can run the associated script on the page that gets the sentence? I'm a bit lost on this one so I don't really know which method I should go with?
You have a problem with your control flow. page.includeJs is an asynchronous function. If you have some other statements page.includeJs, they are likely executed before the script is loaded and the callback is executed. It means in your case that you've read the sentence 2 times before you even trigger a click.
If you want to do this multiple times, I suggest to use recursion since you cannot write this synchronously. Also, since you want this to be fast, you cannot use a static setTimeout with a timeout of 1 second, because sometimes the request may be faster (you lose time) and sometimes slower (your script breaks). You should use waitFor from the examples.
Instead of loading jQuery every time, you can move page.includeJs up and include everything else in its callback. If you only need to click an element or if jQuery click doesn't work (yes, that happens from time to time), you should use PhantomJS; click an element.
web scraping is about sending require information to a web server and get the result. It is not about behaving like a user clicking button or entering search criteria.
All you need to do in this example is send a POST request to http://watchout4snakes.com/wo4snakes/Random/NewRandomSentence. The result is just text in page.content, it does not even need to evaluate. So to get more than one sentence you just need to do a loop of page.open
I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!
Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}
On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()
Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.
dearest experts.
You helped me with this issue on this link below previousl:
How to I redirect to another page *after* printing document?
Things seemed to be working fine until this morning we discussed that users were submitting duplicate entries.
The reason for this is that once the user clicks to Submit their request,they are presented with a button that says, ">>>Click Here To Print Form<<<<".
Users are required to print this form but for some reason, they forget to do so.
In the event that they forget to print this form, they are taking back to the input screen with boxes still retaining the data they initially entered.
Is there a way to redirec them to results.aspx page, whether they print the form or not?
Please see current code and many thanks in advance.
<script type ="text/javascript">
function doPrint() {
var printContent = document.getElementById("pdmyop");
window.print(printContent);
document.location.href = "results.aspx";
}
</script>
**********************************
<asp:Button ID="btnPrint" runat="server" Text=">>>Click Here To Print Form<<<<" OnClientClick="doPrint(); return false;" />
You can add this script at the end of the SubmitForm procedure:
String script = String.Format("window.print(); window.location = '{0}';", ResolveClientUrl("~/results.aspx"));
ClientScript.RegisterStartupScript(insub.GetType(), "print", script, true);
I hope you can translate this code from C# to VB. If insub placed in an UpdatePanel use ScriptManager instead of the ClientScript.
Be warned, that this code doesn't work in Chrome (as well as any code those make redirect onto different page before document printed)
I have a page which submits a form on page load and redirects the user to another site. The response from the other end can be a bit slow, so I created this page with a fake loading progress indicator to reassure users. For further reassurance I wanted to add a countdown message saying "You should be redirected to X in Y seconds".
I used this jQuery example, which updates an element with id "countdown" with the current number.
{$(function(){
var count = 7;
countdown = setInterval(function(){
$("#countdown").html(count);
if (count == 0) {
clearInterval(countdown);
$('#countdown_container').html("If you seem to be stuck <a href='javascript:the_form.submit();'>click here</a> to try again.");
}
count--;
}, 1000);
});}
I expected that the redirect would happen before the countdown reached 0.
Unfortunately I've found that the script actually stops submission of the form until it's finished running.. Doh! Can anyone suggest any way around this?
A bit later:
Just to clarify after Praveen's question, I have a normal form on the same page with method post and various hidden inputs containing data to be posted on to another site. In the body tag of my page I have an onload statement submitting this form, like onLoad="document.forms['the_form'].submit()". (I realise that's probably better done in a jQuery load event.)
You can always submit using $.get or $.post
Then when the callback is run, you can redirect or do as you like.
Doing it manually like this gives you more control as to what to do with the data returned
and if you would like to redirect to a different page after.
//html
<input type="text" name="firstname" value="some text" />
//jquery
$.get("mypage.php", { firstname: $("input [name=firstname]").first().val() },function(data){
//redirect, show popup, do as you like since the form has been submitted
//data contains the results that were printed
});
I read this question 3 times and still didn't understand it.
Also I didnt find any redirection code or other mechanism to redirect ( you have said I expected that the redirect.. )
I also didnt find submission code , you have said script actually stops submission...
I think you should show more or explain more.