[arijit.prince]

This is the code I have. i want unique Id for each text box(id="messageText"). PLEASE GIVE IDEA.
As due to same ID of the text box the JS function is not showing the proper result and the characterleft count is not decreasing automatically.

<script type="text/javascript">
currentSelectionOnPage = <%=currentSelectionOnPage%>;

function charsleft()
{
theInputBox = document.getElementById('messageText');
theCountBox = document.getElementById('charsLeft');
var currentChars = theInputBox.value.length;
theCountBox.value = Math.max((maxChars - currentChars),0);
if(currentChars > maxChars)
{
theInputBox.value = theInputBox.value.substring(0,maxChars);
}
}
</Script>

for( int i = 0; i < 10; i++ ) {

if(competencyAreaDTO.getComment()) {

String commentSelKey = new String(String.valueOf(counter+1)+"_COMMENTS");
String prevCommetSelection = new String();
int charLeft =(int) new Integer(500);
if(userSelection.get(commentSelKey) != null) {
prevCommetSelection = (String) userSelection.get(commentSelKey);
charLeft = 500 - (prevCommetSelection.length());
}


<tr>
<td height="10" >&nbsp;</td>
</tr>



<tr>
<td height="10" ></td>
</tr>
<tr>
<td colspan="8"><textarea id="messageText" onchange="charsleft()" ><%=prevCommetSelection%></textarea></td>
</tr>
<tr>
<td colspan="8">
<input type="text" ><b>&nbsp;Characters Left</b></font>
</td>
</tr>
<tr>
<td height="10" >&nbsp;</td>
</tr>
}

This post has been edited by Dormilich: 11 March 2011 - 04:48 AM
Reason for edit:: please use [code] /* your code source here */ [/code] tags when posting code

[jcubic]

You can do this:

var ta = document.getElementsByTagName('textarea');
for(var i=la.length;i--;)/> {
    ta.setAttribute('id', 'messageText_' + i);
}

but the better solution is to use class instead of id, if you have a function that return all elements with a give class (or if you're using some library) then you process array of textarea-s that have messageText class.

But if the only thing is that you want to count individual count for alls textarea-s then you can add onkeypress event for every area and every event will have variable that point to associated area.

In jQuery this will look like this

var limit = 100; // characters limit

$('textarea').keypress(function() {
   var text_length = $(this).val().length;
   $('input.count').val(limit-text_length);
});

if your limit counter is in the next row then you can use

$(this).parents('tr').next().children('input').val(limit-text_length);

instead of

$('input.count').val(limit-text_length);

This could be recreated using raw javascript.

This post has been edited by jcubic: 13 March 2011 - 04:34 AM