Home JS get form data into array foreach loop for array getting values as undefined

Questions

JS get form data into array foreach loop for array getting values as undefined

June 28, 2023

I am getting values from a form and am running a for each loop to see if they are empty. if they are I make the textbox with missing information red and green if not. However, when I put my values throw for each loop. it gets undefined values. I have checked the values in the array after filling the form and they are there. Anyone knows why this happens.

let Ac = document.forms["formtest"]["Accession"].value;
let ItName = document.forms["formtest"]["ItemName"].value;
let date = document.forms["formtest"]["date"].value;
let ItType = document.forms["formtest"]["ItemType"].value;
let ItCon = document.forms["formtest"]["ItemCondition"].value;
let ItDon = document.forms["formtest"]["Donation"].value;
let ConFN = document.forms["formtest"]["FirstName"].value;
let ConLN = document.forms["formtest"]["LastName"].value;
let ConOrg = document.forms["formtest"]["Org"].value;
let Room = document.forms["formtest"]["Room#"].value;
let Shelf = document.forms["formtest"]["Shelf#"].value;
let Row = document.forms["formtest"]["Row#"].value;
let Acerror = document.getElementById("Acerror");
let ItNameerror = document.getElementById("ItemNameerror");
let dateerror = document.getElementById("date");
let ItTypeerror = document.getElementById("ItemTypeerror");
let ItConerror = document.getElementById("ItemConditionerror");
let ItDonerror = document.getElementById("Donationerror");
let Roomerror = document.getElementById("Roomerror");
let Shelferror = document.getElementById("Shelferror");
let Rowerror = document.getElementById("Rowerror");
let ConFNerror = document.getElementById("FirstNameerror");
let ConLNerror = document.getElementById("LastNameerror");
let ConOrgerror = document.getElementById("OrgNameerror");
alert(Ac + ItName + date + ItCon + ItType + Room + Shelf + Row + ItDon);
const Errorstyles = [Acerror, ItNameerror, dateerror, ItTypeerror, ItConerror, Roomerror, Shelferror, Rowerror, ItDonerror];
const blanktext = [Ac, ItName, date, ItCon, ItType, Room,
  Shelf, Row, ItDon
];
alert(blanktext);
blanktext.forEach((i) => {
  Errorstyles.forEach((Style) => {
    if (i == "") {
      Style.style.borderColor = "red";
    } else {
      Style.style.borderColor = "green";
    }
  });
})

The style works its just the values that don’t.
Thanks!

>Solution :

You need to select based on the index of the text, not loop over all of the elements.

const errorElems = [Acerror, ItNameerror, dateerror, ItTypeerror, ItConerror, Roomerror, Shelferror, Rowerror, ItDonerror];
const textValues = [Ac, ItName, date, ItCon, ItType, Room, Shelf, Row, ItDon];

textValues.forEach((text, index) => {
  // errorElems[index].classList.toggle('error', text.length === 0);
  const color = text.length === 0 ? 'red' : 'green';
  errorElems[index].style.borderColor = color;
});