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!

Answer 1

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.

Answer 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!

Answer 3

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

Answer 4

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");