jQuery / Bootstrap3: Disable/hide button after submit

Question

I'm new to javascript, but I've searched extensively about this and tried dozens of different alternatives. Most of them did nothing at all, others prevented the form from submitting!

I have the following form:

<form name="buy" action="process_order.php" method="post">
    <input type="hidden" name="itemid" value="{$itemid}">
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success">Buy</button>
</form>

I want to prevent double submissions by either disabling the submit button after submit or just make it disappear, whichever works best.

I have tried multiple JS approaches and I dont even know which one is best, so I wont provide one here to avoid confusion.

I'd be thankful if you could provide me a full javascript <script> snippet and anything else I eventually need. I would prefer to not use Ajax here, but let me know if that would help.

Many thanks!

Styphon · Answer 1 · 2014-03-06T17:14:48.787

You can use jQuery for this.

$('form[name="buy"]').on('submit', function() {
    $('#submit').prop('disabled', true);
});

That will disable the submit button as soon as the form is submitted.

As @rolodex has pointed out submitting the form will refresh the page, thus the disabled button becomes enabled again. This is what I would do if not using Ajax (as @rolodex's answer does):

<form name="buy" action="process_order.php" method="post">
    <input type="hidden" name="itemid" value="{$itemid}">
    <button type="submit" id="submit" name="submit" class="btn btn-sm btn-success"<?php if(isset($_POST['itemid'])) echo ' disabled'; ?>>Buy</button>
</form>

Thus once someone has submitted the form, the button becomes disabled. This doesn't stop someone refreshing the page again without form data though, but neither does using Ajax. The only way to get around that would be to use cookies.

Default form submission will trigger a page refresh which will render the button disabling useless. — rolodex, Mar 06 '14 at 17:09

rolodex · Accepted Answer · 2014-03-06T17:28:00.743

2

In order to prevent second submission after the first, you have to use AJAX, as far as I am concerned, because every time the form is submitted, the page will refresh and there will not be any indication if the form is already submitted or not. My approach here will use jQuery and here's how you do it.

First, remove the attribute action and method from your <form> which we will replace with the AJAX call. Just as simple as this;

<form name="buy">...</form>

Secondly, include the necessary jQuery library;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Then the script;

<script>
    $(function(){
        $('form').on('submit', function(){
            var data = $(this).serializeArray()
            $.post('process_order.php', data, function(r,s){
                console.log(r)
            });
            // Updated answer (change submit button's ID to class instead);
            $(this).find('.submit').prop('disabled', true);
            return false;
        })
    })
</script>

And that's all. It's identical to @Styphon's answer, but I believe that this is more complete and I hope this helps.

Cheers!

edited Mar 06 '14 at 17:28

answered Mar 06 '14 at 17:03

rolodex

558
1
7
19

Nice and detailed. Seems to work great. This is exactly what I was looking for! Thanks – bockzior Mar 06 '14 at 17:14
Perhaps my question was too simplified. In fact I have several forms, one for each product. This only seems to have effect on the first form. Is there a quick fix ? – bockzior Mar 06 '14 at 17:22
1

@Sharp First, don't give submit buttons an `id` of "submit". And second, don't give all buttons the same `id` - they need to be unique. So either give them unique ones, or don't give them an `id` unless you really need it. Third, you can use `$(this).find('input[type="submit"]').prop("disabled", true);` to disable the submit button inside the form that was submitted – Ian Mar 06 '14 at 17:23
1

@Sharp I've updated the answer. Instead of using ` – rolodex Mar 06 '14 at 17:28
I would suggest disabling the button on the first instruction inside the onsubmit function, since the request could take a while to complete, hence leaving the button enabled for a while. – JoeGalind May 15 '17 at 13:23

score 1 · Answer 3 · edited May 23 '17 at 12:23

I use this (jQuery required):

<script>
    var submiting = false;

    $(function() {
        $('form').submit(function() {
            if (!submiting) {
                submiting = true;
                $('button[type=submit]').prop('disabled', true); //cosmetic
            } else {
                return false;
            }
        });
    });
</script>

With this code, when the form is submitted, the boolean will prevent any further submission (ie. the user clicks really fast on the submit button) and will disable the button preventing further clicks.

But a much better aproach is described here:

Prevent double submission of forms in jQuery

score 0 · Answer 4 · answered Mar 02 '15 at 14:52

Here is a neat solution

  $('form').submit(function(){ //prevent multiple submit
            $(':submit', this).click(function() {
                console.log("submit prevented"); // Debug purpose.
                return false;
            });
        });

If you submit form for instance 4 times, you will see the 3 "submit prevented" output.

$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");
$("#btn").trigger("click");

jQuery / Bootstrap3: Disable/hide button after submit

4 Answers4