0

I have an autocomplete function, this works for the already created input field with id="field10". However when I dynamically create new input fields the function does not work on them. I have even specified what the input field names will be in advance of the fields being created. I have checked that the created field ids are correct, what am I doing wrong? Below is the script used to generate the new input fields.

        //Add Input Fields
        $(document).ready(function() {
            var max_fields = 10; //Maximum allowed input fields 
            var wrapper    = $(".array_wrap"); //Input fields wrapper
            var add_button = $(".add_fields"); //Add button class or ID
            var x = 1; //Initial input field is set to 1

         //When user click on add input button
         $(add_button).click(function(e){
                e.preventDefault();
         //Check maximum allowed input fields
                if(x < max_fields){ 
                    x++; //input field increment
         //add input field
                    var inputA = document.createElement('a');
                    $(inputA).attr("href", "javascript:void(0);");
                    $(inputA).attr("class","remove_field")
                    inputA.innerText ="Remove";
                    var inputName = document.createElement('input');
                    $(inputName).attr('id','field10' + x);
                    $(inputName).attr('type','text');
                    $(inputName).attr('name','input_array_name[]');

                    $(inputName).attr('placeholder','Subject');
                    $(inputName).appendTo($(wrapper));
                    $(inputA).appendTo($(wrapper));
                }
            });

//
These are the values I have passed to the function...
        autocomplete(document.getElementById("field10"), countries);
        autocomplete(document.getElementById("field101"), countries);
        autocomplete(document.getElementById("field102"), countries);
        autocomplete(document.getElementById("field103"), countries);
        autocomplete(document.getElementById("field104"), countries);
        autocomplete(document.getElementById("field105"), countries);
        autocomplete(document.getElementById("field106"), countries);
RandomObserver
  • 11
  • 2

1 Answers1

0

Are you sure that these are the correct ids? Else i think it's worth to work with classes instead of Ids, beacause you have to loop on an array of element having that class name it's even easier to be dynamic.

STA Yassine
  • 1