Submit a form with mouse middleclick button

Question

I'm working on a system and I want to make the system easier to use. I have few forms on a page and huge tables in each. I'm not good at JS so any advice would be appreciated.

@asprin Anyone with a desktop. Most external mice still have a scroll wheel. — Bailey Parker, Aug 01 '12 at 07:55
@PhpMyCoder True, but I assume majority would use that for only scrolling purposes. I doubt that they would even know it is clickable — asprin, Aug 01 '12 at 07:56
@asprin They probably wouldn't. But the power users would appreciate a little note at the top: "Tip: Middle click to submit the form quickly" — Bailey Parker, Aug 01 '12 at 07:57
@DainisAbols that doesn't achieve the effect I'm looking for. 10x anyway — Martin, Aug 01 '12 at 08:08

Rodik · Accepted Answer · 2012-08-01T08:22:54.463

7

Use a click event listener:

document.body.addEventListener('click', function(e){
    if (e.button == 1){
       document.formname.submit();
    }
});

EDIT:

As per the new jQuery tag, it's slightly faster:

$('body').click(function(e){
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){ 
     // IE exception thanks to @Elias Van Ootegem
     $('form.myForm').submit();
   }
});

edited Aug 01 '12 at 08:22

answered Aug 01 '12 at 08:03

Rodik

4,054
26
49

1

Be weary: [different browsers, different numbering](http://www.quirksmode.org/js/events_properties.html): IE thinks the middle mouse button should be referred to as button #4 +1 for using pure JS in absence of jQuery tag – Elias Van Ootegem Aug 01 '12 at 08:14
Why should you not use jQuery, i've never had any problems? – Lemex Aug 01 '12 at 08:14
2

@LiamMcCann: No jQuery tag, so don't assume the OP is using it – Elias Van Ootegem Aug 01 '12 at 08:16
Fair does, would just trying to help simiplify the problem, good point though – Lemex Aug 01 '12 at 08:16
Added a jq tag. @EliasVanOotegem +1 – Martin Aug 01 '12 at 08:19
Thanks for noticing guys, i was indeed paying extra care not to use jQuery, and it was indeed hard =) people forget how to use JS after using jQuery – Rodik Aug 01 '12 at 08:19

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

1

Triggering onclick event using middle click

THE Above link will help.

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

The first line of jQuery allows it to work on the current line page, 'click' its telling it what event it has to listen for, and when the event is called it calls the function defined with the parameter e,

As it is the middle click you are looking for do a if statement to see what has been pressed, in your case you want which to equal 2.

Now as there may be some default actions set for this key, do e.preventDefault() so you able able to use your own code.

Al tough i would recommend using the enter key to submit a form as this is the everyday way of doing it.

I would recommend reading this aswell: http://unixpapa.com/js/mouse.html

edited May 23 '17 at 11:55

Community

1
1

answered Aug 01 '12 at 08:06

Lemex

3,772
14
53
87

-1 for using a library where it doesn't ask for it in the OP and for using [the old](http://stackoverflow.com/questions/5772018/jquery-add-event-handler/5772031#5772031), [*very* slow](http://jsperf.com/jquery-live-vs-delegate-vs-on) and [deprecated](http://api.jquery.com/live/) `.live()` function. – PeeHaa Aug 01 '12 at 08:16
Since OP has changed the tags -1 for using the old `.live()` function :-), could you please remove the `.live()` function from your answer and update it with `.on()` so I can revert my downvote? – PeeHaa Aug 01 '12 at 08:18
Ok, also updated with JS alternative,explanation and compatibility information within the link – Lemex Aug 01 '12 at 08:19

Submit a form with mouse middleclick button

2 Answers2