• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 340
  • Last Modified:

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

0
tia_kamakshi
Asked:
tia_kamakshi
2 Solutions
 
fsze88Commented:
<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
 
asafadisCommented:
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now