How do I get the value of the text input inside a <td> element (Without JQuery)?

Question

How do I get the value of the text input inside a element?

I have multiple ids so I assigned their strings first into an array;

var itemArray = ["regpay", "overtime","absent","nightdiff","ctpa","salary","hdmf","otallowance","others"];

and I instantiated them using a for loop

for (var i = 0; i < itemArray.length; i++)
{
    var e = $("<td><input type=\"text\" autocomplete=\"off\" name=\""+itemArray[i]+"\" id=\""+itemArray[i]+"\"/></td>");
    var mytest =e.find('#'+itemArray[i]).val();
    alert(mytest);
}

the error says "$ is not defined"; How can I get the value of the textboxes inside a td element

?

I've also tried using:

try
{
    var Row = document.getElementById(itemArray[i]);
    var Cell = Row.getElementsByTagName("td");
    var val = Cell.getElementById(itemArray[i]);
}

but the val variable doesn't return anything so I assumed that td doesn't explicitly take the value of the textbox inside it.

Answer 1

If you already have a list of #ids , then all you have to do is use the document.getElementById query selector :

 var ids = [ "regpay", "overtime","absent", "nightdiff", "ctpa", "salary", "hdmf", "otallowance", "others"]; var r = []; ids.forEach(function (id) { r.push(document.getElementById(id).innerHTML); }) alert("text found:" + r); 

 <p id='regpay'>0</p> <p id='overtime'>1</p> <p id='absent'>2</p> <p id='nightdiff'>3</p> <p id='ctpa'>4</p> <p id='salary'>5</p> <p id='hdmf'>6</p> <p id='otallowance'>7</p> <p id='others'>8</p> 

(I used <p >s here, since I didn't want to make a whole table structure, but the above will also work with <td> s. If the above ids refer to input boxes, you should use document.getElementById(id).value instead. Your question wasn't clear on this front.)

Answer 2

You don't need jQuery for this (and therefore you don't need $ ).

You can concatenate a string without using jQuery like this:

"<td><input type=\"text\" autocomplete=\"off\" name=\"" + itemArray[i] + "\" id=\"" + itemArray[i] + "\"/></td>"

In addition, your variable in the for statement is capitalized ( I ), whereas the one you are using later on is not ( i ). Make sure they are the same case if you want your code to work.