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>

Answer 1

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>

Answer 2

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

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:

2 answers

solution1
1 2022-02-10 18:50:45

solution2
0 2022-02-10 18:54:27

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:

2 answers

solution1 1 2022-02-10 18:50:45

solution2 0 2022-02-10 18:54:27

solution1
1 2022-02-10 18:50:45

solution2
0 2022-02-10 18:54:27