Need to get data out of an HTML form using vanilla Javascript

Question

I'm trying to get some simple data out a form on a webpage. Should be pretty simple, but one, I can't use jQuery, it has to be plain JS, and two, it's on a legacy system so it has to work in IE11 only.

Here is an image of the form fields I'm working with:

I need to get the ID of the label and the value of the field as indicated in the red boxes. This is how they're mapping this to the DB. I have to pull these on the form, then put them in a spreadsheet.

The most simple way I've tried to do this is using:

document.getElementById('Section1_0').getElementsByTagName('*');

Of course this is kind of overkill since then I get back EVERY node in the DOM and then I would have to parse that out using something like JSON.parse() or something similar.

In short, if there is an easier way to get just the IDs and the values, that would be great. If I have to create an array and then iterate over that to pull the Ids and values I can do that as well. I've tried a few things, and I'm banging my head against the wall because the structure of the form isn't consistent.

Any help is greatly appreciated.

Answer 1

I hope this will help you.

 const labels = document.getElementsByTagName("label"); Array.from(labels).forEach(label => { const labelText = label.innerHTML; const labelId = label.getAttribute('id'); console.log(labelText); console.log(labelId); });

 <label id="label_id_1">Lable 1</label><br> <label id="label_id_2">Lable 2</label><br> <label id="label_id_3">Lable 3</label><br> <label id="label_id_4">Lable 4</label><br> <label id="label_id_5">Lable 5</label><br>