getElementById( ) not working on Dynamically assigned id

Question

I have gone through google and some of SO questions (such as this & this) as well but I didn't find the solution. I am working for validation of a dynamically generated rows in a table,initially I am trying to validate the first td, loop and alert is working all fine but document.getElementById() is giving a null value. The script is at the very bottom of the page.

and here is the JS code.

edit: I have added the code, and what I am trying to do is display the error (Please fill) when field is left blank on the click of submit button and hide it when it is filled.

$(function(){
  $(document).on("click",".addRowAux",function(){
    /*var valanx1 = $(this).parents("tr").children("td:nth-child(2)").children("input").val();
 var valanx2 = $(this).parents("tr").children("td:nth-child(3)").children("input").val();
 var valanx3 = $(this).parents("tr").children("td:nth-child(4)").children("select").val();
 var valanx4 = $(this).parents("tr").children("td:nth-child(4)").children("input").val();*/
 
 var countrow= $("#annextable tr").length;
 
  /*countrow++;*/
  if(countrow<11)
  {
  $("#aux").append('<tr><td align="center">'+countrow+'</td><td align="center"><input type="text" name="ref_name[]" id="ref_name"/><span id="refNm_error">Please fill</span></td><td align="center"><input type="text" name="ref_desg[]" id="ref_desg"/></td><td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td><td align="center"><input type="text" name="ref_email[]" id="ref_email"/></td><td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile"/></td><td align="center"><input type="text" name="ref_pan[]" id="ref_pan"/></td><td align="center"><span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td></tr>');
  }
  else
  {
    //countrow--;
    alert("Can not add more then 10 record.");
  }
});
  
});
   $(document).on('click', '#removeRowaux', function () { // <-- changes 
    var countrow= $("#annextable tr").length;
 if(countrow>3)
 {
      $(this).closest('tr').remove();        
        var tblObj = document.getElementById('annextable'); 
        var no_of_rows = tblObj.rows.length; 
        for(var i=0; i<no_of_rows-1; i++) 
        {
        tblObj.rows[i+1].cells[0].innerHTML = i+1;
        tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1);
        
        ////alert(kj);
        //document.getElementById("refNm_error").id ="refNm_error"+j;
        }
 }
 else{
  alert("you can not delete this")
  }
 });
$(document).on('click', '#hods', function () {        
    var tblObj = document.getElementById('annextable'); 
        var no_of_rows = tblObj.rows.length; 
        for(var i=0; i<no_of_rows-1; i++) 
        {tblObj.rows[i+1].cells[1].setAttribute( "delThis", i+1)
        
        var j=tblObj.rows[i+1].cells[1].getAttribute("delThis");
        document.getElementById("refNm_error").id ="refNm_error"+j;
        }
       
   
});
  
$(function(){
  $(document).on('change', '.rel_type', function() {
   var relation = $(this).val();
   if(relation =='OT'){
    $(this).next("input").show();
    $(this).next("input").val("Please Specify");
    }
  else{
   $(this).next("input").hide();
   $(this).next("input").val("")
  }
  });   
});




function yoVal(){
var refNm =document.getElementsByName('ref_name[]');   

for(var i=0;i<=refNm.length;i++) {
    if(refNm[i].value==""){
    alert("success");
}
    else{        
       var ch ='refNm_error'+(i+1);
       alert(ch);  
    //document.getElementById(ch).style.display = "none";
        alert("fail")
    }
    
}}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="refForm">
                    <table width="99%" border="1"  id="annextable" style="border-collapse:collapse" align="center">
                <thead>
                  <tr style="background:#ddd;">
                    <th>S.No</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Address</th>                   
                    <th>Email</th>
                    <th>Mobile</th>
                    <th>PAN</th>
     <th>Action</th>
                    </tr>
                </thead>
                 <tbody id="aux">
      <tr>
                    <td align="center">1</td>
                    <td align="center"><input type="text" name="ref_name[]" id="ref_name"/><br/><span id="refNm_error">Please fill</span></td>
                    <td align="center"><input type="text" name="ref_desg[]" id="ref_desg"/></td>
        <td align="center"><input type="text" name="ref_address[]" id="ref_address"/></td>
     <td align="center"><input type="text" name="ref_email[]" id="ref_email"/></td>
                    <td align="center"><input type="text" name="ref_mobile[]" id="ref_mobile"/></td>
                    <td align="center"><input type="text" name="ref_pan[]" id="ref_pan"/></td>
                    <td align="center">
     <span class="addRowAux">Add</span>&nbsp;&nbsp;<span id="removeRowaux">Remove</span></td>
                  </tr>  
                  
                </tbody></table>
                        <input type="button" onclick="yoVal()" value="Test" id="hods"/>
                    </div>

Why downvote ? may I know the reason, it will help me in future. Thanks. — Encrypter, Sep 28 '15 at 07:14

score 1 · Answer 1 · answered Sep 28 '15 at 06:52

1

Because you are adding extra quotes in beginning and end in variable k. use:

 var k = 'refNm_error' + (i+1);

answered Sep 28 '15 at 06:52

Milind Anantwar

81,290
25
94
125

thanks for your response, I tried using it without quotes initially, but it didn't work, that is why I added the quotes. :) – Encrypter Sep 28 '15 at 07:06

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

You might need to reload the DOM after adding dynamic elements.

This link might help

edited May 23 '17 at 12:06

Community

1
1

answered Sep 28 '15 at 08:40

Varun Kumar

478
1
4
15

jyrkim · Answer 3 · 2015-09-28T12:20:19.043

Update, when you created your dynamic table rows for the table you didn't assign unique ids for input elements. So I updated the addRow handler:

$(document).on("click", ".addRowAux", function () {

to add unique input ids, like following:

$("#aux").append('<tr><td align="center">' + countrow + '</td><td align="center"><input type="text" name="ref_name[]" id="ref_name_' + countrow + '"/><span id="refNm_error_' + countrow + '">Please fill</span>...

and also I changed in the code:

<span id="removeRowaux">Remove</span>

to use class instead of an id:

<span class="removeRowaux">Remove</span>

Now the remove row handler listens to events from spans with class removeRowaux:

 $(document).on('click', '.removeRowaux', function ()

Now the remove row functionality works and there are no spans with identical ids. So I don't think there was anything wrong with getElementById() in the code - it works fine :-)

Updated Fiddle

score -1 · Answer 4 · answered Aug 21 '23 at 22:11

The id of elements should be unique! so try to use unique ids for inputs (ref_name_1,ref_name_2 , ...) and unique ids for spans (refNm_error_1, refNm_error_2 , ...) OR Simply just instead of id, use class (class="ref_name" or class="refNm_error") and then find them in a way like this:

$('.ref_name').each(function(){
if($(this).val() == ""){
$(this).next('span').html("none");
}

getElementById( ) not working on Dynamically assigned id

4 Answers4