On condition fire all events, else fire none

Question

I am working on top of existing JavaScript (that I cannot alter) and need to check something on submit.

If my condition is true, no other submit handlers should be applied.

If my condition is false, all other submit handlers shall be applied.

What I have tried so far:

var form = jQuery('form'),
that = this,
events = $._data(form[0]).events['submit'];

form.off('submit');
form.on('submit', function (event) {
    if (that.myCondition()) {
        event.preventDefault();
        event.stopPropagation();
        return false;
    } else {
       console.log('Call these: ', events);
    }
});

Now eventsis always empty at that point.

It is empty as soon as I call form.off('submit')and I didn't get it to work with deep cloning either.

Update: In this jsfiddle you see that both events are fired. I want one (preferably one that i add LAST) to be fired and prevent the other one from firing.

Duplicate of http://stackoverflow.com/questions/12252378/capturing-a-form-submit-with-jquery-and-submit I believe — mplungjan, May 08 '15 at 15:53
wouldn't `return true;` in the `else{}` bit do the trick for you? — Ted, May 08 '15 at 15:55
@Ted No, apparently not. The `return false;` doesn't do teh trick for me either and the simple `return true;` wouldn't the neccessarily deleted handlers. — Andresch Serj, May 08 '15 at 16:03
Are there inline `onsubmit` or `onclick` attributes? Can modify those if needed. Also is form inserted by ajax ? — charlietfl, May 08 '15 at 16:04
@mplungjan No it isn't. I know how to prevent a submit on a form. But the order in wich other submit handlers act is the problem for me. — Andresch Serj, May 08 '15 at 16:04
@AndreschSerj Not certain interpret requirement correctly at _"I want one (preferably one that i add LAST) to be fired and prevent the other one from firing."_ ? At jsfiddle http://jsfiddle.net/bkdm7fzt/ `form.off('submit');` appear to have no effect as `form.on('submit', fn);` follows ? Both `submit` events have `true` for condition ? What is example of "condition" as it would be evaluated at `js` ? — guest271314, May 08 '15 at 16:21
@guest271314 In my update you see what i want. One of the on submit handlers must be able to prevent the other. http://jsfiddle.net/bkdm7fzt/1/ — Andresch Serj, May 08 '15 at 16:25

score 1 · Accepted Answer · answered May 08 '15 at 16:28

If I got your requirement correctly, you can try a nasty hack like

//the counter is just to demonstrate any condition
var counter = 0;
$('form').submit(function (e) {
    console.log('master handler form');
    //if counter is a multiple of 2 prevent other handlers
    if (++counter % 2 == 0) {
        //stop other submit handlers attached to the form
        e.stopImmediatePropagation();
        //stop propagation and default behavior
        return false;
    }
});

var form = jQuery('form'),
    events = $._data(form[0]).events['submit'];

var tmp = events.pop();
events.unshift(tmp);

Demo: Fiddle

guest271314 · Answer 2 · 2015-05-08T17:35:57.933

Try utilizing $.Callbacks("stopOnFalse")

var callbacks = $.Callbacks("stopOnFalse");
// if `input.val().length === 0` `fn1` not called
var fn2 = function fn2(event) {
    // `this`:`form` element
    // console.log(this); 
    event.preventDefault();
    event.stopPropagation();
    console.log('1st submit called:', input.val().length);
    if (input.val().length === 0) {
        // `input.val().length === 0`
        // do stuff , do not do stuff ? here
        output1.html('Input needed!');
        // reset `output2` `html`
        output2.html("...");
        // return `false` to "stop" `callbacks` queue;
        // `fn1` not called
        return false;
    }
};
// if `input.val().length !== 0` , `fn1` called,
// else `fn1` not called
var fn1 = function fn1(event) {
    // do stuff 
    // call `event.preventDefault();` , here, if needed;
    // else call `output2.html('success!');` , submit form
    // event.preventDefault();
    console.log('2nd submit called:', input.val().length);
    output2.html('success!');
};
// add `fn2` , `fn1` to `callbacks` queue
callbacks.add(fn2, fn1);
// call both `fn2` , `fn1` if `input.val().length !== 0` ,
// else, do not call `fn1`
form.on('submit', function (event) {
    // `fire` `callbacks` `fn2` , `fn1` with context `this`:`form` ,
    // pass `event` as parameter to `fn2`, `fn1`
    callbacks.fireWith(this, [event])
});

jsfiddle http://jsfiddle.net/bkdm7fzt/3/

Sadly i can not utilize that since, as i mentioned there are form handlers added that i have no influence on :-( — Andresch Serj, May 18 '15 at 16:15

On condition fire all events, else fire none

2 Answers2