Solved

Create a comma separated list from selected Checkboxlist items.

Posted on 2014-03-20
13
834 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 15

Expert Comment

by:Insoftservice
Comment Utility
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
Comment Utility
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
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 15

Expert Comment

by:Insoftservice
Comment Utility
"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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you for your effort but I'd already posted the solution before you started. There was no need.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now