CODEWITHSUNDEEP
jquerysubmitpreventdefault
user1054080
user1054080

Reputation:

Prevent submit button with onclick event from submitting

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...

Upvotes: 23

Views: 91274

Answers (5)

Vaidotas Kniuras
Vaidotas Kniuras

Reputation: 1

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();
    }   
});

Upvotes: -2

wirey00
wirey00

Reputation: 33661

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');
});

Upvotes: 0

lxgreen
lxgreen

Reputation: 1569

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.

Upvotes: 22

Grant Thomas
Grant Thomas

Reputation: 45068

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.

Upvotes: 5

adeneo
adeneo

Reputation: 318342

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.

Upvotes: 39

Related Questions