How to get value of dynamically generated textbox

Question

In this webpage I am generating multiple textbox dynamically and each textbox is meant to hold unique value and I want to get that value dynamically.But I'm not being able to catch the value of the textbox according to its position. This code is only working for the firstly generated textbox. I have code like this

<tr>
<td  align="center"><input type="text" name="serialNoArray[]" id="serialArray" onChange="checkusername()" ><span id="std_id_status"></span></td>
</tr>

<script> 
function checkusername() { 
    var s = _("serialArray").value; 
    if(s != "") {  
        _("std_id_status").innerHTML = 'checking ...'; 
        var ajax = ajaxObj("POST", "sellingDetails.php");
        ajax.onreadystatechange = function() { 
            if(ajaxReturn(ajax) == true){
                _("std_id_status").innerHTML = ajax.responseText;
            }
        }
        ajax.send("std_id_check="+s);
      }             
}    
</script>

Answer 1

First you should use classes not id, because an element with id must be unique for the entire document. And since you use onChange you can pass the element using this like that onChange="checkusername(this)" . I guess you should also change the code of the restrict function onkeyup="restrict('serialArray')" also but i do not see that code so I cannot help you more if you do not provide this code too...

    <tr>
    <td  align="center"><input type="text" name="serialNoArray[]" class="serialArray" onkeyup="restrict('serialArray')" onChange="checkusername(this)" ><span class="std_id_status"></span></td>
    </tr>

Then you can get only the value of the element being changed and change the html of the matching span only.(I use jQuery in the example so you should include it in your document.)

<script>
    function checkusername(s) {

        if (s.value != "") {
            $(s).nextAll('.std_id_status').first().html('checking ...');
            var ajax = ajaxObj("POST", "sellingDetails.php");
            ajax.onreadystatechange = function() {
                if (ajaxReturn(ajax) == true) {
                  $(s).nextAll('.std_id_status').first().html(ajax.responseText);
                }
            }
            ajax.send("std_id_check=" + s.value);
        }
    }
</script>

Since i do not have all your javascript code I could not test it but something like this should work.

Answer 2

I have not tested but this should do it

All the dynamically generated textboxes, give them a class

<input type="text" class="tagMe" placeholder="Enter Serial No."  onkeypress="return isNumberKey2(event)" onkeyup="restrict('serialArray')" onChange="checkusername()" required autofocus >

Collecting the data

var info= "";
$('.tagMe').each( obj, function( key, value ) {
 if(info != "")
      info += "^"; // ^ is a delimiter
 info += value; 
});

Send info to your server, split on ^ and parse data (careful of empty elements)