Activate web form with slider using javascript
Posted on 2011-11-07 15:43:21
by Geert Vandeweyer
Since captchas can be a pain to decipher, I wanted to use a different type of form activation. I used the carpe_slider package from Tom Hermansson to create an alternative to captchas. You can see the slider in action in the comments section at the bottom.
1. Javascripts
Add the carpe_common.js and carpe_slider.js script to the end of the <body>. Adding javascript to the end of your page speeds up loading.
Also add the following code to the end of the page:
function checkSlider(valueId, buttonId,buttonName, buttonValue,sliderId,randval) {
// get current position of the slider
var value = Math.round(document.getElementById(valueId).value);
// show submit button if slider is all the way to the right & hide the slider.
if (value == randval) {
document.getElementById(buttonId).innerHTML = '<input type=submit class=button value=\''+buttonValue+'\' name=\''+buttonName+'\'>';
document.getElementById(sliderId).style.display = 'none';
}
}
2. Add the slider to the page
In the form, I add the following code to show the slider:
// get random maximal slider value and store in session
$randval = rand(5,700);
$_SESSION['randval'] = $randval;
// print out the slider, attach event listeners to the slider.
echo "<div onmouseup=\"checkSlider('myshouttarget','submitbutton','NewComment','Submit','shoutslider','$randval')\" onkeyup=\"checkSlider('myshouttarget','submitbutton','NewComment','Submit','shoutslider','$randval')\" onmouseout=\"checkSlider('myshouttarget','submitbutton','NewComment','Submit','shoutslider','$randval')\" id='shoutslider'>";
echo "<p>Drag the slider to the right to active the form: <br/>";
echo "<input class='carpe-slider target-myshouttarget from-0 to-$randval' id='myshoutslider' name='myshoutslider' type='text' />";
echo "<input name='myshouttarget' id='myshouttarget' style='display:none;' value='0' tabindex='-1' />";
echo "</div>";
// prepare a span to contain sumbit button
echo "<p id=submitbutton></p>";
This diplays the default slider, see the carpe_slider documentation for changing the layout of the slider. After the slider is dragged to the right completely, the javascript will hide the slider and show the submit button.
3. Extra check in submission
I built in some extra checks in the submission process. First, the name of the submit button has to be correct, next, the value of the slider should be the maximal value of the slider, wich is different on every submission. This means that the slider has to be moved by a user to create the submit button. Next, the name of this submit button must be correct, and finally the slider value needs to match a session variable.
I sure hope this will prevent spam entries on these pages. I'll post back after some time to evaluate :-)
if (isset($_POST['NewComment'])) {
$myrand = round($_POST['myshouttarget']);
$mysessrand = $_SESSION['randval'];
if ($myrand != $mysessrand) {
// no match. exit
exit('bad form validation');
}
}
javascript, PHP, spam
Comments
Loading Comments