Question

I am trying to allow a button to be clicked only once and then some data be submitted via ajax. The problem I am facing is that a user can click 50x and the data is POST submitted each time ?

jQuery("#id").unbind('click');

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        location.reload(true);
    }
});

How can I ensure that if a user clicks #ID 100x – that the data is only submitted once ? And then #ID is re-enabled ?

Answer 1

just disable the button

$("#id").attr("disabled", "disabled")

and then in the success function enable it

$("#id").removeAttr("disabled")