Prevent submit button with onclick event from submitting

Question

I want to prevent a submit button with onclick event from submitting:

$j('form#userForm .button').click(function(e) {
    if ($j("#zip_field").val() > 1000){
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
        e.preventDefault();
        return false;
    }
});

This is the submit button:

<button class="button vm-button-correct" type="submit"
 onclick="javascript:return myValidator(userForm, 'savecartuser');">Opslaan</button>

It will show the "alert" function and also removes the onclick event, but the form is submitted anyway. Manually remove the onclick event before submitting will solve the problem. However this is core functionality of and I dont want to remove it.

EDIT:

It's definitely caused by the onclick selector.. How can I force my jQuery script to instantly reload the onclick event? adding before jquery code: $j('form#userForm .button').attr('onclick',''); will solve issue.. however my validation won't work an anymore...

Chiliad

You should really do this in the submit handler of the form.. if you hit enter when the form has focus.. it will trigger the submit handler and not your click therefore your validation will get bypassed – Everard

Answer 1

You'll need to add the event as a parameter:

$j('form#userForm .button').click(function(event) { // <- goes here !
    if ( parseInt($j("#zip_field").val(), 10) > 1000){
        event.preventDefault();
        $j('form#userForm .button').attr('onclick','').unbind('click');
        alert('Sorry we leveren alleen inomstreken hijen!');
    }   
});

Also, val() always returns a string, so a good practice would be to convert it to a number before you compare it to a number, and I'm not sure if you're really targeting all .button elements inside #userForm inside the function, or if you should use this instead?

If you're using jQuery 1.7+, you should really consider using on() and off() for this.

Unbelt

thx, i edited the code but it doesnt work.. I guess the onclick event breaks the prevent.default ...? – Chiliad

The onclick that is inline, will always execute first, and it's not really good practice to have both an inline function like that, and an event handler, you should probably rethink that, and go for just the event handler, and call myvalidator() from the external event handler. – Unbelt

many thx! I found that out by now ;) however i dont want to break core code of virtuemart.. So thats why i try to solve like this! – Chiliad

You can remove the onclick function on pageload, the same way you're doing it now inside the click function, just do it right inside the document.ready function instead? – Unbelt

i did and eddited your code! thx im a novice but im slowly getting the grip of it! – Chiliad

Answer 2

Basically, if you change your button type from type="submit" to type="button", such button won't submit form, and no workarounds are needed.

Hope this helps.

Foxhound

many thx... however im pretty sure the onclick event is to blame – Chiliad

This answer solved my case, for me this should be marked as right answer, as it is more universal :) great thanks! – Muck

I am using JQuery validation. I have a button with type="button" but still the form postbacks when the validation fails! Here is my question. – Fulvous

Answer 3

Don't forget that there are function/event arguments, but you must specify the parameters:

$("#thing").click(function(e) {
  e.preventDefault();
});

In this way, the submission is halted, and so you can conditionalise it.

Lawton

Answer 4

Best way is to do everything inside your submit event handler of the form. Remove the inline onclick and run it inside the submit function

$j('#userForm').submit(function(e) {
    if (+$j("#zip_field").val() > 1000){
        alert('Sorry we leveren alleen inomstreken hijen!');
        return false;
    }
    return myValidator(userForm, 'savecartuser');
});

Everard

Answer 5

I believe there is an easier way:

$j('form#userForm .button').click(function(event) { // <- goes here !
    if ( parseInt($j("#zip_field").val(), 10) > 1000){
        event.stopPropagation();
    }   
});

Smocking