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

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

• javascript
• html
• html-table
• textbox

6 Answers 6

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.

The tagName that is relevant here is "input", not td. That will get you what you're looking for.

It's almost a cliche on StackOverflow, but I suggest you take a look at JQuery. JQuery allows you to treat your html as a database and query it to get this kind of stuff. If your markup was like this:

<input type="text" id="song" maxlength="64" size="48" />

You could get the value like this:

$("#id").value();

If you wanted to get the value of the maxlength attribute on it, you could do this:

$("#id").attr("maxlength");

Much more fun than digging through element arrays.

var song   = document.getElementsByName("song").value;
var artist = document.getElementsByName("artist").value;

Download jquery

jQuery("input[name='song']").val()

To try and resolve the argument below. This can be down with plain javascript as above but for simplicity and cross browser standardisation I would remend jQuery. It is a widely used and generally highly remended library.

alert(document.getElementsByName("song")[0].value);
alert(document.getElementsByName("artist")[0].value);

I find this to work effectively, Below I am getting a date from an asp textbox and then getting today's date. I then send both dates through a function to get the number of months that I need to do my calculation (be aware that the code uses Infragistics libraries (if you intent to copy and paste, replace those calls with standard JavaScript calls):

function calculateMonthlyRepayment() 

    var tStartDate = $find('dp_Start_Date');
    var startDate = tStartDate.get_value();
    var today = new Date();
    var numMonths = monthDiff(startDate, today);     
    var rate = igedit_getById('WebNumericEdit_InterestRate').getValue() * 0.01;
    var intRate = (rate / 100) / 12;
    var principal = igedit_getById('WebCurrencyEdit_Proposed_Owing').getValue();
    var repayment = (principal * (Math.pow((1 + intRate), numMonths)) * intRate / (Math.pow((1 + intRate), numMonths) - 1));

    igedit_getById('txt_Monthly_Repayment').setValue(repayment);

}
function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}