Get the ID of every element where required = true-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

You can simply use querySelector for that

const requiredInputSelector = `input[required=true]`;
const requiredInputs = document.querySelectorAll(requiredInputSelector);
const requiredInputIds = [...requiredInputs].map((field) => field.id);

console.log({requiredInputIds})

<html>
<body>
<input required="true" id="id-0">
<input required="true" id="id-1">
<input required="false" id="id-2">
<input id="id-3">
<input required="true" id="id-4">
</body>
</html>