Solved

Create a comma separated list from selected Checkboxlist items.

Posted on 2014-03-20
13
856 Views
Last Modified: 2014-03-28
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
0
Comment
Question by:Andy Green
  • 7
  • 5
13 Comments
 
LVL 3

Accepted Solution

by:
Andy Green earned 500 total points
ID: 39941835
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
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39942015
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
 
LVL 3

Author Comment

by:Andy Green
ID: 39942399
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 15

Expert Comment

by:Insoftservice
ID: 39943164
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
 
LVL 3

Author Comment

by:Andy Green
ID: 39952689
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
 
LVL 3

Author Comment

by:Andy Green
ID: 39953902
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
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39953903
"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
 
LVL 3

Author Comment

by:Andy Green
ID: 39954045
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
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39955257
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
 
LVL 3

Author Comment

by:Andy Green
ID: 39955275
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
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39957050
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
 
LVL 3

Author Comment

by:Andy Green
ID: 39957416
Thank you for your effort but I'd already posted the solution before you started. There was no need.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question