How to get multiple selected text with comma seperator from check box list in javascript

Question

0.00/5 (No votes)

See more:

I have a location datalist with check box. I can refer the location name in text field and bind id through its value field...I need to get a selected text and its id...already am get value through its value field..how to get that location names with comma seperator and stored into hiddenfield2?

Javascript :

JavaScript

   $("[id$='SubmitBtn']").click(function () {
    var ISBN = [];
  
    $("[id$='LocationDataList'] input[type=checkbox]:checked").each(function () {
        ISBN.push($(this).val());
        
    }); 
    $("[id$='HiddenField1']").val(ISBN);         

});

Aspx code:

ASP.NET

<pre lang="HTML">
<asp:DataList ID="LocationDataList" runat="server" 
      RepeatDirection="Vertical" Width="100%">
      <itemtemplate>
 <table>
     <tr>
<td>
    <input id="Checkbox1" name="LocatIDChkBox"  runat="server" type="checkbox" value='<%#Eval("LocationID") %>' />
    <asp:Label ID="LocatNamelbl" CssClass="normaltext"  runat="server" Text='<%# Eval("LocationName") %>'/>
</td>
     
     </tr>
 </table>
      </itemtemplate>
      <FooterTemplate>
      <tr><td align="center">
 <asp:ImageButton ID="SubmitBtn" ImageUrl="~/images/more.png" OnClick="SubmitBtn_Click" runat="server" Height="25px" Width="50px" /></td></tr>
      </FooterTemplate>
  </asp:DataList>

Posted 3-Dec-13 21:44pm

SnvMohan

Updated 3-Dec-13 21:52pm

Thomas ktg

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2013-12-03T22:31:00

Solution 1

Hi
User Array Join method to perform comma separated string

C#

<script type="text/javascript">

        $(function () {

            $("[id$='SubmitBtn']").click(function () {

                alert('testing');
                var ISBN = [];

                $("input:checkbox:checked", '#LocationDataList').each(function () {

                    var location = $('span', $(this).parent()).text();
                    ISBN.push(location);
                });
                alert(ISBN.join(','));
                $("[id$='HiddenField1']").val(ISBN.join(','));
                // alert(ISBN);


                return false; ;
            });



        });
    </script>

Posted 3-Dec-13 22:31pm

Karthik_Mahalingam

Updated 3-Dec-13 22:54pm

v2

Comments

SnvMohan 4-Dec-13 4:35am

i need to take a selected location name displayed on check box...i am already get a value ..

Karthik_Mahalingam 4-Dec-13 4:42am

Display text u need or the Client ID of the check box ???

SnvMohan 4-Dec-13 4:36am

in ISBN variable i have a selected a location id's...I need to get selected location name and stored into another variable

Karthik_Mahalingam 4-Dec-13 4:43am

I have made like this in data source.

DataTable dt = new DataTable();
dt.Columns.Add("LocationID", typeof(string));
dt.Columns.Add("LocationName", typeof(string));
dt.Rows.Add("aaa", "apple");
dt.Rows.Add("bbb", "bat");
dt.Rows.Add("ccc", "cat");
LocationDataList.DataSource = dt;
LocationDataList.DataBind();

Karthik_Mahalingam 4-Dec-13 4:44am

ok fine i got your problem..

Karthik_Mahalingam 4-Dec-13 4:54am

try my updated solution...

SnvMohan 4-Dec-13 5:03am

yes sir i need a selected display text from check box list

Karthik_Mahalingam 4-Dec-13 5:16am

If my updated solution works for you .. please mark it as answer. else post comment..

Karthik_Mahalingam 4-Dec-13 5:16am

means the label text ??

SnvMohan 4-Dec-13 5:18am

yes..selected label text...if more then one locations are selected then thats all are seperated by comma and stored into hiddenfield2

Karthik_Mahalingam 4-Dec-13 5:21am

chk my solution...

SnvMohan 4-Dec-13 5:48am

Sir its not working ....

SnvMohan 4-Dec-13 5:56am

the isbn variable doent have any selected location name

Karthik_Mahalingam 4-Dec-13 6:28am

try..

var location = $('span', $(this).parent()).text();

or

var location = $('span', $(this).parent()).html();

SnvMohan 4-Dec-13 6:48am

I tried both ...not working sir

Karthik_Mahalingam 4-Dec-13 6:54am

pls try this code in sampe page..

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(function () {

$("[id$='SubmitBtn']").click(function () {

alert('testing');
var ISBN = [];

$("input:checkbox:checked", '#LocationDataList').each(function () {

var location = $('span', $(this).parent()).text();
ISBN.push(location);
});
alert(ISBN.join(','));
$("[id$='HiddenField1']").val(ISBN.join(','));
// alert(ISBN);

return false; ;
});

});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="LocationDataList" runat="server"
RepeatDirection="Vertical" Width="100%">
<itemtemplate>
<table>
<tr>
<td>
<input id="Checkbox1" name="LocatIDChkBox" runat="server" type="checkbox" value='<%#Eval("LocationID") %>' />
<asp:Label ID="LocatNamelbl" CssClass="normaltext" runat="server" Text='<%# Eval("LocationName") %>'/>
</td>

</tr>
</table>

<footertemplate>
<tr><td align="center">
<asp:ImageButton ID="SubmitBtn" ImageUrl="~/images/more.png" runat="server" Height="25px" Width="50px" /></td></tr>

</form>
</body>
</html>

public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Page.IsPostBack) { }
else
{

DataTable dt = new DataTable();
dt.Columns.Add("LocationID", typeof(string));
dt.Columns.Add("LocationName", typeof(string));
dt.Rows.Add("aaa", "apple");
dt.Rows.Add("bbb", "bat");
dt.Rows.Add("ccc", "cat");
LocationDataList.DataSource = dt;
LocationDataList.DataBind();

}
}

}

Karthik_Mahalingam 4-Dec-13 6:54am

r u getting any error ?

SnvMohan 4-Dec-13 7:11am

I tried this code but not working

SnvMohan 4-Dec-13 7:12am

No error, alert box is empty...

Karthik_Mahalingam 4-Dec-13 7:21am

run ur file and in the browser view the source ,, and find this control "LocationDataList"
check the name or id is same or some other name ???

Karthik_Mahalingam 4-Dec-13 7:26am

Try this code...

$("input:checkbox:checked", '[id~="LocationDataList"]').each(function () {

SnvMohan 5-Dec-13 0:00am

location datalist available on page source....but still not working

Karthik_Mahalingam 5-Dec-13 1:04am

try above code..