How to select a dynamically generated form element in jquery / javascript using its ID?

I am trying to create a row of 3 form fields dynamically when the user clicks on the ADD button / plus symbol .

enter image description here

Javascript code used to create the form elements is below :

<script type="text/javascript">
    var field_counter = 1;
    var field_limit = 5;
    species = document.getElementById('species');
    breed = document.getElementById('breed');

    function addInput(divName){

        if (field_counter == field_limit)  {
            alert("You have reached the limit of adding " + field_counter + " inputs");
        else {

            var dynamic_species = 'species'+field_counter; //dynamic id for species
            var dynamic_breed = 'breed'+field_counter;  //dynamic id for breed
            var dynamic_quantity = 'quantity'+field_counter; //dynammic id for quantity
            var dynamicForm = '<div class="form-group"><div class="col-md-4"><label for="'+dynamic_species+'">Animal Type</label><select class="form-control input-sm '+dynamic_species+'" id="'+dynamic_species+'"><option></option></select></div>';
            dynamicForm+='<div class="form-group"><div class="col-md-4"><label for="'+dynamic_breed+'">Breed</label><select class="form-control input-sm '+dynamic_breed+'"  id="'+dynamic_breed+'"><option></option></select></div>';
            dynamicForm+='<div class="form-group"><div class="col-md-2"><label for="'+dynamic_quantity+'">Quantity</label><input type="number" name="quantity_export" id="'+dynamic_quantity+'" class="form-control input-sm '+dynamic_quantity+'" /></div>';
            var newdiv = document.createElement('div');
            newdiv.innerHTML =  dynamicForm;
            document.getElementById(dynamic_species).innerHTML = species.innerHTML;
            document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;

<div class="col-md-2" >
    <label for="">&nbsp;</label>
    <i onclick="addInput('dynamicInput');" style="cursor: pointer; border: none;" class="fa fa-plus form-control input-sm">Add</i>


Using the above code am creating the form fields “Animal Type , Breed and Quantity “, all together in a row as shown in the image . Maximum number of rows that can be added is limited to the value of the variable “field_limit”.

The value of the drop downs are initially populated from the parent drop down using the code :

species = document.getElementById('species');
breed = document.getElementById('breed'); 
document.getElementById(dynamic_species).innerHTML = species.innerHTML;
document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;

Question : How can I select the dynamically generated ID of the new form fields .

enter image description here

Here is the script am using to select the first row of form fields which is in the HTML when the page loads for the first time :

        var param = {'id':$(this).val()};
            type : 'POST',
            url : '<?php echo base_url();?>select_breed',
            dataType : 'json',
            data: param,
            success : function(data)
                var select = $('#breed');
            error : function(XMLHttpRequest, textStatus, errorThrown)



The second row of form fields are created dynamically with the following ID’s

First Field : Animal Type : ID="species1"

Second Field : Breed : ID="breed1"

Third Field : Quantity : ID="quantity1"

I am not able to select the dynamically generated form fields using the jquery selector :- eg: $("#species1").change(function(){}); , it is not working .

What I am trying to do ?

I need to get the value of these fields using its ID attribute. Any help would be highly appreciated . Thank you .

Source: forms

Leave a Reply