Javascript – How to disable submit button after click single time

htmljavascriptjquery

I want to disable submit button once it has clicked for send.this is my submit button code 

<button title="<?PHP echo getTranslatedString('LBL_SAVE_ALT'); ?>" accessKey="S" class="btn btn-primary" value="<?PHP echo getTranslatedString('LBL_SAVE_LAPTOP'); ?>" id="formSave" type="submit" name="button" onclick="return checkform();">

Save detail

and this is onclick function code 

function checkform() {
var incvfr = $("#invoice").val();
var inseridf = $("#invserial").val();
if (incvfr == 1) {
    if (inseridf == '') {
        alert("Please enter invoice number");
        return false;
    }
} else {
    document.save.submit();
    document.getElementById('formSave').setAttribute("disabled", "disabled");
}
}

when i disable submit button then form not send for save just disable button how to do it.
when i use disable code after save.submit(); then form submit but save button not disable

Best Answer

Try one() method in jQuery, it will run once for an element and might simplify your code.

jQuery Solution:

$(function(){
  $('#formSave').one('click', function() {  
    $(this).attr('disabled','disabled');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="">

JavaScript Solution:

Use setAttribute() method.

function disable(){
  document.getElementById('formSave').setAttribute("disabled", "disabled"); 
}
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="disable()">

Related Topic