How to get value of dynamically generated textbox with same id using AJAX/PHP?

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>

Are you adding them dynamically via JS, or PHP? If JS the exsiting JavaScript will not be aware of newly added DOM elements. You will have to use event delegation to bubble events up to a point in the DOM which was there when JS ran on page load. — Jay Blanchard
– Jay Blanchard, Commented Jul 5, 2016 at 15:36
duplicate ids is illegal html, and there's nothing you can do to make that work. getElementById will only ever return ONE element. you need to change the ids to be unique for each one. — Marc B
– Marc B, Commented Jul 5, 2016 at 15:37
then how should I send the value of the with a dynamic ID to 'checkusername()' function so that it can be stored in that variable 's' ? — Assasin
– Assasin, Commented Jul 5, 2016 at 15:57

George Pant · Accepted Answer · 2016-07-05 23:28:09Z

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.

edited Jul 5, 2016 at 23:28

answered Jul 5, 2016 at 17:12

George Pant

2,1171 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

George Pant Over a year ago

As i said...."Since i do not have all your javascript code I could not test it but something like this should work.".So maybe you want to be more specific and define what is not working...do you have an error in the console?

Moussa Khalil · Accepted Answer · 2016-07-05 15:39:20Z

0

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)

answered Jul 5, 2016 at 15:39

Moussa Khalil

6355 silver badges12 bronze badges

1 Comment

Assasin Over a year ago

Your code isn't working. I want the value of the textbox according to its position and want it to be stored in that variable. One textbox value at a time.

Collectives™ on Stack Overflow

How to get value of dynamically generated textbox with same id using AJAX/PHP?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related