I have a list of many select or input and i want to get the id of each of them who have "required=true" here's the beginning of my code
function getRequiredFieldsId(contenerId)
{
// Detection of all select fields
let objFields = document.getElementById(contenerId).getElementsByTagName('select');
let q=1;
}
I maybe need to do a forEach but i don't really know how to do it properly.
you can use .querySelectorAll("[required]") to get all required element
then if you want only id you can use map
[...requiredElements].map(element => element.id);
function getRequiredFieldsId(contenerId)
{
let requiredElements = document.getElementById(contenerId).querySelectorAll("[required]");
requiredElementsId = [...requiredElements].map(element => element.id);
console.log(requiredElementsId);
}
getRequiredFieldsId('container1');<div id="container1">
<input id="test1"/>
<input id="test2" required/>
<input id="test3" required/>
</div>
<div id="container2">
<input id="test1" required/>
<input id="test2"/>
<input id="test3"/>
</div>getElementsByTagName() returns an array like collection. So you will have to make it an array using ... (spread operator), for easy iteration.
After that checking required property is all you have to do.
Building up on your code:
let items = document.getElementsByTagName('select');
let reqItems = [];
[...items].forEach(x => {
if(x.required) reqItems.push(x);
});
console.log(reqItems);<select name="cars" id="cars" required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="cars2" id="cars2" required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="cars3" id="cars3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select name="cars4" id="cars4" required>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>You can use the .querySelector function for retrieving conditional DOM elements. E.g
let elems = document.querySelectorAll('select[required=true],input[required=true]');
With this you will have all the elements met this condition.
With the .map function you will receive all the ids.
let ids = [...elems].map(item => element.id);