My problem is very easy. I have written the following PHP code to generate the arrays of textareas:

for ($i=0; $i<length; $i++)
{
echo '<textarea type="text" name="username'. $i.'" cols="60" rows="4" onkeydown="check_username(this.form.username'. $i. '.value)">'. $sentences_data [$i]. '</textarea> <span id="username_label"></span><br/>';
}

The Java function is

function check_username(username) {
    if (ajax) {

            ajax.open('get','testuser.php?username=' + encodeURIComponent(username));

            ajax.onreadystatechange = handle_check;

            ajax.send(null);                


    }
    else
    {
        alert("Ajax not created");
        document.getElementId('username_label').innerHTML = 'Dummy text';
    }
}

function handle_check() {
    if((ajax.readyState == 4) && (ajax.status == 200)) {

        document.getElementById('username_label').innerHTML = ajax.responseText;

    }
}

Actually, when i edit the textarea data it returns the validated data back to the PHP just below the first textarea. But i want all the validated data on right side of each textarea. Please suggest me the changes in my code both in php and java code i have demonstrated above.

You are generating one <span id='username_label'> for each textarea.
Then, when you run document.getElementById('username_label') , it returns only the first instance of the element with the given id.
You have to assign a different id to all span elements if you want to be able to identify them uniquely. You do this for textareas, but not for username_label spans.

for ($i=0; $i<length; $i++)
{
    echo '<textarea type="text" name="username' . $i .
         '" cols="60" rows="4" onkeydown="check_username('. $i .')">' .
         $sentences_data[$i] . '</textarea> <span id="username_label' . $i .
         '"></span><br/>';
}
function check_username(index) {
    if (!ajax) {
        alert("ajax not created");
        return;
    }
    var username = document.getElementById("username" + index);
    ajax.open("get", "testuser.php?id=" + username);
    ajax.onreadystatechange = function() { handle_check(index); };
    ajax.send(null);
}

// Passing index to this function allows access to correct username_label element.
function handle_check(index) {
    if (ajax.readyState == 4 && ajax.status == 200) {
        document.getElementById("username_label" + index).innerHTML = ajax.responseText;
    }
}

Thank you so much for your reply but one thing is not understandable.

You know on keydown event i'm sending the value of the textarea to the check_username function as (onkeydown="check_username(this.form.username'. $i. '.value)")
but you are just sending the index not the value.
Do you mean like this:

onkeydown="check_username(this.form.username'. $i. '.value, $i)";

I mean if i have pass both arguments to the java function. Because i have to send the value of the textarea to get validated not the index.

Please confirm that.

Thank you so much for your time to solve my problem.

I'm really sorry for my last message actually i did not comprehend the following line in your code:

var username = document.getElementById("username" + index);

This line gets the actual value of the textarea based on the event called by the index number of the textarea.

Yes, you are right, I am sorry. That line should read:

var username = document.getElementById("username" + index).value;

Sorry about it.

Thanks alot. Now it is working fine.
No need to say sorry. You have already saved my time.

One of the surprising thing is that same script is not working on mozilla firefox,
Here is the Ajax code:

var ajax = false;

if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {


try {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
}

catch (e1) {

try {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2) {}
}
}

if (!ajax) {
alert ('Some page functionality is unavailable.');
}