CODEWITHSUNDEEP
javascripthtml
Deyvid Medeiros
Deyvid Medeiros

Reputation: 1

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:

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>

Upvotes: 0

Views: 448

Answers (2)

BeLEEver
BeLEEver

Reputation: 289

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

Upvotes: 0

uingtea
uingtea

Reputation: 6524

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>

Upvotes: 2

Related Questions