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...

So you want to get the reference to the div on every keyup event?? — Ayush
– Ayush, Commented Mar 5, 2017 at 11:06
Yes. I want my fieldHTML can use function onkeyup="checkname()". — Dika Andharu
– Dika Andharu, Commented Mar 5, 2017 at 11:10
You are getting the same output on keyup for every new fieldHTML created, Right?? — Ayush
– Ayush, Commented Mar 5, 2017 at 11:11
Yeah. I want function of checkname() can be used when fieldHTML is created. — Dika Andharu
– Dika Andharu, Commented Mar 5, 2017 at 11:15

Ayush · Accepted Answer · 2017-03-05 11:16:10Z

0

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.

e.g.

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

answered Mar 5, 2017 at 11:16

Ayush

7599 silver badges19 bronze badges

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

7 Comments

Dika Andharu Over a year ago

Sorry, what's the function of console.log('Checkname '+name); ? I'm beginner in programming :(

Ayush Over a year ago

@DikaAndharu console.log prints the output in the console log on the browser. Open chrome or firefox. Right click and then open inspect element. Then go to console tab. You will see the output there. It is better than using alert

Dika Andharu Over a year ago

Sorry, It works but the result of selecting from database was not successful. When the result is "OK" that just printing to the first input type text . And of fieldHTML couldn't work...

Ayush Over a year ago

@DikaAndharu What is the returned response ??

Dika Andharu Over a year ago

The response is just returned for the first . When I tried to inserting in input type text from fieldHTML, the result is just showing in the first . Could you please look at my span id on input type text original and fieldHTML. Is it possible sir ? If that's impossible, It's okay..

|

Collectives™ on Stack Overflow

How to Validate Dynamically Added Input fields

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related