Get ids from HTML and put it inside JavaScript array-CodePudding

I need the array in javascript to pull the ids that were selected in the interface and when I click Install it runs a bat behind it that installs everything at once, but I'm not getting it... What I have ready is this:

function install() {
    const form = document.getElementById('install');
    form.addEventListener('submit', (event) => {
        event.preventDefault()
    });
}
function mostrar(){
    var allTags = [];
    var ids = document.body.getElementsByTagName('input');
    for (var i = 0; i< ids.length; i  ) {
        allTags.push(ids[i].id);
    }
        
}

</head>
  <body>
    <div  id="quiz" multiple>
      <div >
        <h2 id="question">select the programs you wanted to install: </h2>
        <form action="/signup" method="post" id="install">
          <ul>
            <li>
              <input type="checkbox" name="1" id="a"  />
              <label for="a" id="a_text">Teams</label>
            </li>
            <li>
              <input type="checkbox" name="2" id="b"  />
              <label for="b" id="b_text">VPN</label>
            </li>
            <li>
              <input type="checkbox" name="3" id="c"  />
              <label for="c" id="c_text">FDC</label>
            </li>
            <li>
              <input type="checkbox" name="4" id="d"  />
              <label for="d" id="d_text">Acrobat Reader</label>
            </li>
            <li>
              <input type="checkbox" name="5" id="e"  />
              <label for="e" id="d_text">Power BI</label>
            </li>
          </ul>
        </form>
      </div>
      <button id="submit">Install</button>
    </div>
  </body>

CodePudding user response：

To get IDs of checked input you need to loop to the all input and check with .checked attribute.

document.querySelector('#getIDs').addEventListener('click', function(){
  var allTags = [];
  document.querySelectorAll('input').forEach(function(input){
    if(input.checked){
      allTags.push(input.id)
    }
  })
  console.log('IDs:', allTags)
})

</head>
  <body>
    <div  id="quiz" multiple>
      <div >
        <h2 id="question">select the programs you wanted to install: </h2>
        <form action="/signup" method="post" id="install">
          <ul>
            <li>
              <input type="checkbox" name="1" id="a"  />
              <label for="a" id="a_text">Teams</label>
            </li>
            <li>
              <input type="checkbox" name="2" id="b"  />
              <label for="b" id="b_text">VPN</label>
            </li>
            <li>
              <input type="checkbox" name="3" id="c"  />
              <label for="c" id="c_text">FDC</label>
            </li>
            <li>
              <input type="checkbox" name="4" id="d"  />
              <label for="d" id="d_text">Acrobat Reader</label>
            </li>
            <li>
              <input type="checkbox" name="5" id="e"  />
              <label for="e" id="d_text">Power BI</label>
            </li>
          </ul>
        </form>
      </div>
      <button id="getIDs">getIDs</button>
    </div>
  </body>

CodePudding user response：

Move your button inside your form and add correct submit type.

<button type="submit">Install</button>

Then, in your mostrar function you can do:

var selectedTags = document.querySelectorAll('.answer:checked').forEach(function(element) {
   console.log(element.id)
});