get all selected values from ListBox (client side)

Question

I'm trying to implement a custom validator in JavaScript for my vb.net page. This validator should check if in a multichoice listbox there aren't any selected values, showing an error pop up if so.

The thing is, I want to do it client side, but in my 'validateFunction' function I only get the last selected (or unselected, if it was selected already) item. I know how to do it in code-behind code, but I want to do it client-side.

aspx code:

 <asp:ListBox ID="lbEdit" runat="server" SelectionMode="Multiple">
 </asp:ListBox>
 <asp:CustomValidator id="cvEdit" runat="server" Display="None" ControlToValidate="lbEdit" ClientValidationFunction="validateFunction"/>
 <ajax:ValidatorCalloutExtender runat="server" ID="vceEdit" TargetControlID="cvEdit" />

JavaScript code:

 function validateFunction(source, arguments) {
        var options = document.getElementById(source.controltovalidate).options;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected == true) {
                    args.IsValid = true;
                    return;
                }
            }
            args.IsValid = false;
 }

As I said, since last (un)selected item will be the only one selected in the 'options' array, the validating function will always return true...

I thought of populating another array in another javascript function as the 'true selected array' and compare its values with the selected option each time the function fires.. but I think there should be a better way.

So... Is there a straight forward way to get ALL the selected items from a multichoice listbox in javascript?

Victor Hugo Terceros · Accepted Answer · 2017-09-14 16:37:51Z

5

+50

Your question is a bit unclear, and your function seems working, but what I will answer here is the last part of your question So... Is there a straight forward way to get ALL the selected items from a multichoice listbox in javascript?

Try this js function

<script type="text/javascript">
        function validateFunction() {
            var options = document.getElementById('<% = this.lbEdit.ClientID %>').options;
            var selectedItems;
            for (var i = 0; i < options.length; i++) {
                if (options[i].selected == true) {
                    if (selectedItems) {
                        selectedItems = selectedItems + ";" + options[i].value;
                    }
                    else {
                        selectedItems = options[i].value;
                    }
                }
            }
            if (selectedItems) {
                alert(selectedItems);
                return true;
            }
            else {
                alert("No item was selected");
                return false;
            }
        }
    </script>

And this is the aspx code, I removed the validator

 <asp:ListBox ID="lbEdit" runat="server" SelectionMode="Multiple" >
 </asp:ListBox>
    <asp:Button ID="test" runat="server" Text="send"  OnClientClick="return validateFunction();"/>

In the developer tools of your browser you can see a detailed information about all the properties of your object

answered Sep 14, 2017 at 16:37

Victor Hugo Terceros

3,1893 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D Ie Over a year ago

Sorry for the delay, I haven't had any time because of a new and urgent project we had incoming... still on it, damn... To the response, in a look it seems your code does the same as mine, so options[i].selected == true only would fire once in my code, with the last clicked option... My developer tools doesn't ever set more than one 'selected=true'. Maybe I have declared the listbox the wrong way? I hope to have some time left on monday to make a further review and maybe open again the question. In the meantime I can't give you the bounty, at least an upvote for the effort, Thanks!!!

D Ie Over a year ago

Actually I notice it would be the same awarding you or not, as I've read, so bounty for you, you earned it. Anyways my workaround would be creating a JavaScript array, and each time the listbox.selected fires, toggle that index' state (true <---> false) ... will be back with news I guess ;)

cg33 · Accepted Answer · 2017-09-14 07:44:25Z

1

let a1 = [
{
    Selected:false,
},
{
    Selected:false
},
{
    Selected:false
}];

if (a1.some(i => i.Selected)) console.log(true); else console.log(false);

Maybe what you want

answered Sep 14, 2017 at 7:44

cg33

192 bronze badges

Collectives™ on Stack Overflow

get all selected values from ListBox (client side)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related