Updating because I have changed the implementation to something (somewhat) more successful.
I'm trying to implement the Invisible Recaptcha in our system. We are using dynamically generated forms, so, I'm going the route of programmatically invoking the challenge. I have this code to get the API:
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
Just before drawing my form, I inject the captcha div:
form.fields.push({
html: '<div id="g-recaptcha-div" class="g-recaptcha" data-sitekey="<mykey>" data-callback="myCallback" data-size="invisible"></div>',
type: 'html'
});
When my form is drawn, I then call the render function:
recaptcha_id = grecaptcha.render(
'g-recaptcha-div',
{
'data-callback': _settings.form.submit
}
);
When the form appears, he "protected by reCAPTCHA" logo box shows up over my submit button.
In my submit function, I do some form validation, and then 'execute' the reCaptcha:
grecaptcha.execute(recaptcha_id);
And then continue on with my submit. So far, exactly once I have seen the reCaptcha challenge ('pick out images with a storefront'), at which point the g-recaptcha-response value was inserted into my form submission, and I see it in the parameters passed to my PHP function.
But, most of the time I do not see the challenge, and there is nothing in the g-recaptcha-response parameter, so my PHP validation fails. A couple of questions:
1) My assumption about the challenge not showing up all the time is that the Google logic only requires it when "conditions are right". If that is the case, what am I to do when it doesn't show up, at which point the g-recaptcha-response parameter is there with no value - do I just ignore it at that point, assuming that no value means ok?
2) Is there any way to "force" the challenge to show up, if only to make me feel better about the whole thing working, and to test my handling of a response?
3) I have tried calling grecaptcha.getResponse(recaptcha_id) after grecaptcha.execute(recaptcha_id), but that doesn't return anything. It would be easier/better for me to process the reCaptcha in my client.
Any answers appreciated. I may resubmit this as a new 'Question' since this one has been around a while.
Related
I would like to auto-submit a form on my page after a short delay based on a variable value (which is present in the URL string, as well as declared by another JS script). Not sure what the best practice way to do this would be?
MY PAGE URL:
http://www.domain.com/mypageaddress?var_1=value1&var_2=value2&var_3=Returning%20Applicant&var_4=value4
So when var_3=Returning%20Applicant , the form should submit without user input (and I would love a 1-second delay built in before that auto submit). Another script on the page also declares a JS variable for that same condition that might be easier to work with than the query string - JS var/value pair returningapplicant=1 is the same as the URL string var_3=Returning%20Applicant that I'm trying to target. This is powered by a third party tool which I don't 100% understand, but they say that this JS variable can be referenced.
I would love some sample code that I could try for this function. Any help much appreciated and here's the extra info that will probably be needed for the JS script:
FORM ACTION URL
<form method="post" action="https://www.tfaforms.com/responses/processor" class="hintsSide labelsLeftAligned" id="tfa_0">
CURRENT FORM SUBMIT ELEMENT
<div class="actions" id="tfa_0-A"><input type="submit" class="primaryAction" value="Next"></div>
-in js
Wait for the window to load.
document.onload = function() {}
Evaluate the url with the condition/s you describe. /
If the condition/s are met submit the form after waiting one second.
if (window.location.href.match('var_3=Returning%20Applicant')) {
setTimeout(function() {
//submit form
document.forms["your-form"].submit();
},1000);
}
Are you doing anything if something doesn't pass the conditions?
Your asking a whole bunch of stuff at once but that's the gist of what you're looking to do. I'd probably parse the url params and evaluate them individually, validate the form, etc... if I were serious about this. Hopefully this can get you started. Good luck.
I have a form in a classic version with a submit button
<form action="" name="frm" mathed="">
<input type="submit" value="submit">
</input>
I have enabled a jquery command in order to track in adobe anlytics site that the submission of form was succesfull and have some values with this
$("#frm").submit(function(){
s.linkTrackVars="pageName";
s.pageName = 'test_form';
s.tl(true,'o','link', null,'navigate');
});
How can I confirm in omniture (adobe analytics) side that the submission was successful and se the results?
Firstly, you mention wanting to track that the form has been successfully submitted. I'm not sure how you define "successful" but commonly that means that the form passed validation (e.g. all form fields filled out, proper format, etc.). However, you currently have the Adobe Analytics (AA) tracking implemented to pop on the submit event, which may not necessarily mean the form has actually passed whatever validation you may have in place.
Secondly, the only AA variable you are setting is pageName, which is one of the few AA vars you should usually never set (override) on s.tl() calls. Generally speaking, pageName is set for a page view which is done with an s.t() call. Then, events/actions that happen on the page are tracked with an s.tl() call, and AA code already automatically includes the current page's pageName value in that request. Within the reports, AA then associates the activity with that page name, but disregards it as far as an actual page view happening.
Now, it may be that you want to track successful form submissions as a separate page view, in which case, you should indeed set pageName with a new (unique) value, but you don't need to "register" it in linkTrackVars and you should be using s.t() not s.tl() to trigger it. Ideally though, you should place it on a real "thank you" / "confirmation" page (though it may be that you don't actually have that).
So what should you pop then? If you go the "track it as a separate page view (s.t()) call with a unique pageName value, for your purposes that may be enough. You can look at your pages report and see your value show up and how many times a visitor hit it.
But in general, the more common method of form tracking involves at least one eVar and two events. This is the common basic form tracking setup.
I use the following AA var/events in this example
eVar1- This signifies a name for the form. Expiration should be set to expire on event2.
event1 - This signifies form view happened
event2 - This signifies successful form complete happened.
On form view
On form view, your on-page code should look something like this in principle:
<script src='s_code.js'></script>
<script>
s.pageName="unique page name"; // leave blank if you want AA to default to using URL in pages report
s.eVar1="unique descriptive form name here";
s.events="event1";
s.t();
</script>
On successful form submit
Ideally, you should have a "thank you" / confirmation page that the visitor is redirected to upon successful form completion, and on that page, you should have this in principle:
<script src='s_code.js'></script>
<script>
s.pageName="unique page name"; // leave blank if you want AA to default to using URL in pages report
s.events="event2";
s.t();
</script>
If you really want to do it your method (attaching to submit event), it'd look like this (p.s.- according to your posted code, your form doesn't have an id='frm' so the selector won't actually work, but I'm only addressing the actual AA code here):
$("#frm").submit(function(){
s.linkTrackEvents="event2";
s.linkTrackVars="events";
s.events="event2";
s.tl(true,'o','form submit');
});
Or, if you want to track it as a separate page view but triggered on submit (note: this will also record any other vars you already have set from initial page view, so you may need to do something about that (e.g. set different values for them too, or blank them out, etc..) depending on the intended purpose of any other vars you have):
$("#frm").submit(function(){
s.pageName="unique page name"; // leave blank if you want AA to default to using URL in pages report
s.events="event2";
s.t();
});
But as I mentioned above.. this may or may not accurately signify that a visitor actually successfully completed the form..
What report to look at
Okay so with the example above, you can then look at eVar1 report and select event1 and event2 as your metrics. This will show you how many people viewed and then went on to complete the form. If you have more than one form, you can use a different value in eVar1 and the report will show views/completes for each form.
First question after starting with netbeans and wamp server 2 days ago. Only have some desktop vb background, so my jargon may be off. In vb I would want to set the focus on a control.
I have a long, as in a lot of scrolling, webpage form in html that displays the way I want it. There are about 300 controls, almost all checkboxes.
When the Submit button is clicked at the bottom of the form I want to find any incomplete data, scroll the page to that control and give the user a message so I don't insert unfinished records.
How do I do that?
I think you need to validate data with javascript and with a function to do scroll. Check this:
scroll to div ajax/javascript
In the form, add the 'required' attribute to each input tag.
EX:
<input type="text" required>
When the form is submitted, the first input tag with the 'required' attribute will be scrolled to, and the user will be notified.
What you are looking for is called validation. You should validate data on the server with PHP to make sure that the data meets your defined criteria (since the data could come from a manipulated form and users can deactivate javascript). You should also look into escaping data, for example with mysqli_real_escape_string to prevent SQL injection (an attack where a malicious user enters SQL statements in your form to alter/expose data in your database). And you should sanitize your data.
But that is all server-side. What you also want is to have a good user experience and not even send data to the server unless is is valid. This is done with javascript on the client side. The upside is: Immediate feedback without a page load. But it has little to do with security since it's easy to manipulate that or turn javascript off.
I would recommend using jQuery and then a plugin like jQuery Validation. And for the scrolling part you could use jQuery scrollto. You could combine those two with a callback from jquery validation. For example (just a quick and dirty example):
$(".form-selector").validate({
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$("div.error span").html(message);
$("div.error").show();
// Now scroll to the first error message
var first_element = validator.errorList[0].element;
$(window).scrollTo(first_element);
} else {
$("div.error").hide();
}
}
});
But the best thing would be to start with a jQuery tutorial and then dig into that.
I'm hoping there is a simple solution to this, or else its possible AJAX time!
I WAS using ClickBank. I had a simple button on my page. That sent the form data to a script, I processed the data, and then added a redirect at end of script to jump to the "pay" link. Nice n' easy
But now I'm switching to "Click2Sell" ... and they have a direct href to their site.
Now I COULD use javascript to read the form data, place it into their "cp_" prefix, and create a super long (about 400 chars) query string and send that to their server, then re-read the data at the IPN stage ...
?country=UK&area=essex&desc=This is the data entered by the user 'whatever'
(but that leads to a little fact that certain parts might need to be escaped(?) such as the spaces and the " ' " or whatever other symbol they enter)
So I devised this method:
<javascript>
function send_data(){
document.user.submit();
return true;
}
</javascript>
<div name="noshowdiv"><object name="noshow"></object></div>
<form method="post" target="noshow" name="user">
<input type="text" name="country">
<input type="text" name="area">
<textarea name="desc"></textarea>
</form>
<img src="xxx" onclick="return send_data();">
In a nutshell, when the button is clicked, it jumps to the function, and submits the form data to my script, and then returns to the hyperlink to submit the second form via the hyperlink.
Two problems: Firstly, the data returned by my script is opening in a new tab rather than the <div>, (I suspect 'cos the submit option loses track of the sending window) and also, I need to get a response from my script which I can then append to the href link.
For example, if the form records the user's data on line 5 on my server, the script will return "id=5" I would then make the hyperlink "click2sell.asp?cp_id=5"
As I've said, I suspect this is a job for Ajax and a HttpRequest ... which is a whole new area to me. Any advice?
For the first problem, it opens a new tab because you have target="no-show" on your form.
For the second problem, if you want to use Ajax, I recommend you use jQuery, it will simplify a lot of the code.
But the best option is probably that you completely remove the direct link to click2sell, and just add a submit button to your form. Post the form to your site, which will store whatever info it needs, assigns an ID, and builds the click2sell URL with the ID in one of the parameters, and redirect to it.
Now how you would do that depends on what server-side language you use.
(I think) I have managed to find a work around, which was using the first option to reconstruct the href link. I couldn't iterate through the form as there are values that don't need to be forwarded. First I get the value, load it into a variable, then use an encode function I discovered online, and then reassign to the form ...
var cp_cc=document.getElementById('cc').value;
var cp_cs=document.getElementById('cs').value; // plus 10 other values
var str='&cp_cc='+encodeURIComponent(cc)+'&cp_cs='+encodeURIComponent(cs)+ // etc
var send_str=document.getElementById('c2s_bn_lnk_36288').href;
document.getElementById('c2s_bn_lnk_36288').href=send_str+str;
The "no-show" was a slip up in my typing! Alas, the answer given above wouldn't work as the Click2sell button also includes two calls to external JS files - and they give you no idea what they do, but is something to do with initializing the button, (it passes the "36288" to the script to do ???). And whilst using "Location: ..\n\n" on my server would redirect to their site, it wouldn't action whatever those external files do. (OK, so I didn't give the full facts, but I didn't want to increase the post size with data I felt didn't relate to problem)
** Now got to amend the listening scripts such that rather than set the ID number up front then jump to C2S, it now waits for C2S to send the data back to me and then sets up the database!!
My page conisits of x amount of forms. One for each database entry. The user can change the data and save the individual item back to the database.
But where I am stuck is with a SAVE ALL button. Can you post multiple forms?? I am pretty certain you cannot with php, so I'm looking at javascript to solve my problems. Specifically:
document.forms.submit();
All that is going on is happening on the same page (i.e. when a form is submitted it puts a value at the end of the URL (foo?delete=true), and there is php at the top of the page which does something like: if delete is true -> delete field... else carry on as normal
My brain is saying I should do something like: (where $size is a count of how many forms there are)
<p onclick="saveAll('.$size.')">saveall</p>
and the javascript function:
function saveAll(size) {
for(i=0;i<size;i++)
{
document.forms[i].submit();
alert(i); // for testing purposes
}
}
The result of this was that the page started to refresh, then a popup with "0" came up, then the page refeshed and nothing else happend.
Is what I need to do even possible? If so, hoooww?
Thanks
I see 2 ways to escape this situation:
Put all your fields to one form
Submit your forms using AJAX and after last form submition is complete go to next page if needed.
But are all forms in the same page???
If yes I think the only way out is the ways suggested by Konstantin Likhter.
Otherwsie place each form in an IFRAME, then place all these IFRAMEs in the same main page, then using your code from the main page you can submit all the forms at once.