Disable/Enable HTML Button based on Existing Functions

Question

I have a function running onclick from HTML button and need to add disabling the button on success but NOT on return = false.

I've tried toggling, disabling directly in the HTML and inserting changing the HTML attribute within my current function.

var amtCount = 0;
function addToLineItem() 
{
var totalAmount = 0.0;
var valid = true;
var difference = [];
$.each($(".tbodys tr"),function(index,vs)
{
for(var tdcnt = 0; tdcnt < vs.children.length - 1; tdcnt++)
{
        if(tdcnt != 5)
        if(vs.children[tdcnt].firstElementChild.value == "" || vs.children[tdcnt].firstElementChild.value == undefined)
            valid = false;
    }

    if(vs.children[9].firstChild.value != "" && vs.children[9].firstChild.value != undefined)
    {
        RMID.push(vs.children[9].firstChild.value);
    }
});

if(CodingListItem.length > 0)
{
    difference = arr_diff(CodingListItem,RMID);
}

if(valid == false)
{
alert("Message");
    return false;
}

if($("#aprDate").val() == "")
{
    alert("Please date.");
    return false;
}

$.each($(".tbodys tr .nine"),function(index,vs){
    totalAmount += parseFloat(vs.firstElementChild.value.replace(/,/g, ""));
});

if($("#Total")[0].innerText == "")
{
    alert("Please .");
    return false;
}

//if(parseFloat($("#invTotal").val().replace(/,/g, "")) != totalAmount)
if(parseFloat($("#invTotal").val().replace(/,/g, "")) != parseFloat($("#Total")[0].innerText.replace(/,/g, "")))
{
    alert("total amount does not match.");
    return false;
}

 SP.SOD.executeFunc("sp.js", 'SP.ClientContext', function()
 {
    try
    {
        var clientContext = SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var oList = clientContext.get_web().get_lists().getByTitle('Invoice');


        if(difference.length > 0)
        {
            $.each(difference, function( index, value ) 
            {
                deleteListItem(parseInt(value));
            });
        }


        $.each($(".tbodys tr"),function(i,v)
        {
            if(v.children[9].firstChild.value != "" && v.children[9].firstChild.value != undefined)
            {
                var itemType1 = GetItemTypeForListName("InvoiceLineItem");

                var item1 = {
                    "__metadata": { "type": itemType1 },
                    "Title": v.children[0].firstChild.value,
                    "InvoiceIDId": parseInt(INV),
                    "Entity": v.children[1].firstChild.value,
                    "MS": v.children[2].firstChild.value,
                    "LocationId": parseInt(v.children[3].firstChild.value),
                    "DepartmentId": parseInt(v.children[4].firstChild.value),
                    "Account": v.children[5].children[1].options[v.children[5].children[1].selectedIndex].text,
                    "SubAccount": v.children[6].firstChild.value,
                    "GLCode": v.children[7].firstChild.value,
                    "Amount": v.children[8].firstChild.value
                };

                updateListItem(parseInt(v.children[9].firstChild.value), "Invoice Approval and Coding", _spPageContextInfo.webAbsoluteUrl, item1, function () {

                    amtCount = amtCount + 1;
                    updatePendingInvoice(amtCount); 
                }, function () { errorMsg = true; });
            }
            else
            {
                var itemCreateInfo = new SP.ListItemCreationInformation();
                var oListItem = oList.addItem(itemCreateInfo);  

                oListItem.set_item('Title', v.children[0].firstChild.value);  //Line Description
                oListItem.set_item('InvoiceID', INV); 
                oListItem.set_item('Entity', v.children[1].firstChild.value); 
                oListItem.set_item('MS', v.children[2].firstChild.value); 
                oListItem.set_item('Location', v.children[3].firstChild.value); 
                oListItem.set_item('Department', v.children[4].firstChild.value);
                oListItem.set_item('Account', v.children[5].children[1].options[v.children[5].children[1].selectedIndex].text); 
                oListItem.set_item('SubAccount', v.children[6].firstChild.value); 
                oListItem.set_item('GLCode', v.children[7].firstChild.value); 
                oListItem.set_item('Amount', v.children[8].firstChild.value); 
                oListItem.set_item('Date', $("#aprDate").val()); 
                oListItem.set_item('Comment', $("#cmt").val()); 

                oListItem.update();
                clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
            }
        });


    }
    catch(err)
    {
        alert(err.message);
  }
});
}

function onQuerySucceeded() 
{

amtCount = amtCount + 1;
updatePendingInvoice(amtCount);


}

function onQueryFailed(sender, args) 
{
alert('not inserted');
}

This runs fine but if the HTML Button is clicked quickly, the function runs and creates duplicate data.

Answer 1

I found what I needed and with some experimentation with where to put the "disabled", false lines was able to get to the solution. I got the simple code from Palash https://stackoverflow.com/users/1823841/palaѕн

All versions of jQuery after 1.6

Disabling and enabling a html input button

Thank you all for helping... New Code....

var amtCount = 0;
function addToLineItem() 
{

**$("#IApprove").attr("disabled", true);**

var totalAmount = 0.0;
var valid = true;
var difference = [];

$.each($(".tbodys tr"),function(index,vs)
{
    for(var tdcnt = 0; tdcnt < vs.children.length - 1; tdcnt++)
    {
        if(tdcnt != 5)
        if(vs.children[tdcnt].firstElementChild.value == "" || vs.children[tdcnt].firstElementChild.value == undefined)
            valid = false;
    }

    if(vs.children[9].firstChild.value != "" && vs.children[9].firstChild.value != undefined)
    {
        RMID.push(vs.children[9].firstChild.value);
    }
});

if(CodingListItem.length > 0)
{
    difference = arr_diff(CodingListItem,RMID);
}

if(valid == false)
{
    alert("Please add Line Items with Required Information. GL coding missing.");
    **$("#IApprove").attr("disabled", false);**
    return false;
}

if($("#aprDate").val() == "")
{
    alert("Please add approver date.");
    **$("#IApprove").attr("disabled", false);**
    return false;
}

$.each($(".tbodys tr .nine"),function(index,vs){
    totalAmount += parseFloat(vs.firstElementChild.value.replace(/,/g, ""));
});

if($("#Total")[0].innerText == "")
{
    alert("Please add Line items.");
    **$("#IApprove").attr("disabled", false);**
    return false;
}

//if(parseFloat($("#invTotal").val().replace(/,/g, "")) != totalAmount)
if(parseFloat($("#invTotal").val().replace(/,/g, "")) != parseFloat($("#Total")[0].innerText.replace(/,/g, "")))
{
    alert("Line item's total amount does not match with total invoice amount.");
    **$("#IApprove").attr("disabled", false);**
    return false;
}

 SP.SOD.executeFunc("sp.js", 'SP.ClientContext', function()
 {
    try
    {
        var clientContext = SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var oList = clientContext.get_web().get_lists().getByTitle('Invoice Approval and Coding');


        /////////////   Delete Items   //////////////////
        if(difference.length > 0)
        {
            $.each(difference, function( index, value ) 
            {
                deleteListItem(parseInt(value));
            });
        }


        $.each($(".tbodys tr"),function(i,v)
        {
            if(v.children[9].firstChild.value != "" && v.children[9].firstChild.value != undefined)
            {
                var itemType1 = GetItemTypeForListName("InvoiceLineItem");

                var item1 = {
                    "__metadata": { "type": itemType1 },
                    "Title": v.children[0].firstChild.value,
                    "InvoiceIDId": parseInt(INV),
                    "Entity": v.children[1].firstChild.value,
                    "MS": v.children[2].firstChild.value,
                    "LocationId": parseInt(v.children[3].firstChild.value),
                    "DepartmentId": parseInt(v.children[4].firstChild.value),
                    "Account": v.children[5].children[1].options[v.children[5].children[1].selectedIndex].text,
                    "SubAccount": v.children[6].firstChild.value,
                    "GLCode": v.children[7].firstChild.value,
                    "Amount": v.children[8].firstChild.value
                };

                updateListItem(parseInt(v.children[9].firstChild.value), "Invoice Approval and Coding", _spPageContextInfo.webAbsoluteUrl, item1, function () {

                    amtCount = amtCount + 1;
                    updatePendingInvoice(amtCount); 
                }, function () { errorMsg = true; });
            }
            else
            {
                var itemCreateInfo = new SP.ListItemCreationInformation();
                var oListItem = oList.addItem(itemCreateInfo);  

                oListItem.set_item('Title', v.children[0].firstChild.value);  //Line Description
                oListItem.set_item('InvoiceID', INV); 
                oListItem.set_item('Entity', v.children[1].firstChild.value); 
                oListItem.set_item('MS', v.children[2].firstChild.value); 
                oListItem.set_item('Location', v.children[3].firstChild.value); 
                oListItem.set_item('Department', v.children[4].firstChild.value);
                oListItem.set_item('Account', v.children[5].children[1].options[v.children[5].children[1].selectedIndex].text); 
                oListItem.set_item('SubAccount', v.children[6].firstChild.value); 
                oListItem.set_item('GLCode', v.children[7].firstChild.value); 
                oListItem.set_item('Amount', v.children[8].firstChild.value); 
                oListItem.set_item('Date', $("#aprDate").val()); 
                oListItem.set_item('Comment', $("#cmt").val()); 

                oListItem.update();
                clientContext.executeQueryAsync(onQuerySucceeded, onQueryFailed);
            }
        });


    }
    catch(err)
    {
        alert(err.message);
  }
});
}

Answer 2

You should disable the button while you are acting on the click. Then the user cannot queue up another update until the first one finishes. Set an internal variable saying that the work is in progress, disable the button, and then clear the flag when you get the result (success or fail).

For instance:

$("#btnSubmit").click(function() {
  $("#btnSubmit").prop("disabled", true);
  // do your work here, waiting for success or failure
  $('#btnSubmit').prop("disabled", false);
})

or:

$("button").click(function(e) {
  $(e.currentTarget).prop('disabled', true);
  window.setTimeout(function() {
    $(e.currentTarget).prop('disabled', false);
  }, 5000);
})