How To Validate Selected Value From Multiple Select Box Using The Same Attributes (ID or Class)?

Question

How To Validate Selected Value From Multiple Select Box Using The Same Attributes (ID or Class)?.

Hello problem solvers, I'm struggling to develop the best validation scenario for my multiple select drop down options. So, I have a form functionality that able to insert as many as I want dynamic select box where the data is generated from MySQL database whenever the button is clicked.

Please see below GIF animation.

enter image description here

This is my jQuery code to create the add/remove form elements:

$(document).on('click', '#add', function() {
            var data = ''+window.globalCounter+'';
    
            tableForm.find('tbody').append(data);
            window.globalCounter++;
    });

This is the function to get the types of service from CodeIgniter:

// ambil data jenis layanan = retrieve type of laundry services 
function ambil_data_jenis_layanan(cnt = 0) {
    $.ajax({
        type: 'POST',
        url: "",
        data: {},
        dataType: 'JSON',
        cache: false,
        success: function(response) {
            $('select#id_jenis_layanan'+cnt).html('');
            var option = '';
            for (var i = 0; i < response.length; i++) {
                option += '';
            }
            $('select#id_jenis_layanan'+cnt).append(option).selectpicker('refresh');
        }
    });
}

This is the code to fill the select options with data:

public function ambil_detail_jenis_layanan() {
            $sql = $this->m_jenis_layanan->jenis_layanan($this->input->post('id'));
            echo json_encode(['kode_jenis_layanan' => $sql['kode_jenis_layanan'], 'tarif_jenis_layanan' => $sql['tarif_jenis_layanan'], 'satuan_jenis_layanan' => $sql['satuan_jenis_layanan']]);
    }

This current code to validate the selected value from each dynamic generated select options:

// mengambil data jenis layanan berdasarkan pilihan pelanggan
        // https://stackoverflow.com/questions/45803813/jquery-select-box-multiple-option-get-value-and-match-values
        $(document).on('change', 'select[data-select=jenis_layanan]', function(){
            var dataid = $(this).attr('data-id'),
            id = $(this).val(),
            arr = [],
            jenisLayanan = [];
        
            $.each($('select[data-select=jenis_layanan] option:selected'), function(){
                arr.push($(this).val());
                jenisLayanan.push($(this).text());
            });
                    
            var values = $('select[data-select=jenis_layanan]').map(function() {
                return this.value;
            }).toArray();
        
            var hasDups = !values.every(function(v,i) {
                return values.indexOf(v) == i;
            });
        
            if(hasDups){
                    // if found duplicate selected values from 
                    // each select options, display such message
                    // later on planned to put in Bootstrap Modal 
                    // for more professional look
                alert('Sorry mate, this service already listed into the form: ' + jenisLayanan.join(', ') + '
');
                return false;
            } else {
                    // if each selected values are not same from each select elements
                    // get data via AJAX and put in assigned HTML form elements
                    // and set the cursor focus to the berat_jumlah input box to let the user enter the weight of the laundry of number of clothes being laundry
                $.ajax({
                    type: 'POST',
                    url: "",
                    data: {id:id},
                    dataType: 'JSON',
                    cache: false,
                    success: function(response) {
                        tableForm.find('tbody tr td input#kode_jenis_layanan[data-id='+dataid+']').attr('value', response.kode_jenis_layanan);
                        tableForm.find('tbody tr td input#tarif_jenis_layanan[data-id='+dataid+']').attr('value', response.tarif_jenis_layanan);
                        tableForm.find('tbody tr td input#satuan_jenis_layanan[data-id='+dataid+']').attr('value', response.satuan_jenis_layanan);
                        tableForm.find('tbody tr td input#berat_jumlah'+dataid).focus();
                    }
                });
            }
        });

At last, I need to save all data to the database but got stuck at the select element validation. Many thanks for anyone can help.

How To Validate Selected Value From Multiple Select Box Using The Same Attributes (ID or Class)?

0 Answers