Search code examples
javascripthtmlhtml-tabletextbox

Getting the values of textboxes in Javascript

I have this html code: 

<table border="" cellpadding="3" cellspacing="0" id="mytable">

<tbody><tr><td>Song:</td> <td><input type="text" name="song" maxlength="64" size="48" /> </td></tr>
<tr><td>Artist:</td> <td><input type="text" name="artist" maxlength="16" size="48" /> </td></tr>

How do I get the values of "song" and "artist"? I have tried:

var elTableCells = mytable.getElementsByTagName("td");
alert(elTableCells[2].value);
alert(elTableCells[4].value);

but I keep getting "undefined" even when there is text inside the textbox

Solution

  • First, td elements don't have a value attribute, so calling .value on them won't do a thing. Second, the value is actually on the input element, so you need to do mytable.getElementsByTagName('input') instead. Even better would be to give your input fields ids and then use getElementById. This would mean you could alter your HTML without your JS breaking.