CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
May12
May12

Reputation: 2520

Enable bootstrap button using Javascript

Collegues, i have а bootstrap button on my html page:

.....
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...

    <div class="accept-btn">
      <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
    </div>

and i have JavaScript function which should activate (enable) it:

    function activateAcceptButton() {
        const accBtn = document.getElementsByClassName('accept-btn');
        //accBtn[0].disabled = false;
        //accBtn[0].classList.add('accept-btn-vis');
        //accBtn[0].setProperty("disabled", false);
        //accBtn[0].style.setProperty("enable", true);

        accBtn[0].removeClass('disabled');
    }

When the function is called nothing changes. Could you please help me with button activation? How do i need to change js function? Thank you.

Upvotes: 0

Views: 2313

Answers (2)

antelove
antelove

Reputation: 3358

Using querySelector for bootstrap DOM in javascript

function activateAcceptButton() {
  /* selector class accept-btn of class btn,btn-warning,disable */
//  const accBtn = document.querySelector(".accept-btn [id=accept][type=button].btn.btn-warning.disabled");
  
  /* short */
  const accBtn = document.querySelector(".accept-btn [id=accept]");

  if (accBtn.classList) { 
    accBtn.classList.remove("disabled");
  } else {
    accBtn.className = accBtn.className.replace(/\bmydisabled\b/g, ""); // For IE9 and earlier
  }  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="accept-btn">
  <button id="accept" type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>
    
<button onclick="activateAcceptButton()">Active</button>

CSS Selector for using querySelector

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14561

You are using incorrect selector. document.getElementsByClassName('accept-btn') will select the div. Instead, you can directly refer to the button using the descendant selector (>). Your could use: document.querySelector('.accept-btn > button').

Also, instead of .removeClass(), you could use .classList.remove() on the button.

function activateAcceptButton() {
  const accBtn = document.querySelector('.accept-btn > button');
  accBtn.classList.remove('disabled');
}

function acceptPmt() {}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

Alternatively, you can keep the selector as it is, and select the first child of the div. The commented statements in that function will also require being modified accordingly:

function activateAcceptButton() {
  const accBtn = document.getElementsByClassName('accept-btn');
  accBtn[0].children[0].classList.remove('disabled');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> ...

<div class="accept-btn">
  <button type="button" class="btn btn-warning disabled" onclick="acceptPmt()">Accept</button>
</div>


<button onclick="activateAcceptButton()">Activate</button>

Upvotes: 1

Related Questions