Get ids from HTML and put it inside JavaScript array

Question

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 class="quiz-container" id="quiz" multiple>
      <div class="quiz-header">
        <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" class="answer" />
              <label for="a" id="a_text">Teams</label>
            </li>
            <li>
              <input type="checkbox" name="2" id="b" class="answer" />
              <label for="b" id="b_text">VPN</label>
            </li>
            <li>
              <input type="checkbox" name="3" id="c" class="answer" />
              <label for="c" id="c_text">FDC</label>
            </li>
            <li>
              <input type="checkbox" name="4" id="d" class="answer" />
              <label for="d" id="d_text">Acrobat Reader</label>
            </li>
            <li>
              <input type="checkbox" name="5" id="e" class="answer" />
              <label for="e" id="d_text">Power BI</label>
            </li>
          </ul>
        </form>
      </div>
      <button id="submit">Install</button>
    </div>
  </body>

uingtea · Accepted Answer · 2022-02-10 18:50:45Z

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 class="quiz-container" id="quiz" multiple>
      <div class="quiz-header">
        <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" class="answer" />
              <label for="a" id="a_text">Teams</label>
            </li>
            <li>
              <input type="checkbox" name="2" id="b" class="answer" />
              <label for="b" id="b_text">VPN</label>
            </li>
            <li>
              <input type="checkbox" name="3" id="c" class="answer" />
              <label for="c" id="c_text">FDC</label>
            </li>
            <li>
              <input type="checkbox" name="4" id="d" class="answer" />
              <label for="d" id="d_text">Acrobat Reader</label>
            </li>
            <li>
              <input type="checkbox" name="5" id="e" class="answer" />
              <label for="e" id="d_text">Power BI</label>
            </li>
          </ul>
        </form>
      </div>
      <button id="getIDs">getIDs</button>
    </div>
  </body>

BeLEEver · Accepted Answer · 2022-02-10 18:54:27Z

0

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)
});

answered Feb 10, 2022 at 18:54

BeLEEver

2896 silver badges12 bronze badges

Collectives™ on Stack Overflow

Get ids from HTML and put it inside JavaScript array

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:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

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:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related