prevent double click on button in javascript

Question

<script type="text/javascript">
    $(document).ready(function () {
        $("#submit").on("click", function () {
            $(this).attr('disabled', true);
            var taskid = num;
            var loadnew = 1;
            var guessnum = $("input[name=guessnum]:checked").val();
            if (guessnum != 1 && guessnum != 2) {
                alert("You could not submit an empty answer");
                loadnew = 0;
                location.href = "/minions/peerprediction1.php";
            }
            else if (loadnew == 1) {
                finishedTask += 1;
            }
            var starttime = $("#timestart").val();
            var timecost = starttime;
            $.ajax({
                type: "post",
                url: "GameMysql.php",
                data: "taskid=" + taskid + "&guessnum=" + guessnum + "&effort=" + effort + "&finishedTask=" + finishedTask + "&time=" + timecost,
                success: function (data) {
                }
            });
        });
    });

</script>
<form>
    <a class="button" id="submit"><span>&#10003</span>Submit report</a>
</form>

I want to make sure the form with same answers do not submit twice, and disable the button, but it does not truly work. For I click it twice the finished task number increased by 2 I already see the answer here Prevent double submission of forms in jQuery and tried, but still could not make it work

Where's the end of the script? Also, disabling an `` tag in the sense of setting the `disabled` property (or attribute) doesn't really disable it. — nnnnnn, May 28 '15 at 12:38
possible duplicate of [jQuery - How can I temporarily disable the onclick event listener after the event has been fired?](http://stackoverflow.com/questions/1921855/jquery-how-can-i-temporarily-disable-the-onclick-event-listener-after-the-even) — aldux, May 28 '15 at 12:51

score 1 · Accepted Answer · answered May 28 '15 at 12:45

Use the button element, it will provide the functionality you are after. It can be styled to look like an anchor. Less issues trying to get it working as intended across all browsers.

$("#submit").on("click",function(){    
    $(this).attr('disabled', true);
    console.log('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" id="submit"> <span>&#10003</span> Submit report</button>

score 0 · Answer 2 · answered May 28 '15 at 12:45

0

You should use a button instead of an anchor, anchors dont support the disabled attribute

<button id="submit">Submit Report</button>

answered May 28 '15 at 12:45

Freijlord

96
7

prevent double click on button in javascript

2 Answers2

Linked