How to disable submit button after click single time

Question

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

No when i click save details there is no effect in form just disable button but i want to send form — phpdev
– phpdev, Commented Sep 6, 2016 at 4:49
I don't know whether you're comfortable using php to keep a button disable after refresh, However here's a solution in JS stackoverflow.com/a/22279996/5336321 — Hitesh Misro
– Hitesh Misro, Commented Sep 6, 2016 at 6:15

Hitesh Misro · Accepted Answer · 2016-09-06 05:07:44Z

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

Harinder88 · Accepted Answer · 2016-09-06 04:48:40Z

0

As I can see that you re using jQuery so when you are saving after that you can use jQuery hide function to hide your button by passing button id

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();
$("#formSave").hide();
}
 }

answered Sep 6, 2016 at 4:48

Harinder88

3143 gold badges5 silver badges10 bronze badges

1 Comment

phpdev Over a year ago

i dont want to hide save button just wanted to disable.

Haresh Vidja · Accepted Answer · 2016-09-06 05:01:05Z

0

You can disable submit button using

$("#formSave").attr('disabled',true);

or

$("#formSave").prop('disabled',true);

answered Sep 6, 2016 at 5:01

Haresh Vidja

8,4913 gold badges29 silver badges44 bronze badges

Comments

JYoThI · Accepted Answer · 2016-09-06 05:02:13Z

0

add property disable

$("#formSave").prop('disabled',true);

if you want revert it use

$("#formSave").prop('disabled',false);

answered Sep 6, 2016 at 5:02

JYoThI

12.1k1 gold badge13 silver badges26 bronze badges

1 Comment

phpdev Over a year ago

when i use $("#formSave").prop('disabled',true); after document.save.submit(); then button disable but form not submt

Collectives™ on Stack Overflow

How to disable submit button after click single time

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Linked

Related