Stop onclick method running with jQuery

Question

I have a button similar to below

<button id="uniqueId" onclick="runMethod(this)">Submit</button>

What I'm trying to do is stop the runMethod from running, until after I've done a check of my own. I've tried using the stopImmediatePropagation function, but this doesn't seem to have worked. Here's my jQuery:

$j(document).on('click', '#uniqueId', function(event) {
    event.stopImmediatePropagation();
    if(condition == true) {
        // continue...
    } else {
        return false;
    }

    return false;
});

Note: runMethod basically validates the form, then triggers a submit.

`event.stopImmediatePropagation` works totally different.. Make use of `callback functions` here... — Guruprasad J Rao, Jun 14 '16 at 10:29
I have no control of the `runMethod` function, as this is part of the software I am using. So I need to build around it, I cannot modify it, or remove the onclick method. — Karl, Jun 14 '16 at 10:30
To stop current, you have to use `event.preventDefault()` and to stop bubbling `event.stopImmediatePropogation()` — Rajesh, Jun 14 '16 at 10:30
@Rajesh, I have tried both, preventDefault and stopImmediatePropogation — Karl, Jun 14 '16 at 10:30
Possible duplicate of [Prevent onclick action with jQuery](http://stackoverflow.com/questions/1756425/prevent-onclick-action-with-jquery) — Midas, Jun 14 '16 at 10:37

Angelos Chalaris · Accepted Answer · 2016-06-14T11:44:04.700

What you want to do, especially in the way that you want to do it, requires a some sort of workaround that will always be a bit fiddly. It is a better idea to change the way the button behaves (e.g. handle the whole of the click event on the inside of the jQuery click() function or something along those lines). However I have found sort of a solution for your problem, based on the assumption that your user will first hover over the button. I am sure you can extend that functionality to the keyboard's Tab event, but maybe it will not work perfectly for mobile devices' touch input. So, bear in mind the following solution is a semi-complete workaround for your problem:

$(document).ready(function(){
    var methodToRun = "runMethod(this)";    // Store the value of the onclick attribute of your button.
    var condition = false;                  // Suppose it is enabled at first.
    $('#uniqueId').attr('onclick',null);
    $('#uniqueId').hover(function(){
        // Check your stuff here
        condition = !condition;     // This will change to both true and false as your hover in and out of the button.
        console.log(condition);     // Log the condition's value.
        if(condition == true){      
            $('#uniqueId').attr('onclick',methodToRun); // Enable the button's event before the click.
        }
    },
    function(){     
        console.log('inactive');    // When you stop hovering over the button, it will log this.
        $('#uniqueId').attr('onclick',null);    // Disable the on click event.
    });
});

What this does is it uses the hover event to trigger your checking logic and when the user finally clicks on the button, the button is enabled if the logic was correct, otherwise it does not do anything. Try it live on this fiddle.

P.S.: Convert $ to $j as necessary to adapt this.

P.S.2: Use the Javascript console to check how the fiddle works as it will not change anything on the page by itself.

score 0 · Answer 2 · answered Jun 14 '16 at 10:32

0

Your problem is the submit event, just make :

 $('form').on('submit', function(e) {
     e.preventDefault(); 
 });

and it works. Don't bind the button click, only the submit form. By this way, you prevent to submit the form and the button needs to be type button:

 <button type="button" .....>Submit</button>

Assuming there's a form that is submitted when button is clicked.

answered Jun 14 '16 at 10:32

Marcos Pérez Gude

21,869
4
38
69

Just tried this, but had no luck. The button does have the correct type, but the onclick is still fired – Karl Jun 14 '16 at 10:35
But don't you remove the onclick attribute in button? – Marcos Pérez Gude Jun 14 '16 at 10:49
No, I'm unable to remove the onclick as this is part of the software I am using and it's used in other places. – Karl Jun 14 '16 at 10:52
So the easiest solution is remove the onclick attribute dinamically. `$(document).ready(function() { $('#uniqueId').removeAttr('onclick'); })` And then write the submit event with the `preventDefault()` method, and then call manually to `runMethod()` – Marcos Pérez Gude Jun 14 '16 at 11:01

score 0 · Answer 3 · answered Jun 14 '16 at 10:39

Try adding

event.cancelBubble();

Hence your code becomes:

$j(document).on('click', '#uniqueId', function(event) {
    // Don't propogate the event to the document


 if (event.stopPropagation) {
      event.stopPropagation();   // W3C model
  } else {
      event.cancelBubble = true; // IE model
  }



    if(condition == true) {
        // continue...
    } else {
        return false;
    }

    return false;
});

score -1 · Answer 4 · answered Jun 14 '16 at 10:30

-1

Your code is mostly correct but you need to remove J:

$(document).on('click', '#uniqueId', function(event) {...

You also need to remove the onClick event from the inline code - there's no need to have it there when you're assigning it via jQuery.

<button id="uniqueId">Submit</button>

answered Jun 14 '16 at 10:30

Henry Gibson

2,038
2
15
12

This is incorrect, I am using noConflict and binding to $j – Karl Jun 14 '16 at 10:31
To avoid j-query from conflicting with other libraries No-Conflict Mode `$j` is used. New thing for me.... – RanchiRhino Jun 14 '16 at 10:38

Stop onclick method running with jQuery

4 Answers4