CODEWITHSUNDEEP
javascriptjqueryhtml
saimcan
saimcan

Reputation: 1762

How to get dynamically added HTML elements' ID attribute?

I'm adding dynamic fields into my html. While doing this, using clone. I can set dynamically added fields' attributes like ID, but they return me null ID.

How can i get dynamically added buttons' ID ?

Here are my code :

HTML

<div class="row form-group hide" id="items">
    <div class="col-sm-3">
        <input type="text" name="item1[]" class="form-control input-sm text">
    </div>
    <div class="col-sm-2">
        <input type="text" name="item2[]" class="form-control input-sm text">
    </div>
    <div class="col-sm-2">
        <input type="text" name="item3[]" class="form-control input-sm text">
    </div>
    <div class="col-sm-2">
        <input type="text" name="item4[]" class="form-control input-sm text">
    </div>
    <div class="col-sm-2">
        <input type="text" name="item5[]" class="form-control input-sm text">
    </div>
    <div class="col-sm-1">
        <button type="button" name="item6[]" class="btn btn-danger delete"><i class="glyphicon glyphicon-remove"></i></button>
    </div>
</div>

<div class="row form-group">
    <div class="col-sm-4">
        <div class="btn btn-success" id="add">
            add new field
        </div>
    </div>
</div>

JS

$(document).ready(function()){
 $("#add").click(function (e){

        $.ajax({
            type: "POST",
            url : "someURLHERE",
        },"json");

        //$fieldIdCount++;

        var $template = $('#items');
        var $clone = $template.clone().removeClass('hide').removeAttr('id').insertBefore($template);

        $.get("myPhpURL", function(data){

        var $firstField = $clone.find('[name="item[]1"]');
        $firstField.id=('area1'+data+'ID');
        var $secondField = $clone.find('[name="item[]2"]');
        $secondField.id=('area2'+data+'ID');
        var $thirdField = $clone.find('[name="item[]3"]');
        $thirdField.id =('area3'+data+'ID');
        var $fourthField = $clone.find('[name="item[]4"]');
        $fourthField.id =('area4'+data+'ID');
        var $fifthField = $clone.find('[name="item[]5"]');
        $fifthField.id=('area5'+data+'ID');
        var $removeButtonFieldID = $clone.find('[name="item[]6"]');
        $removeButtonFieldID.id=('removeFieldsButton'+data+'ID');

        alert($removeButtonFieldID.id.toString());
        },"json");

    });
}

$("body").on("click", ".delete", function(event){

    alert(jQuery(this).attr("id"));

    $.ajax({
                type: "POST",
                url : "anotherURLHERE"
            },"json");

    $(this).parent("div").prev('div').remove();
    $(this).parent("div").prev('div').remove();
    $(this).parent("div").prev('div').remove();
    $(this).parent("div").prev('div').remove();
    $(this).parent("div").prev('div').remove();
    $(this).parent("div").parent('div').remove();   
});

Here is the problem : alert(jQuery(this).attr("id")); is returning null.

I know i am cloning same elements and calling them back from same names like 

var $firstField = $clone.find('[name="item[]1"]');

so that I cannot get any of these fields' values.

I'm new in this, i need to add these fields dynamically and get their newly created ID numbers.

Thanks in advance.

--------------UPDATE-------------------

You can change clonned elements' id number, but when it comes to using their id values in another parts of your js file, it always returns the default parent id.

So, the solution of this situation is using append() method at once, to generate and use ID numbers of dynamically added html elements. That worked for me.

Upvotes: 0

Views: 1626

Answers (1)

RGS
RGS

Reputation: 5211

Name Selector is wrong. Instead of '[name="item[]1', it must be '[name="item1[]'.

var $firstField = $clone.find('[name="item1[]"]');
$firstField.id=('area1'+data+'ID');

Upvotes: 1

Related Questions