The function presented in this page can be used to disable and automatically enable buttons in web page, with JavaScript. After the user clicks on the button, that button is disabled, and its text is changed, then, after 2 seconds, the button is automatically enabled.
- This function receives an Array with the ID of the buttons to which you want to add this effect.

Code of the function:
// function to disable and enable buttons, receives an array with button IDs
// from https://coursesweb.net/javascript/
function disableEnableBtn(ids) {
  // traverses the array with IDs
  var nrids = ids.length;
  for(var i=0; i<nrids; i++) {
    // registers onclick event to each button
    if(document.getElementById(ids[i])) {
      document.getElementById(ids[i]).onclick = function() {
        this.setAttribute('disabled', 'disabled');     // disables the button by adding the 'disabled' attribute
        this.innerHTML = 'Disabled';        // changes the button text
        var idbtn = this.id;       // stores the button ID

        // calls a function after 2 sec. (2000 milliseconds)
        setTimeout( function() {
          document.getElementById(idbtn).removeAttribute('disabled');         // removes the "disabled" attribute
          document.getElementById(idbtn).innerHTML = 'Click';        // changes tne button text
        }, 2000 );
      }
    }
  }
}
- Set an array with IDs of the buttons (one or more IDs), then call the disableEnableBtn() function, passing the array as argument. To change the time after which the button is enabled, modify the value of 2000 added in setTimeout(); see also the comments in code.

- Example with two buttons.
<button id="btn1">Click</button> - <button id="btn2">Click 2</button>
<script type="text/javascript">
// function to disable and enable buttons, receives an array with button IDs
// from https://coursesweb.net/javascript/
function disableEnableBtn(ids) {
  // traverses the array with IDs
  var nrids = ids.length;
  for(var i=0; i<nrids; i++) {
    // registers onclick event to each button
    if(document.getElementById(ids[i])) {
      document.getElementById(ids[i]).onclick = function() {
        this.setAttribute('disabled', 'disabled');     // disables the button by adding the 'disabled' attribute
        this.innerHTML = 'Disabled';        // changes the button text
        var idbtn = this.id;       // stores the button ID

        // calls a function after 2 sec. (2000 milliseconds)
        setTimeout( function() {
          document.getElementById(idbtn).removeAttribute('disabled');         // removes the "disabled" attribute
          document.getElementById(idbtn).innerHTML = 'Click';        // changes tne button text
        }, 2000 );
      }
    }
  }
}

// array with IDs of buttons
var btnid = ['btn1', 'btn2'];

disableEnableBtn(btnid);      // calls the function
</script>
Demo, click on the button and wait 2 seconds.
-

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Disable button and Enable it after specified time

Last accessed pages

  1. Get Duration of Audio /Video file before Upload (5913)
  2. Follow the mouse cursor with a DIV inside a Parent (2703)
  3. Register and show online users and visitors (23278)
  4. Node.js Move and Copy Directory (1127)
  5. SHA1 Encrypt data in JavaScript (8256)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (390)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (332)
  3. Register and show online users and visitors (302)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (234)
  5. Insert, Select and Update NULL value in MySQL (223)