skip to Main Content

how to use only Javascript to add new Bootstrap switch dynamically

like this:

<div class="toggle btn btn-primary" data-toggle="toggle" role="button" style="width: 61.0781px; height: 38px;">
 <input type="checkbox" checked="" data-toggle="toggle" data-onstyle="primary">
 <div class="toggle-group">
  <label class="btn btn-primary toggle-on">
   On
  </label>
  <label class="btn btn-light toggle-off">
   Off
  </label>
  <span class="toggle-handle btn btn-light">
  </span>
 </div>
</div>

from this site text


button can be added like this

<script>
        function addButton() {
            var element = document.createElement("input");
            element.type = "button";
            element.value = "View Info";
            element.name = "getInfo";
            element.className = "btn btn-info btn-lg";
        }
</script>
function addButton() {
  var element = document.createElement("input");
  element.type = "button";
  element.value = "View Info";
  element.name = "getInfo";
  element.className = "btn btn-info btn-lg";
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>

<div class="toggle btn btn-primary" data-toggle="toggle" role="button" style="width: 61.0781px; height: 38px;">
  <input type="checkbox" checked="" data-toggle="toggle" data-onstyle="primary">
  <div class="toggle-group">
    <label class="btn btn-primary toggle-on">
   On
  </label>
    <label class="btn btn-light toggle-off">
   Off
  </label>
    <span class="toggle-handle btn btn-light">
  </span>
  </div>
</div>

2

Answers


  1. You’d need a parent element in your HTML under which you’d add this newly created switch.

    Say you have a div#switch-host in your HTML.

    <div id="switch-host"></div>
    

    Then you’d implement a JS function which will add your switch to this div as

    function addSwitch(hostEl) {
      const host = document.getElementById(hostEl);
    
      const inputEl = document.createElement("input");
      inputEl.setAttribute("type", "checkbox");
      inputEl.setAttribute("checked", false);
      inputEl.dataset.toggle = "toggle";
    
      host.appendChild(inputEl);
    }
    

    And then call this function as

    addSwitch("switch-host");
    
    Login or Signup to reply.
  2. I think this is what you are after. I used some template because I don’t like all that in code. I then modified the values with jQuery since this is a jQuery plugin.

    Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

    /* not used
    function addButton() {
      var element = document.createElement("input");
      element.type = "button";
      element.value = "View Info";
      element.name = "getInfo";
      element.className = "btn btn-info btn-lg";
    }
    */
    function clickHandler(event) {
      console.log('clicked toggle');
    }
    
    function addSwitchButton() {
      const container = document.getElementById("switchcontainer");
      const template = document.getElementById("myswitch");
      const clone = template.content
        .firstElementChild.cloneNode(true);
      clone.addEventListener("click", clickHandler);
      $(clone).find('.toggle-on').text('View Info');
      $(clone).find('input[type="checkbox"]').attr('name', 'getInfo');
    
      $(clone).bootstrapToggle();
      container.appendChild(clone);
    }
    const addme = document.querySelector(".add-switch");
    addme.addEventListener("click", addSwitchButton);
    body {
      font-size: 16px;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    #switchcontainer {
      margin: 0;
      padding: 0;
      width: 20em;
      height: 10em;
      display: grid;
      place-items: center;
      border: solid #00FF00;
    }
    
    .toggle.btn.btn-primary {
      width: 9em;
      height: 2em;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/css/bootstrap4-toggle.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/[email protected]/js/bootstrap4-toggle.min.js"></script>
    
    <button type="button" class="add-switch">Add Switch</button>
    <div id="switchcontainer"></div>
    
    <template id="myswitch">
    <div class="toggle btn btn-primary"  role="button">
      <input type="checkbox" checked="" data-toggle="toggle" data-onstyle="primary">
      <div class="toggle-group">
        <label class="btn btn-primary toggle-on">On</label>
        <label class="btn btn-light toggle-off">Off</label>
        <span class="toggle-handle btn btn-light"></span>
      </div>
    </div>
    </template>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search