Javascript Course

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(()=>{
 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.
<h4>Example automatically Disable and Enable button</h4>
<p>Click on each button and wait 2 seconds.</p>

<button id='btn1'>Click</button> - <button id='btn2'>Click 2</button>
<script>
// 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(()=>{
 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>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Disable button and Enable it after specified time

Last accessed pages

  1. JavaScript code and PHP (34152)
  2. MouseEvent - Events for Mouse (1983)
  3. Get and Modify content of an Iframe (25993)
  4. jsSHA - SHA Hashes and HMAC in JavaScript (1339)
  5. Create simple Website with PHP (34350)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (522)
  2. PHP Unzipper - Extract Zip, Rar Archives (423)
  3. SHA256 Encrypt hash in JavaScript (403)
  4. Read Excel file data in PHP - PhpExcelReader (360)
  5. Create simple Website with PHP (334)