CODEWITHSUNDEEP
javascriptjqueryhtmlformsbutton
Learner
Learner

Reputation: 221

Strange Behaviour on changing the property of button in Jquery

I am disabling a button on click handler and it is strange that once the button is disabled, it doesn't get submitted after that. It varies from browser to browser. Firefox allows the submission of the form after disabling the submit button but chrome and IE are blocking it

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script>
        $(function(){
            $("#btn").on("click",function(){

                $(this).prop('disabled','true');
                alert('clicked');
            });



            $("#frm").on("submit",function(){
                alert("submit1");

            });

            $("#frm").on("submit",function(){
                alert("submit2");
            });

        })
    </script>
</head>

<body>
    <form id="frm" action="#">
        <input type='submit' id="btn"/>
    </form>
</body>

This is a strange behavior that submit is being prevented on disabling the buttton. what could be the probable reason. output which i am getting in Chrome and IE are click is executed and then script close

why isnt it in order execution of click then execution of submits

Upvotes: 1

Views: 115

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074674

I think you're saying that when you disable the submit button as it is clicked, the form doesn't get submitted and you want it to.

I believe the reason for that is that the click event occurs before the button's activation behavior (which is the HTML5 spec's term for "what it does"). The activation behavior of an enabled ("mutable" as the spec puts it) submit button is, of course, to trigger form submission. But by the time the browser is deciding on the activation behavior, which is after the click handlers have been fired, you've disabled the button. According to the spec, a disabled ("non-mutable" as they put it) submit button has no activation behavior, and so the form is not submitted.

So the question becomes: When does the browser decide what activation behavior to use, before the click handlers or after them? For the answer to that, we turn to the DOM Events spec, which tells us that first the click occurs, then the activation behavior occurs. So it would appear that Chrome is deciding after the click event is complete, which is a reasonable read of the spec; Firefox would appear to be deciding before the click event is complete.

Pragmatically, though, the reality is that if you disable the button within the click handler, you are not guaranteed to get the form submission. To work around that, you can very briefly delay disabling the button, so the event completes without the button having been disabled:

$("#btn").on("click",function(){
    var btn = this;

    setTimeout(function() {
        btn.disabled = true;
    }, 0);
    alert('clicked');
});

Live Example | Source

Side note: In the above, I've also (effectively) replaced $(this).prop("disabled", true"); with (effectively) this.disabled = true;. There's no reason to wrap the element in a jQuery wrapper just to set a simple property value.

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

Should fix your issue:

$("#btn").on("click", function (e) {
        e.preventDefault();
        $(this).prop('disabled', true).closest('form').submit();
        //to submit FORM without firing jquery's attached handlers
        //$(this).prop('disabled', true).closest('form').get(0).submit();
        alert('clicked');
    });

DEMO

Upvotes: 1

Related Questions