How to disable button after one click with validation using javascript?

Question

First I want to validate some of the field values entered or not. After that When i click the submit button, the button must be disabled after one click to avoid duplicate submission. How to do that using javascript?

<script type="text/javascript" language="javascript">
    function ValidateIt() {
      if (document.getElementById('ddlProblemCategory').value == 0) {
           alert("Please fill some value");
           return false;
      }
           return true;
    }
    function DisableIt() {
        if (ValidateIt() == true)
          document.getElementById('btnSaveProblem').disabled = true;
    }  
</script>

If you are using jquery, google jquery validate plugin(If you don't use jquery, google javascript validation). Learn you some client side validation. Then If you face any problem with that, come here post the code & ask for help. — , Jun 14 '13 at 18:17
The following post may be helpful: http://stackoverflow.com/questions/8165018/duplicate-data-insert-in-codeigniter/8165979#8165979 — Gustav Bertram, Dec 20 '13 at 14:43
Upvoted this as it is the first non-jquery result in my google — Sam, Aug 14 '14 at 09:12

score 19 · Accepted Answer · answered Jun 14 '13 at 18:34

19

You can add an onclick handler to your button:

document.getElementById("idOfButton").onclick = function() {
    //disable
    this.disabled = true;

    //do some validation stuff
}

answered Jun 14 '13 at 18:34

tymeJV

103,943
14
161
157

In my particular case I was able to just put the onclick right into the input `` – tisaconundrum Aug 05 '22 at 23:26

score 5 · Answer 2 · edited Feb 15 '23 at 09:34

5

Call function submitbtn onclick of the button.

Use

function submitbtn() {
    getElementById("Submit_id").disabled=true;
   // Validation code goes here
}

edited Feb 15 '23 at 09:34

STA

30,729
8
45
59

answered Jun 14 '13 at 18:36

TechBytes

563
5
16

You have missed 'd' in `disabled`...It should be `getElementById("Submit_id").disabled=true;` – Vignesh Vino Nov 07 '13 at 10:14
@VigneshVino thanks buddy.. changed as per u.. – TechBytes Nov 24 '13 at 15:19
It should be `document.getElementById("Submit_id").disabled=true;` You missed the DOM object. – YDF Feb 17 '21 at 12:58

score 0 · Answer 3 · answered Oct 20 '13 at 11:54

Use hidden label and change its value on 1st click

<script type = "text/javascript" language = "javascript">
    function disableButton() {
        var lblText = document.getElementById('lbl_hdn_text').innerHTML;
        if (lblText == "true") {
            document.getElementById('lbl_hdn_text').innerHTML = "false";
            return true;
        }
        else {
            return false;
        }
    }
</script>

<label id="lbl_hdn_text"  style = "display:none;" >true</label>

How to disable button after one click with validation using javascript?

3 Answers3

Linked