I've been struggling with this for a while, and need some help.
I've managed to add a reCAPTCHA checkbox to my online form, but I'm stumped on what to do when it comes to the verification.
I've used the "Automatically render the reCAPTCHA widget" option as described in the Checkbox instructions.
But I'm getting stuck on the verification instructions.
My form code is pretty simple:
<form name="myForm" action="mail.php" onsubmit="return validateForm()" method="POST">
<div>
<label for="name">Name:</label><br /><input id="name" type="text" name="name" class="formthin" required />
</div>
<div>
<label for="email">Email:</label><br />
<input id="email" type="email" name="email" class="formthin" required />
</div>
<div>
<label for="message">Comments, Questions, Whatever:</label><br />
<textarea id="message" name="message" rows="4" cols="4" class="formbig" required></textarea>
</div>
<div>
<div class="g-recaptcha" data-sitekey="site-key"></div>
</div>
<div>
<input type="submit" value="Submit" class="formsubmit" />
</div>
</form>
I've added the following in between the "<head></head>" tags.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
So far everything looks good on the page.
For good measure, here is the code in the "mail.php" file:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent=" From: \n $name \n\n Message: \n $message";
$recipient = "my email address";
$subject = "Website Contact Form";
$mailheader = "From: $email \r\n";
$forward = 1;
$location = "url of thank you page";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
if ($forward == 1) {
header ("Location:$location");
}
else {
echo "Thank you message.";
}
?>
This is where I need help.
I'm not sure which of the three options for verification I should use, how to implement the choice, or where the code for the API Response should go.
For instance, if I use the first option, does the "g-recaptcha-reponse" POST parameter go inside my initial <form> tag? The notes on the API Request seems to indicate that I need a second POST method. I'm not sure how to combine or implement it with my current one.
Does the API Response code go in my "mail.php" file? Or in between "<script></script>" tags on my form page? (in the head or below the form?)
Where does my "Secret Key" come into play? I don't see any instructions on how to include it.
I've looked through the forum and found a previous question that seem to be related:
"Google reCaptcha v2 (Checkbox) Verification"
The original posted code looks very similar to mine. (both on the html page, and the php action script)
The reply was a second php script that looks like it includes the Secret Key, but with no instructions on where that php code should go. Do I place it in the file with the form? Is it added or does it replace the mail.php action script? And if it replaces the script, how is the response from the actual form handled?
Any help would be appreciated.
Thank you.
++++++++++++++++++++++++++
I have followed the instructions from the link sent by #Bazaim.
These are the steps I took:
Downloaded the "recaptcha-master" folder and added it to my website directory.
ran the "composer" installation scripts in my Terminal.
Moved the "composer.phar" file into the "recaptcha-master" folder.
Added the following to the "composer.json" file:
"require": {
"google/recaptcha": "^1.2"
}
Added the "require_once..." script to the bottom of my "mail.php" file like this:
setExpectedHostname('my-domain-name.com')
->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
// Verified!
} else {
$errors = $resp->getErrorCodes();
}
?>
So far so good. When I go to my form, and click the "checkbox" for I am not a robot, I am prompted to do the image identify thing and get the green "check" next to "I am not a Robot."
However, when I submit my form, my "mail.php" no longer functions. It tries to load in the browser window rather than send me an email.
In addition, the reCAPTCHA checkbox is not "required" to hit submit.
I got it to work. Here's what I ended up doing:
Removed the extra PHP script from my mail.php file. (the "require_once" content mentioned in the previous posts) My PHP script was working before I added that, so I wanted to get it back to a working version.
I tried to make the reCAPTCHA a requirement so I did another search and found instructions on adding javascript and css and added it to the code on my page. (this was one of the things I was trying to solve in my original post)
JavaScript:
window.onload = function() {
var $recaptcha = document.querySelector('#g-recaptcha-response');
if($recaptcha) {
$recaptcha.setAttribute("required", "required");
}
};
CSS:
#g-recaptcha-response {
display: block !important;
position: absolute;
margin: -78px 0 0 0 !important;
width: 302px !important;
height: 76px !important;
z-index: -999999;
opacity: 0;
}
Added to the <head></head> code on my contact page.
Bingo - everything is working.
I'm not sure if the verification information is actually being used. (The other thing I was trying to figure out in my original post) And now I'm not sure if it's actually necessary. reCAPTCHA is required in the form, the form is submitting.
Anyway, thanks to #Bazaim for the help and getting me on track.
Hope this helps anyone else who might be having problems with this.
Related
After wasting like 2 days with this problem i finally decided to post this here and hope someone can help me. I work with "iCheck" (http://icheck.fronteed.com/) but also tried similar libraries that work roughly the same way. I try to achieve fancy checkboxes in form of a button - a pretty common thing i guess.
Now with iCheck and the other libraries i tested i always have one problem: I build my code to send an AjaxRequest to work with the data provided in a form and then reset the form. That works pretty neat, except for these chechboxes. If i change them to the other state they are not initialized with (like from FALSE to TRUE) and reset the form the button visually stays on that state until you click it once again. I works like it should with "normal" checkboxes.
I rebuild a small testpage and put it into jsfiddle. Is this a bug or am i totally overseeing something there? Can someone explain to me why that happens and how to engage with this?
HTML:
<form id="form">
<input type="checkbox" class="check_test" name="test" value="1"><label>Checkbox 1</label>
<input type="checkbox" name="test2" value="1"><label>Checkbox 1</label>
<br/>
<button type="reset" onClick="this.form.reset"> Reset </button>
</form>
Javascript:
$(document).ready(function(){
$('.check_test').each(function(){
var self = $(this),
label = self.next(),
label_text = label.text();
label.remove();
self.iCheck({
checkboxClass: 'icheckbox_line-blue',
radioClass: 'iradio_line-blue',
insert: '<div class="icheck_line-icon"></div>' + label_text
});
});
});
https://jsfiddle.net/p80dctkv
Thank you in advance.
You can add js like this to remove checked ichek
$(":radio").prop('checked', false).parent().removeClass('checked');
I am trying to use jQuery validate for a form.
I have added
<script type="text/javascript" src="Scripts/jquery.validate.js"></script>
My form:
<form id="Main">
<asp:TextBox ID="Box" name="box" required runat="server"
</form>
At bottom of page
$('#Main').validate();
This works. Which is great. But if I remove the required attr and try say
$('#Main').validate({rules:{box:{required:true}}});
This does not work. For the life of me i cant figure out what I am doing wrong.
In the end I need that input to be required and numeric.
I tried adding 'number' as an attribute but that didn't work either.
some guidance would be great.
Thanks.
There are a number of validation plugins available, after some searching I think I found the plugin you're using based on the usage here.
I created a fiddle to demo how to make a field required and numeric ... click here for fiddle.
Based on the code you provided, it looks like you're only including the base validate.js library. You need to be sure to include the css file, and if you want to use some out of the box validations, such as number validations then you will also need to include the additional-methods.js file. All these files can be found HERE.
Here is the code from the fiddle above..
<form id="myform">
<input type="text" class="box" id="box" name="box">
<br/>
<input id="submit" type="submit" value="Validate!">
</form>
$(document).ready(function()
{
$("#myform" ).validate(
{
rules:
{
box:
{
required: true,
number: true
}
}
});
});
I want to show some flash message after completion of AJAX call. I am doing like this ..
Controller Action --
def subscribe()
{
def subscribe = new Subscriber()
subscribe.email = params.subscribe
if (subscribe.save())
{
flash.message = "Thanks for your subscribtion"
}
}
View Part --
Subscribe :
<g:formRemote onSuccess="document.getElementById('subscribeField').value='';" url="[controller: 'TekEvent', action: 'subscribe']" update="confirm" name="updateForm">
<g:textField name="subscribe" placeholder="Enter your Email" id="subscribeField" />
<g:submitButton name="Submit" />
</g:formRemote >
<div id="confirm">
<g:if test="${flash.message}">
<div class="message" style="display: block">${flash.message}</div>
</g:if>
</div>
My AJAX working fine but it is not showing me flash.message. After refresh page it displaying message. How to solve it ?
When you use ajax your page content isn't re-parsed, so your code:
<g:if test="${flash.message}">
<div class="message" style="display: block">${flash.message}</div>
</g:if>
will not run again.
So I agree with #James comment, flash is not the better option to you.
If you need to update your view, go with JSON. Grails already have a converter that can be used to this:
if (subscribe.save()) {
render ([message: "Thanks for your subscribtion"] as JSON)
}
And your view:
<g:formRemote onSuccess="update(data)" url="[controller: 'TekEvent', action: 'subscribe']" name="updateForm">
<g:textField name="subscribe" placeholder="Enter your Email" id="subscribeField" />
<g:submitButton name="Submit" />
</g:formRemote >
<script type='text/javascript'>
function update(data) {
$('#subscribeField').val('');
$('#confirm').html(data.message);
}
</script>
You have couple options,
First you can try to return the message from your controller in a form of json or a map and render it on the screen your self using javascript libraries, which is a bit different if you want to use Grails ajax tags.
The other option is using a plugin like one-time-data , which
Summary A safe replacement for "flash" scope where you stash data in
the session which can only be read once, but at any point in the
future of the session provided you have the "id" required.
Description
This plugin provides a multi-window safe alternative to flash scope
that makes it possible to defer accessing the data until any future
request (so long as the session is preserved).
more
Hope it helps
I am trying to implement something like this.
http://app.maqetta.org/mixloginstatic/LoginWindow.html
I want the login page to load but if you click the signup button then an ajax will replace the login form with the signup form.
I have got this to work using this code
dojo.xhrGet({
// The URL of the request
url: "'.$url.'",
// The success callback with result from server
load: function(newContent) {
dojo.byId("'.$contentNode.'").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});'
the only problem is the new form just loads up as a normal form, not a dojo form. I have tried to return some script with the phaser but it doesnt do anything.
<div id="loginBox"><div class="instructionBox">Please enter your details below and click <a><strong>signup</strong>
</a> to have an activation email sent to you.</div>
<form enctype="application/x-www-form-urlencoded" class="site-form login-form" action="/user/signup" method="post"><div>
<dt id="emailaddress-label"><label for="emailaddress" class="required">Email address</label></dt>
<dd>
<input 0="Errors" id="emailaddress" name="emailaddress" value="" type="text"></dd>
<dt id="password-label"><label for="password" class="required">Password</label></dt>
<dd>
<input 0="Errors" id="password" name="password" value="" type="password"></dd>
<dt id="captcha-input-label"><label for="captcha-input" class="required">Captcha Code</label></dt>
<dd id="captcha-element">
<img width="200" height="50" alt="" src="/captcha/d7849e6f0b95cad032db35e1a853c8f6.png">
<input type="hidden" name="captcha[id]" value="d7849e6f0b95cad032db35e1a853c8f6" id="captcha-id">
<input type="text" name="captcha[input]" id="captcha-input" value="">
<p class="description">Enter the characters shown into the field.</p></dd>
<dt id="submitButton-label"> </dt><dd id="submitButton-element">
<input id="submitButton" name="submitButton" value="Signup" type="submit"></dd>
<dt id="cancelButton-label"> </dt><dd id="cancelButton-element">
<button name="cancelButton" id="cancelButton" type="button">Cancel</button></dd>
</div></form>
<script type="text/javascript">
$(document).ready(function() {
var widget = dijit.byId("signup");
if (widget) {
widget.destroyRecursive(true);
}
dojo.parser.instantiate([dojo.byId("loginBox")]);
dojo.parser.parse(dojo.byId("loginBox"));
});
</script></div>
any advice on how i can get this to load as a dojo form. by the way i am using Zend_Dojo_Form, if i run the code directly then everything works find but through ajax it doesnt work. thanks.
update
I have discovered that if I load the form in my action and run the __toString() on it it works when i load the form from ajax. It must do preparation in __toString()
Firstly; You need to run the dojo parser on html, for it to accept the data-dojo-type (fka dojoType) attributes, like so:
dojo.parser.parse( dojo.byId("'.$contentNode.'") )
This will of course only instantiate dijits where the dojo type is set to something, for instance (for html5 1.7+ syntax) <form data-dojo-type="dijit.form.Form" action="index.php"> ... <button type="submit" data-dojo-type="dijit.form.Button">Send</button> ... </form>.
So you need to change the ajax contents which is set to innerHTML, so that the parser reckognizes the form of the type dijit.form.Form. That said, I urge people into using a complete set of dijit.form.* Elements as input fields.
In regards to:
$(document).ready(function() {});
This function will never get called. The document, youre adding innerHTML to, was ready perhaps a long time a go.
About Zend in this issue:
Youre most likely rendering the above output form from a Zend_ Dojo type form. If the renderer is set as programmatic, you will see above html a script containing a registry for ID=>dojoType mappings. The behavior when inserting <script> as an innerHTML attribute value, the script is not run under most circumstances (!).
You should try something similar to this pseudo for your form controller:
if request is ajax dojoHelper set layout declarative
else dojoHelper set layout programmatic
i'm learning it, but i cant find what's wrong in this!
i want the div2 to get data from the form in div1, called formulario.
i would like to know which item is selected and which button was clicked.
main html file:
<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function sendf(formul, divi, php)
{
var params = Form.serialize($(formul));
new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
}
</script>
</head>
<body>
<div id="div1">
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');">
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>
<div id="div2" style="background: blue;">
contenido div2
</div>
</div>
</body>
</html>
the php file, prodiv1.php:
<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);
if (isset($_POST))
{
foreach ($_POST as $key=>$value)
{
echo $key.'=>'.$value."<br>";
}
}
echo "select: ".$_POST['lista'];
if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>
i've tried a lot of things, and seen that it could be done with event observers, httprequests and such, but what i need is quite easy, and probably there's an elegant way to solve it...
i thank in advance any help!
have a nice day.
guillem
if you dont need to actually process the form contents in some way then you have no need to use Ajax to pass to a PHP script. Depending on what exactly you wanted to display in div 2 you could do something as simple as this:
function sendf()
{
var listvar = $('lista').value;
$('div2').update('select menu value was ' + listvar);
}
This is obviously missing quite a lot of detail and can be massively improved but it should highlight the fact that AJAX is not required.
Edit Looking at the rest of the code you have posted, is AJAX really required for this? surely you are just updating the existing page with data already present on the page, the server has no real part to play in this?
Sorry to dive into jQuery again, but this should allow you to get the values into "div2" without an ajax request.
$(document).ready(function() {
$("input").click(function(e) {
$("#div2").html($(this).attr("id")+" clicked<br />");
updateList();
});
});
function updateList() {
$("#div2").append($("#lista").val() + " selected");
}
In plain English this code says "if an input element is clicked, update the value of div2 with the input variables id, and append the selected value from the list to the result". Hopefully that makes sense to you :)
If you need an easy, elegant way to solve this with AJAX, use the jQuery library's ajax and post methods. For more information take a look here, it will significantly cut down on the size and complexity of your code.