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开发者_如何学C 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

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 recommend jQuery. It is a widely used and generally highly recommended 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.net 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;
}