How to Validate Dynamically Added Input fields

Question

I've the problem with div id in script. I just want to know how to control div id for using function id in another script. Here's my form:

<div class="container">
    <div class="row">
        <div class="col-md-7 field_wrapper">
            <div data-role="dynamic-fields">
                <div class="form-inline">                                                   
                    <div class="form-group" id="txtboxToFilter">
                        <label for="nip">NIP:</label>
                        <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/>
                    </div>
                    <div class="form-group">
                        <a href="javascript:void(0);" class="add_button btn btn-success btn-xs" title="Tambah Pegawai"><i class='fa fa-fw fa-plus'></i></a>
                    </div>
                    <span id="name_status"></span>
                </div> 
            </div>  
        </div>  
    </div>

And here's my script:

$(document).ready(function(){
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/></div><div class="form-group"><label for="jabatan">Jabatan:</label><select class="form-control" id="jabatan" name="jeniskejadian" required><option value=""></option><option value="SMC / KAKANSAR">SMC / KAKANSAR</option><option value="STAFF OPERASI / KASIOPS">STAFF OPERASI / KASIOPS</option><option value="OSC / KORPOS">OSC / KORPOS</option><option value="DANTIM">DANTIM</option><option value="RESCUER">RESCUER</option><option value="STAFF KOMUNIKASI">STAFF KOMUNIKASI</option><option value="HUMAS">HUMAS</option><option value="STAFF ADMINLOG">STAFF ADMINLOG</option></select></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); // Add field html
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});

function checkname()
{
 var name=document.getElementById( "UserName" ).value;

 if(name)
 {
  $.ajax({
  type: 'post',
  url: 'checkdata.php',
  data: {
   user_name:name,
  },
  success: function (response) {
   $( '#name_status' ).html(response);
   if(response=="OK")   
   {
    return true;    
   }
   else
   {
    return false;   
   }
  }
  });
 }
 else
 {
  $( '#name_status' ).html("");
  return false;
 }
}

For the first time in

<div class="form-group" id="txtboxToFilter">
    <label for="nip">NIP:</label>
    <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/>
</div>

It can be used to using function checkname(), but if I would to click in

<div class="form-group">
    <a href="javascript:void(0);" class="add_button btn btn-success btn-xs" title="Tambah Pegawai"><i class='fa fa-fw fa-plus'></i></a>
</div>

for adding the same input type text with function of my script $(addButton)

var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>';

but the result is that var fieldHTML couldn't use function onkeyup checkname(). Please help me...

Answer 1

You should pass a reference of the element on which the inline event listener is attached to. You need to pass the this reference to the function and use the this reference to get the element.

Change you functions by adding this .

eg

<input type="text" class="form-control" id="UserName" onkeyup="checkname(this);" placeholder="Masukkan NIP" required/>

Also, for fieldHTML

var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> 
<input type="text" class="form-control" id="UserName" onkeyup="checkname(this);" placeholder="Masukkan NIP" required/></div><div class="form-group"><label for="jabatan">Jabatan:</label><select class="form-control" id="jabatan" name="jeniskejadian" required><option value=""></option><option value="SMC / KAKANSAR">SMC / KAKANSAR</option><option value="STAFF OPERASI / KASIOPS">STAFF OPERASI / KASIOPS</option><option value="OSC / KORPOS">OSC / KORPOS</option><option value="DANTIM">DANTIM</option><option value="RESCUER">RESCUER</option><option value="STAFF KOMUNIKASI">STAFF KOMUNIKASI</option><option value="HUMAS">HUMAS</option><option value="STAFF ADMINLOG">STAFF ADMINLOG</option></select></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>';

Function checkname(element) as :

variable element contains the element this is being used. You can access the element by using element variable.

 function checkname(element)
 {
      var name= element.value;

      console.log('Checkname '+name);
  }