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

tia_kamakshiAsked:
Who is Participating?
 
fsze88Connect With a Mentor Commented:
<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">abc</textarea><br />
<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">def</textarea><br />
<textarea cols="50" rows="4" onchange="copychanged=true;" style="width: 400px" name="question41">xyz</textarea><br />

<script type="text/javascript">
window.onload = function(){
  var tas = document.getElementsByName("question41");
  alert(tas.length);
  for (var i=0;i<tas.length;i++){
    alert(tas[i].value);
  }

}
</script>
0
 
asafadisConnect With a Mentor Commented:
Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <title></title>
    <style type="text/css">
    .yellow { background-color: yellow; }
    </style>
    
    <script type="text/javascript">
    function colorMeBad() {
        var textAreas = document.getElementsByName('question41');
        for(var i=0; i < textAreas.length; i++) {
            if(textAreas[i].value == '') {
                textAreas[i].className = 'yellow';
            } else {
                textAreas[i].className = '';
            }
                
        }
    }
    </script>
  </head>
  <body>
    <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 />
    <button onclick="colorMeBad()">Yellow!</button>
  </body>
</html>

Open in new window

0
 
BadotzCommented:
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

0
 
tia_kamakshiAuthor Commented:
Many Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.