How to make a button clickabled when hovered over
Question
This question is going to sound strange to many of you. I need a button where it can't be triggered by a click. That means it won't do an action. Like if the form attribute action is set to something like next.html the click won't cause it to go to the next page.
And when the user hovers over the button, it can go to the next site. The reason why I am doing this is because a bot can submit data without hovering over the button . I am hoping this will prevent bots from submitting anything into my site.
I don't really have any code, but is there any way to do this in Javascript/jQuery?
If this confusing please ask more questions in the comments and I will try to answer to the best of my capabilities.
4 answers
solution1
1 2016-10-11 17:02:37
- Bots search for the
<form>element - Bots query for the form's
actionvalue
Bots won't follow your form action if there's no form in your page. If that might sound strange:
- Create your entire form using JS ( No form? No bots. )
Either way (specially if you care about noJS visitors) you need to validate your form
- on server side (that's what matter the most)
- on client side (JavaScript; notify your users if they forgot to fill something - typos)
Here you can find an approach example
Why your hover approach/intent is bad:
- You'll be only messing with UI creating a bad UX. Nothing more.
- The form is already there on the page revealing all what a bot needs.
- The bot does not need any button to submit your form.
- Some users might use the TAB key to focus the SUBMIT button - so there's no hover involved whatsoever, just a poor form that does not work as it should.
solution2
1 ACCPTED 2016-10-11 17:36:50
Now I am not sure how effective this technique would be at blocking bots. If you still want to give it a go, I'd do something like this:
HTML:
<form class="form" action="1.php" type="post">
<input type="text">
<input class="submitbutton" type="submit">
</form>
Javascript/jQuery:
var $form = $('.form'),
$btn = $('.submitbutton');
// Disable submit button on page load
$btn.prop('disabled',true);
// Reactivate submit button on form hover
$form.hover(
function(e){
e.stopPropagation();
$btn.prop('disabled',false);
}, function(e){
e.stopPropagation();
$btn.prop('disabled',true);
}
);
I put together an example at JSFiddle.
solution3
0 2016-10-11 16:52:03
In general, clicking the button should submit the form. If you want to force the issue, I think you should try to disable the button first.
<span style="padding: 8px; background: red;" onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>
as provided in the answer here:
solution4
-1 2016-10-11 17:10:53
it seems your question is navigating to another page without clicking a button.
<html>
<head>
</head>
<body>
<button onmouseover="go()" id="button">hii</button>
<script>
var anchor=document.createElement("a");
var button=document.getElementById("button");
anchor.href="alarm2.html";
function go()
{
button.onmouseover= anchor.click();
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.