asked on

Getting value of each textarea, If many has same name

Hi,

I have to some bit in javascript, so I was creating sample code

My problem is:

I have many textfields, textareas of same name in my html file
for example
<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">9 nights hotels</textarea><br />
<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41"></textarea><br />
<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41"></textarea><br />

How can I fetch value of each textarea with name question41

Basically these are in different table tr. If the value is blank then I wanted to add css style to the tr

var textFieldValue = document.getElementById(textFieldName).value;

alert(textFieldValue)
if(textFieldValue=="")
{
alert("inside");
tr.className = "yellow";
}

You can see this in my test code

Please guide

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
tr.yellow td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background: #FFC;
	}

</style>
<script type="text/javascript">

function test()
{
    var maxRowCount = document.getElementById("maxRowCount").value;
    alert(maxRowCount);

	for (i=1;i<=maxRowCount;i++)
	{
		var trIdName = "question_"+document.getElementById("questionID").value+"_row_"+i;
		var tr = document.getElementById(trIdName);

		if(tr.style.display=='none')
		{

		}else
		{
			var textFieldName = "question"+document.getElementById("questionID").value;
			var textFieldValue = document.getElementById(textFieldName).value;

			alert(textFieldValue)
			if(textFieldValue=="")
			{
				alert("inside");
				tr.className = "yellow";
			}
		}
	}
}

</script>
</head>
<body>
<form>
<input name="questionID" type="hidden" id="questionID" value="41" />
<input name="maxRowCount" type="text" id="maxRowCount" value="3" />

<table width="100%">
<tr>
<td style="width: 608px" valign="top">
	<table width="100%" border="0" cellpadding="3" cellspacing="0">

	<tr id="question_41_row_1">
	    <td align="left">
		<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">9 nights hotels</textarea><br />
	    </td>

	</tr>
	 <tr id="question_41_row_2">
	    <td align="left">
		<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41"></textarea><br />
	    </td>

	</tr>

	<tr id="question_41_row_3" style="display: none">
	     <td align="left">
		<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41"></textarea><br />
	     </td>

	 </tr>

	 </table>

</td>
</tr>
</table>

<input type="button" onclick="test()" value="Change CSS">
</form>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Kin Fat SZE

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

asafadis

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Badotz

If you gave each textarea it's own ID, then you could get each of them simply using:

var ta2 = get_ta('ta2');

<script type="text/javascript">

function get_ta(id) {
    return document.getElementById(id); // Reference the textarea #2
}
</script>
...
...
<textarea id="ta1" cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">abc</textarea><br />
<textarea id="ta2" cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">def</textarea><br />
<textarea id="ta3" cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">xyz</textarea><br />

Open in new window

tia_kamakshi

ASKER

Many Thanks