简体   繁体   中英

Javascript return false; is not cancelling a form submit for another .submit jQuery call

I have this jQuery function injected on every page in order to disable submit buttons after they are clicked.

$('form').submit(function () {
        var btn = $('input[type=submit]', this);
        disableButtonOrLink.disableSubmit(btn);

        btn = $('button[type=submit]', this);
        disableButtonOrLink.disableSubmit(btn);
    });

The problem is that I also have some backend validation that is sometimes attached to the form in the the shape of something like this

 <form action="someAction" method="post" name="someForm" class="form" 
    onsubmit="var invalid=false; 
    invalid=someAction(); 
    if(invalid){return false;}"
    id="someForm">  

The issue I am having that is occurs is that the ('form').submit action is always being called after the return false. The form isn't actually being submitted due to the return false; however this jQuery function is still being called after. Is there anyway to prevent this .submit from being called?

Just to clarify exactly what is happening: The onSubmit on the form is being called;

The return false section is being hit and properly canceling the submit;

The ('form').submit is still being called after the onSubmit completes as if the form's submit wasn't canceled and is disabling buttons.

I would like to prevent the last step from occurring.

You can use JQuery to find those buttons inside form and use a method from preventing stuff that they normally do.
Example:
$("form button").on('click', function(e){ e.preventDefault(); });

I would probably try something like this

$('#someForm').on('submit', function(e) {
    if ($(this).data('some-action')) {
        e.preventDefault();
        return false;
    }
    //... then disable buttons, etc
});

In this case you need to add the attribute data-some-action to the form, evaluated with whatever backend validation you are doing.

UPDATE

$('#someForm').on('submit', function(e) {
    if ($(this).data('some-action') == 'error-message') {
        e.preventDefault();
        alert('error!');
        return false;
    }
    if ($(this).data('some-action') == 'reload') {
        e.preventDefault();
        document.location.reload(true);
    }
    //... then disable buttons, etc
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM