Validate arrays of textarea in PHP

[fawad123]

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.

[sergb]

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;
    }
}

[fawad123]

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.

[fawad123]

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.

[sergb]

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

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

Sorry about it.

[fawad123]

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

[fawad123]

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.');
}