John Davidson

Message:

I have an infinite select2 by using button to show select2 but it doesn't work, is there something wrong with my script?

this is the script to add unlimited select2 with onclick button :

<div id="cont"></div>

<button id="addRow" onclick="addRow();"> Add Rows</button>

This is a function to call select2

<script type="text/javascript">



    var arrHead = new Array();

    arrHead     = ['AKUN', 'DEBIT', 'CREDIT','#']; 



    function createTable() {

        var empTable       = document.createElement('div');

        empTable.setAttribute('class', 'ed-tab');



        empTable.innerHTML = `

            <table id="empTable" class="table table-borderedless table-striped w-100">

                <thead>

                <tr>

                    <th width="50%">AKUN</th>

                    <th width="22%">DEBIT</th>

                    <th width="22%">CREDIT</th>

                    <th width="6%" class="text-center">#</th>

                <tr>

                </thead>

                <tbody>

                    <tr></tr>

                    <tr></tr>

                </tbody>

            </table>

        `;



        var div = document.getElementById('cont');

        div.appendChild(empTable);



    }



    function addRow() {



        var empTab  = document.getElementById('empTable');

        var rowCnt  = empTab.rows.length;

        var tr      = empTab.insertRow(rowCnt);



        for (var c = 0; c < arrHead.length; c++) {

            var td = document.createElement('td');

            td     = tr.insertCell(c);

            

            if (c == 0) { 

                var select  = document.createElement("select");

                select.setAttribute('type', 'text');

                select.setAttribute('class', 'form-control select_ids');

                select.innerHTML = `

                    <select class="form-control form-search" placeholder="tes" type="text" >

                        <option></option>

                        <?php 

                            $kodeakun_q = $db->query("SELECT * FROM tb_akun WHERE parent_akun >= 0");

                            if ($kodeakun_q->num_rows > 0) {

                                while($row = $kodeakun_q->fetch_assoc()){

                        ?>

                        <option id="func/f_insert.php?select_id=<?= $row['kode_akun'] ?>" value="<?= $row['kode_akun'] ?>"> 

                            <?= $row['kode_akun']; ?> | <?= $row['nama_akun'] ?> 

                        </option>

                        <?php } }  ?>

                    </select>

                `;

                td.appendChild(select);

            }else if( c == 1){

                var ele = document.createElement('input');

                ele.setAttribute('type', 'text');

                ele.setAttribute('class', 'form-control');

                ele.setAttribute('value', '');

                td.appendChild(ele);

            }else if (c == 2) {

                var ele = document.createElement('input');

                ele.setAttribute('type', 'text');

                ele.setAttribute('class', 'form-control');

                ele.setAttribute('value', '');

                td.appendChild(ele);

            }else if(c == 3){

                var button       = document.createElement("button");

                button.setAttribute('class', 'btn btn-danger');

                button.setAttribute('onclick', 'removeRow(this)');

                button.innerHTML = `<i class="fas fa-trash"></i>`;

                td.appendChild(button);

            }

        }



    }

    

    function removeRow(oButton) {

        var empTab = document.getElementById('empTable');

        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);

    }



    function submit() {

        var myTab = document.getElementById('empTable');

        var arrValues = new Array();



        for (row = 1; row < myTab.rows.length - 0; row++) {

            for (c = 0; c < myTab.rows[row].cells.length; c++) {

                var element = myTab.rows.item(row).cells[c];

                if (element.childNodes[0].getAttribute('type') == 'text') {

                    arrValues.push("'" + element.childNodes[0].value + "'");

                }

            }

        }



        console.log(arrValues);

    }



</script>

this is the main script for the select2 :

<script>

    

    $(document).ready(function(){

        $(".select_ids").selectize({

            placeholder: "Pilih Akun . . .",

            allowClear: true,

        });

        

    });

    

</script>

Note :

I have added a function in onclick button to call the select2, but it only works in the first select2 and when I add select2 it doesn't work properly.

---

My Answer:
PHP is a server-side scripting language used for web development, while JavaScript is a client-side scripting language used for adding interactivity to websites. PHP is used to generate dynamic content on the server before it is sent to the client's browser, while JavaScript is used to manipulate the content on the client side after it has been received from the server. Both languages are commonly used together in web development to create dynamic and interactive websites.