Create a comma separated list from selected Checkboxlist items.

Hi

I have a checkboxlist control and want to create a comma separated list from the selected items.

This CSL is then appended to a URL for a pop up.

How would I do this in either JavaScript or jQuery.

This is what I have so far, but the CSL just says on,on,on

JQuery:
var chkArray = [];
                    $("#divMembers input:checked").each(function () {
                        chkArray.push($(this).val());
                    });
                    var selected;
                    selected = chkArray.join(',') + ",";

This is my markup:
 <div id="divMembers">
                    <asp:CheckBoxList id="clbMembers"  runat="server" RepeatColumns="5" RepeatDirection="Vertical" CellPadding="6" ClientIDMode="Static"></asp:CheckBoxList>
                </div>

Open in new window




Andy
LVL 3
Andy GreenAsked:
Who is Participating?
 
Andy GreenConnect With a Mentor Author Commented:
Update

Looks like this was an issue with how the page is being rendered and the values don't get tied to the Checkboxlist items.

This thread fixes it.

http://stackoverflow.com/questions/180245/where-are-the-datavaluefield-values-for-a-checkboxlist-stored#sthash.zzaY8jOP.dpuf

Andy
0
 
InsoftserviceCommented:
Check this one

<!DOCTYPE html>
<html>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>


<title>Love to marry an free matrimonial website</title>

</head>
<body>

<div data-role="page">
  <div data-role="header">
    <h1>Welcome To Treo infotech</h1>
  </div>

  <div data-role="main" class="ui-content">
    <div id="dealsForm">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Choose as many favorite colors as you'd like:</legend>
          <label for="red">Red</label>
          <input type="checkbox" name="favcolor" id="red" value="red" onclick="myFunction()">
          <label for="green">Green</label>
          <input type="checkbox" name="favcolor" id="green" value="green" onclick="myFunction()">
          <label for="blue">Blue</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue" onclick="myFunction()">
      </fieldset>
   </div>

<button onclick="myFunction()">Try it</button>
   
    <div data-role="popup" id="myPopup" class="ui-content">
      <input type="text" name ="datadisplay" id="datadisplay">      
    </div>
  </div>

</div>

    <script>    
    var x='1' ;  
function updateTextArea()
{
     var allVals = [];
     $('#dealsForm :checked') .each(function(){
       allVals.push($(this).val());
     });
     x = allVals;
}

     
 
      function myFunction()
        {      
          updateTextArea();
              $("#datadisplay").val(x);

      }  
  </script>
 

<script>

</script>

</body>
</html>
0
 
Andy GreenAuthor Commented:
Thank insoftservice, but I found the problem, in .net 2 the values aren't assigned to the checkboxlist, so there is nothing for the javascript to find. Changing the web.config as per my post fixes it.

Andy
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
InsoftserviceCommented:
why cant you use datavaluefield and datasourceid
I dont have knowledge for .net  

 datavaluefield="CountryCode"
datasourceid="LocationsDatasource"

<asp:checkboxlist runat="server" id="Locations" datasourceid="LocationsDatasource"
   datatextfield="CountryName" datavaluefield="CountryCode" />
0
 
Andy GreenAuthor Commented:
The problem isn't with the databind, its down to how ASP.net V2 renders, Take a read of the fix I found and it explains it.

Andy
0
 
Andy GreenAuthor Commented:
I've requested that this question be deleted for the following reason:

I found the answer myself, and no alternatives have come forward.

Andy
0
 
InsoftserviceCommented:
"How would I do this in either JavaScript or jQuery."
That's the reason why i had answered using jquery and not with asp.net.
Regarding other question it was not mention in your question so even finding on your own does not implies that your answer was not resolved.
0
 
Andy GreenAuthor Commented:
You did not give me the answer. Irrespective of any Javascript code the data I needed wasn't on the page because of the way ASP.Net renders the controls. My original code worked once I changed the rendering to V4 framework.

From your code:

  <div data-role="main" class="ui-content">
    <div id="dealsForm">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Choose as many favorite colors as you'd like:</legend>
          <label for="red">Red</label>
          <input type="checkbox" name="favcolor" id="red" value="red" onclick="myFunction()">
          <label for="green">Green</label>
          <input type="checkbox" name="favcolor" id="green" value="green" onclick="myFunction()">
          <label for="blue">Blue</label>
          <input type="checkbox" name="favcolor" id="blue" value="blue" onclick="myFunction()">
      </fieldset>
   </div>

This isn't how .net renders Checkboxlists. There is no value in the markup.

Please outline your reasons for expecting points.

Andy
0
 
InsoftserviceCommented:
I hope in your question you have not mention regarding .net .
It was mentioned after i had sent you the answer in jquery which you had requested in your question.
0
 
Andy GreenAuthor Commented:
The first line says 'I have a checkboxlist control ' this is a .net control. I also answered my own question before you commented. Had you followed the link I supplied you would have known what the issue was.

If you want the points you can have them.

Andy
0
 
InsoftserviceCommented:
It was not for the points .
But it was that i had invested my time and energy to provide you the answer for which i had to debate nothing else.
0
 
Andy GreenAuthor Commented:
Thank you for your effort but I'd already posted the solution before you started. There was no need.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.