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.

@showdev No. I need it where the action is available when the user hovers over the button. — BoeNoe, Oct 11 '16 at 16:46
Skip every thought of stopping bots client side, stop them server side. You should always, always, always validate forms server side — Asons, Oct 11 '16 at 16:46
A bot might post directly to your server-side script, avoiding your form altogether. I have, however, had some success with [honey pots](http://stackoverflow.com/questions/36227376/better-honeypot-implementation-form-anti-spam). — showdev, Oct 11 '16 at 16:48

score 1 · Answer 1 · edited May 23 '17 at 11:48

Bots search for the <form> element
Bots query for the form's action value

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.

score 1 · Accepted Answer · answered Oct 11 '16 at 17:36

1

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.

answered Oct 11 '16 at 17:36

agrm

3,735
4
26
36

1

@BoeNoe **Bad** for multiple reasons. If if a user uses the TAB key to move trough the form Action elements. Also will not work for bots. **A bot does not needs JS at all.** and will still submit your form!! Here you're just messing with UX. – Roko C. Buljan Oct 11 '16 at 20:54
@RokoC.Buljan Ok, fine. I get your point. I thought this would work for some reason. – BoeNoe Oct 11 '16 at 22:07
1

I have to agree with @RokoC.Buljan. This will probably cause more problems for your users than it will actually block bots from submitting your form. Now as you're using javascript anyways, I guess your best bet would be to implement some sort of CAPTCHA script :-) – agrm Oct 13 '16 at 18:20

score 0 · Answer 3 · edited May 23 '17 at 12:00

0

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:

Javascript: enable/disable button with mouseover/mouseout

edited May 23 '17 at 12:00

Community

1
1

answered Oct 11 '16 at 16:52

Neo

3,309
7
35
44

But I don't want to disable the button. I just want it to be able to do nothin until a button is hovered over. – BoeNoe Oct 11 '16 at 16:53
It seems that disabling the button would make it do nothing. No? – showdev Oct 11 '16 at 16:55
@showdev I want it where the `action` attribute is not set until the user hovers over the form. – BoeNoe Oct 11 '16 at 19:16
The answer you accepted is essentially enabling and disabling the button. Glad you found an acceptable to you. – Neo Oct 11 '16 at 19:34

score -1 · Answer 4 · answered Oct 11 '16 at 17:10

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>

Wouldn't it be easier to simply trigger `window.location.href='alarm2.html'` rather than simulating a click on a generated anchor element? That being said, I don't really see how this solution answers the question asked by BoeNoe. — agrm, Oct 13 '16 at 18:25

How to make a button clickabled when hovered over

4 Answers4