multi-select value is empty

Topic: multi-select value is empty

nskalis free asked 4 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 ?

Add comment

nskalis free answered 4 years ago

0 0 Best answer

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);
            }
        }

Add comment

nskalis free answered 4 years ago

0 0 Best answer

<a href="/profile/?id=82599" target="_blank" rel="nofollow">@Mateusz Łubianka</a> as background information this is the <code>data-validator</code> function

<pre class="prettyprint"><code>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;
}
</code></pre>

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

Please insert min. 20 characters.

@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

Add comment

nskalis free answered 4 years ago

0 0 Best answer

hi <a href="/profile/?id=82599" target="_blank" rel="nofollow">@Mateusz Łubianka</a>

as far as I understand using <code>jQuery</code> is not an option because

<ol>
<li>the <code>multiselect</code> form field is access from a js function, more specifically from the <code>data-validator</code> function of the <code>stepper</code> component <a href="https://mdbootstrap.com/docs/jquery/components/stepper/#validation" target="_blank">https://mdbootstrap.com/docs/jquery/components/stepper/#validation</a> and all other fields are accessed (correctly) via js</li>
<li>given the following snippet, where the <code>multiselect</code> form field is named <code>target</code>

<pre class="prettyprint"><code> 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);
</code></pre></li>
</ol>

How you would access the <code>target</code> value ?

Please insert min. 20 characters.

hi @Mateusz Łubianka

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

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

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 ?

Add comment

Mateusz Łubianka staff answered 4 years ago