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

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. — user405398
– user405398, Commented Jun 14, 2013 at 18:17
The following post may be helpful: stackoverflow.com/questions/8165018/… — Gustav Bertram
– Gustav Bertram, Commented Dec 20, 2013 at 14:43
Upvoted this as it is the first non-jquery result in my google — Sam
– Sam, Commented Aug 14, 2014 at 9:12

tymeJV · Accepted Answer · 2013-06-14 18:34:33Z

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, 2013 at 18:34

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tisaconundrum Over a year ago

In my particular case I was able to just put the onclick right into the input <input type="button" id="btnFinish" class="btn btn-sm btn-primary" value="Finish" onclick="this.disabled = true" />

STA · Accepted Answer · 2023-02-15 09:34:55Z

5

Call function submitbtn onclick of the button.

Use

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

edited Feb 15, 2023 at 9:34

STA

35.3k9 gold badges49 silver badges62 bronze badges

answered Jun 14, 2013 at 18:36

TechBytes

5555 silver badges16 bronze badges

3 Comments

Vignesh Vino Over a year ago

You have missed 'd' in disabled...It should be getElementById("Submit_id").disabled=true;

TechBytes Over a year ago

@VigneshVino thanks buddy.. changed as per u..

YDF Over a year ago

It should be document.getElementById("Submit_id").disabled=true; You missed the DOM object.

Jason · Accepted Answer · 2013-10-20 11:54:37Z

0

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>

answered Oct 20, 2013 at 11:54

Jason

1891 gold badge2 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Linked

Related