multi-select value is empty

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: multi-select value is empty

nskalis asked 5 years ago

Expected behavior

Be able to retrieve the values in a multi-select using .value

Actual behavior

The HTML on the browser that corresponds to the multiselect component is

<select name="target" class="mdb-select md-form colorful-select dropdown-primary initialized" multiple="" data-stop-refresh="true">
                            <option value="" disabled="" selected="">target</option>
                            <optgroup label="peering">                                
                                <option value="at-vie05b-ri3__peering">at-vie05b-ri3</option>
                                <option value="at-vie05d-ri1__peering">at-vie05d-ri1</option>                                
                            </optgroup>
                        </select>

Client-side when the above form is being printed using 

console.log(form_data[idx]['target']);

the following appears

<input type="text" class="select-dropdown form-control" readonly="true" required="false" data-activates="select-options-10bd333b-f5d4-454e-aeb8-c17ad9b4b421" value="" role="listbox" aria-multiselectable="true" aria-disabled="false" aria-required="false" aria-haspopup="true" aria-expanded="false">

which has as a value "" (an empty string)

Resources (screenshots, code snippets etc.)

initially, when target multiselect form component is not populated

enter image description here

        console.log(form_data[idx]['target']);
        console.log(form_data[idx]['target'].value);

when target multiselect form component is populated

enter image description here

Please notice that in the background the target multiselect form component has two values. In the browser's JavaScript console what gets printed when using .value is an empty string

Would you be so kind to advise what is going wrong ?

nskalis answered 5 years ago

fixed :)

        var target = [];
        for (opt = 0; opt < form_data[idx]['target'].length; opt++) {
            if (form_data[idx]['target'].options[opt].selected && form_data[idx]['target'].options[opt].value !=='') {
                target.push(form_data[idx]['target'].options[opt].value);
            }
        }

Mateusz Łubianka staff answered 5 years ago

Hi @nskalis,

You can get Select value using:

$('#select').val();

You can see this in this snippet: https://mdbootstrap.com/snippets/jquery/mateusz-lubianka/1789334

Best,

nskalis answered 5 years ago

hi @Mateusz Łubianka

as far as I understand using jQuery is not an option because

  1. the multiselect form field is access from a js function, more specifically from the data-validator function of the stepper component https://mdbootstrap.com/docs/jquery/components/stepper/#validation and all other fields are accessed (correctly) via js

  2. given the following snippet, where the multiselect form field is named target

           var blueprint_item = {
            unit: form_data[idx]['unit'].value,
            spec: form_data[idx]['spec'].value,
            meta: {
                iface: (form_data[idx]['iface'] ? form_data[idx]['iface'].value : null),
                label: (form_data[idx]['label'] ? form_data[idx]['label'].value : null),
                ipaddr: {}
            }
        };
        console.log(form_data[idx]['target']);
        console.log(form_data[idx]['target'].value);

How you would access the target value ?

nskalis answered 5 years ago

@Mateusz Łubianka as background information this is the data-validator function

function validateInterfacesIx() {
    var blueprint = [];
    var form_data = document.getElementsByName('inputInterfacesIx');
    if (form_data) {
        for (idx = 0; idx < form_data.length; idx++) {
            if (form_data[idx]['unit'].value !== '' && form_data[idx]['spec'].value !== '') {
                var blueprint_item = {
                    unit: form_data[idx]['unit'].value,
                    spec: form_data[idx]['spec'].value,
                    meta: {
                        iface: (form_data[idx]['iface'] ? form_data[idx]['iface'].value : null),
                        label: (form_data[idx]['label'] ? form_data[idx]['label'].value : null),
                        ipaddr: {}
                    }
                };
                console.log(form_data[idx]['target']);
                console.log(form_data[idx]['target'].value);
                if (form_data[idx]['inet4']) {
                    if (form_data[idx]['inet4'].value !== '') {
                        blueprint_item['meta']['ipaddr']['inet4'] = form_data[idx]['inet4'].value;
                    }
                }
                if (form_data[idx]['inet6']) {
                    if (form_data[idx]['inet6'].value !== '') {
                        blueprint_item['meta']['ipaddr']['inet6'] = form_data[idx]['inet6'].value;
                    }
                }
            }
        }
    }
    return false;
}

Please note that the target multiselect form field exist in every step of the stepper component and has to be access via the form_data variable

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.14.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No
Tags
select multiselect
Related topics
1
Selected option from Multiselect not properly selected
0
select Custom content box with button in the select box
0
Selects with data-mdb-clear-button and zero options generates an error
0
Fix styling of material select components
0
Select translation
About author
nskalis
135Support score
8Questions 9Answers
0Snippets likes 2Snippets