CODEWITHSUNDEEP
javascriptjqueryforms
Learner
Learner

Reputation: 140

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(divName).appendChild(newdiv);
            document.getElementById(dynamic_species).innerHTML = species.innerHTML;
            document.getElementById(dynamic_breed).innerHTML = breed.innerHTML;
            field_counter++;

        }
    }
</script>
<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>

</div>

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 :

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

            }
        });

    });

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 .

Upvotes: 3

Views: 2973

Answers (2)

Tim
Tim

Reputation: 5681

Thats because they do not exists yet when binding to it's change event.

You could add the event listener in the add_input function, or use a more abstract event handler:

$("form").on("change", ".species", function () {
    var id = $(this).attr("data-id");
    ...
});

This will require you to drop the ID's and use class attributes instead. Which is the way to go by my opinion.

You can attach the ID's using $(speciesElement).attr("data-id", id).

Upvotes: 1

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

Use event delegation for dynamic generated content like so :

// change `document` to top level parent that existed on page or
// parent container
$(document).on("change", "#species1", function(){...});

Upvotes: 3

Related Questions