Home » Php » php – Dynamically Created Inputs with Javascript Don't Show Drop Down List

php – Dynamically Created Inputs with Javascript Don't Show Drop Down List

Posted by: admin February 25, 2020 Leave a comment

Questions:

I am building a part that includes text input (which has a drop down list using a database), and dynamically add more of the same inputs. The first input looks like this:

enter image description here

After I add another input dynamically, the second input can’t show the drop down list. It looks like this:

enter image description here

I didn’t have a js/ajax education so trying to edit the code parts of js which I found on internet, using my java knowledge.

The html part of the first row is as following:

<tr class="no-border" id="articles">
    <td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;">
        <i class="fas fa-plus" name="add" id="add"></i>
    </td>
    <td style="padding: 5px;">
        <div class="dropdown">
            <input type="text" class="form-control form-control-sm" name="product1" id="product1" autocomplete="off" required form="purchaseForm" />
        </div>
    </td>
    <td style="padding: 5px; max-width: 40px;">
        <input type="number" class="form-control form-control-sm" step="0.001" required />
    </td>
    <td style="padding: 5px; max-width: 40px;">
        <input type="number" class="form-control form-control-sm" step="0.001" required />
    </td>
</tr>

The javascript part to create new row and create drop down list are as the following:

var i=1;
$('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr class="no-border" id="row'+i+'"><td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;"><button class="btn btn_remove" name="remove" id="'+i+'" type="button" style="padding: 0;"><i class="fas fa-minus"></i></button></td><td style="padding: 5px;"><div class="dropdown"><input type="text" class="form-control form-control-sm" name="product'+i+'" id="product'+i+'" autocomplete="off" required form="purchaseForm" /></div></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td></tr>');
});

$(document).on('click', '.btn_remove', function(){
    var button_id = $(this).attr("id"); 
    $('#row'+button_id+'').remove();
});

for(j = 1; j < (i + 1); j++){
    $('#product'+j).typeahead({
        source: function (query, result) {
            $.ajax({
                url: "searchProducts.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        }
    });
}

And yes, dynamically created inputs are named product2, product3, so on… With td and divs are identical with the original one.
Well, I am sure that the problem is a result of my ignorance of javascript working principals. Any help will be appreciated. Thanks all.

How to&Answers:

The solution is as simple as Mujibur mentioned in comment.
Calling the function to create the drop down list in $(‘#add’).click(function(){, right after creating the row solved it:

I modified the first call for only product1 input instead of trying to loop it in a for loop, and copied the function for each dynamically created product as I don’t know how to create functions and call them.

$('#product1').typeahead({
    source: function (query, result) {
        $.ajax({
            url: "searchProducts.php",
            data: 'query=' + query,            
            dataType: "json",
            type: "POST",
            success: function (data) {
                result($.map(data, function (item) {
                    return item;
                }));
            }
        });
    }
});

var i=1;
$('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr class="no-border" id="row'+i+'"><td class="text-center" style="padding: 7px;padding-right: 0;padding-left: 0;"><button class="btn btn_remove" name="remove" id="'+i+'" type="button" style="padding: 0;"><i class="fas fa-minus"></i></button></td><td style="padding: 5px;"><div class="dropdown"><input type="text" class="form-control form-control-sm" name="product'+i+'" id="product'+i+'" autocomplete="off" required form="purchaseForm" /></div></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td><td style="padding: 5px; max-width: 40px;"><input type="number" class="form-control form-control-sm" step="0.001" required /></td></tr>');
    $('#product'+i).typeahead({
    source: function (query, result) {
        $.ajax({
            url: "searchProducts.php",
            data: 'query=' + query,            
            dataType: "json",
            type: "POST",
            success: function (data) {
                result($.map(data, function (item) {
                    return item;
                }));
            }
        });
    }
});
});