Getting the values of textboxes in Javascript

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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;
}