use jquery find repeater checkbox checked value - javascript

I have a checkbox template field within a repeater in c#
bind the repeater using asp.net c#
<asp:Repeater ID="rpt_detail" runat="server">
<ItemTemplate>
<table>
<tr>
<td style="width: 10%; padding-top: 10px;">
<input type="checkbox" id="selectit" name="selectit" value='<%# Eval("mdID") %>' />
</td>
<td>
<asp:Label ID="mdID" runat="server" Visible="false" Text='<%# Eval("mdID") %>'></asp:Label>
</td>
<td>
<asp:Label ID="lbl_xprice" runat="server" Text='<%# Eval("mdPrice") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
and javascipt
<script>
function aaaaa() {
var selectit = $('input[name="selectit"]').val();
$.ajax({
url: "ajaxservice/getinchar.aspx",
type: 'POST',
data: { selectw: selectit },
success: function (result) {
$("#testview").html(result);
}
});
}
</script>
How can I get checkbox checked value ?

You can loop all the checkboxes in the repeater with jQuery.
<script type="text/javascript">
function getCheckBoxValues() {
$('#myRepeater input[type="checkbox"]').each(function () {
if ($(this).prop('checked') == true) {
alert($(this).val());
}
});
}
</script>
But in order for this to work you have to wrap the Repeater with a <div> with a unique ID.
<div id="myRepeater">
<asp:Repeater ID="rpt_detail" runat="server"></asp:Repeater>
</div>
Not really related to the solution, but you are getting duplicate ID's (selectit) in your checkboxes inside the Repeater. Better use the asp.net CheckBox Control.
And you can better set the <table> </table> outside the Repeater.
<table id="myRepeater">
<asp:Repeater ID="rpt_detail" runat="server">
<ItemTemplate>
<tr>
<td> content... </td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>

Related

Get particular cell value for each checked row when header check box checked

I have gridview having header checkbox and having checkbox on each row.. when I click on the header checkbox I need to check whether the child checkboxes are checked and if checked I need to get third Cell values of all checked rows ..
For this purpose I am doing like the below Javascript function:
function toggleSelection(source) {
$("#MainContent_gvCG input[id*='chkCert']").each(function (index) {
if(source.checked) {
if (this.checked) {
////Here i need to access the third cell values of all rows
}
}
});
}
Sample table format (for better understanding):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<table border="1">
<tr>
<th>CFS Name</th>
<th>Amount</th>
<th>TCFSA</th>
<th>CODEX</th>
<th><input type="checkbox" id="chkHeader"/></th>
</tr>
<tr>
<td>TRANSWORLD GLS INDIA</td>
<td>Abc</td>
<td>cg</td>
<td>de</td>
<td><input type="checkbox" class="chkCert"></td>
</tr>
................
...............
..............
</table>
and this is my gridview:
<asp:GridView ID="gvPRCertInfo" runat="server" AutoGenerateColumns="False" GridLines="None"
OnRowDataBound="gvPRCertInfo_RowDataBound"
CssClass="data responsive">
<Columns>
<asp:TemplateField HeaderText="Select" SortExpression="">
<HeaderTemplate>
<asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" onclick="toggleSelection(this);" OnCheckedChanged="chkboxSelectAll_CheckedChanged"/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkCert" AutoPostBack="true" OnCheckedChanged="chkCert_CheckedChanged" runat="server" />
<input type="hidden" id="hdnCertId" runat="server" value='<%# DataBinder.Eval(Container.DataItem, "CertId") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CertificateID" HeaderText="Certificate ID" HeaderStyle-HorizontalAlign="Center" />
....................
.....................
..............
</Columns>
</asp:GridView>
Could any one please suggest any ideas on this how to access the third cell values for all checked rows .. any better solution other than this also welcome.
Modified code :
function toggleSelection(source) {
$('#<%= gvPRCertInfo.ClientID %> input[id*="chkCert"]').each(function () {
if (source.checked) {
alert("source checked");
if (this.checked) {
alert("child chk");
var allVlues = $(this).closest('tr').children('td:eq(4)').html();
alert(allVlues);
}
}
});
}
I am not able raise this alert alert("child chk"); , could any one please help on this one..
Try $(this).parent().parent().find('td:eq(2)').text();. Also notice the changes in $("#MainContent_gvCG input.chkCert:checkbox").each(....
function toggleSelection(source) {
$("#MainContent_gvCG input.chkCert:checkbox").each(function (index) {
if(source.checked) {
if (this.checked) {
let thirdVal = $(this).parent().parent().find('td:eq(2)').text();
console.log(thirdVal);
}
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="MainContent_gvCG" >
<tr>
<th>CFS Name</th>
<th>Amount</th>
<th>TCFSA</th>
<th>CODEX</th>
<th><input type="checkbox" id="chkHeader" onclick="toggleSelection(this);"/></th>
</tr>
<tr>
<td>TRANSWORLD GLS INDIA</td>
<td>Abc</td>
<td>cg</td>
<td>de</td>
<td><input type="checkbox" class="chkCert"></td>
</tr>
<tr>
<td>Test</td>
<td>mnl</td>
<td>opq</td>
<td>xyz</td>
<td><input type="checkbox" class="chkCert" checked></td>
</tr>
</table>
If you can treat this as a simple client-side only data collection, then select just what you want. One example:
var $thirdCell = $(this).parent().children(':nth-child(3)');
console.log('Text: ', $thirdCell.text());
console.log('HTML: ', $thirdCell.html());
Depending on what you mean by 'value', you can get either text or HTML.

How to access textbox inside grid view of parent page in popup page?

I have a pop up page where I want to get the textbox value which is inside gridview of main page,
and populate value in that textbox.
I have tried:
var Emp = window.opener.document.getElementById('grd_txtEmp');
Emp.rows[1].cells[3].childNodes[0].value="abc";
My popup page:
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table><tr><td>
<asp:TextBox ID="txtEmpy" runat="server" TextMode="MultiLine" ontextchanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
Select
</td></tr></table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%"/>
</asp:TemplateField>
As far as I understood, you are opening the popup, on clicking of some link or button in the grid view row. If this is correct, then while opening the popup, you can pass the textbox id to the popup as a query string. Then you can set the value to the correct text box from the poped up window. To get the id of the textbox in the current row, you can use jQuery
As an example, you can try this idea
Add a css class to the textbox, say, "extdata"
Add a css class to the link/button, say, "popupopener"
Then add the following jQuery
$(document).ready(function () {
$('.popupopener').each(function () {
$(this).click(function () {
//If the textbox is at the same level as the link button
var textBoxId = $(this).closest("table").find('.extdata').attr('id');
window.open("Select.aspx" + "?textboxid=" + textBoxId, "mywindow", 'menubar=1,resizable=1,width=600,height=400, top=200, left=400');
}
);
});
});
Change the layout as below
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtEmpy" CssClass="extdata" runat="server" TextMode="MultiLine" OnTextChanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
<a class="popupopener">Select</a>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%" />
</asp:TemplateField>

Get values from radgrid using jquery

I have a usercontrol and there is a radgrid included in it. I need to fetch label GetName's text from the radgrid using jquery.I have to check the label's value for each record. Can someone please help me to do it.Thanks.This is my radgrid.
<telerik:RadGrid ID="Gridview1">
<Columns>
<telerik:GridTemplateColumn UniqueName="tempcolumn">
<HeaderTemplate>
<table>
<tr>
<td>
<asp:Label ID="Header" runat="server" Text="Name"></asp:Label>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Getname" runat="server"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</telerik:RadGrid>
The code you show there is in your .aspx page, not the generated one.
In HTML result, the aps:label would be something like that :
<span Id="ctl00$blablabla$Getname_random"></span>
So, I would suggest to add a class to your label to use it as selector :
<asp:Label ID="Getname" runat="server" CssClass="getNameClass"></asp:Label>
And then :
$(function () {
//Move in any trigger function (e.g: click)
$('.getNameClass').each(function() {
console.log($(this).text() );
});
});
Hope it helps.

How to pass clientId of a control in Repeater to JavaScript function?

I have a repeater having two columns. In first column i have an image button on click of which i am calling a javascript function.
In the second column i have a label. I want to pass the client id of this label to the javascript function called on click on ImageButton.
<asp:Repeater ID="rptElements" runat="server">
<ItemTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table>
<tr>
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" OnClientClick="return DisplayElementDetails(this);" />
</td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
I figured it out.
I added following code to the javascript function:
function DisplayElementDetails(obj)
{
var name = obj.id.substring(0,(obj.name.length)-7) + "lblElementDetails"
var obj = document.getElementById(name);
obj.style.display = 'none';
return false;
}
and set the style for label control
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" style="display:block" />
Its working now.
This can be done by Jquery. Add CSSclass to button and label for selecting them using CSS selectors
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" CssClass="showButton" /></td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" CssClass="lblElement"/>
</td>
Reference JQuery on aspx page and call function on click event of image button
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".showButton").click(function(){
$(".lblElement").toggle();
});
});
</script>

Show message when start typing inside textbox using javascript

I'm using ASP.NETand I want to show message behind a textbox when I start to write in it, I want to do that on the client side so I think javascript is the key.
Edit :
My code:
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Alternate Email :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Security Question :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtSecurityQuestion" runat="server"></asp:TextBox>
</td>
</tr>
and the javascript
<script type="text/javascript">
function typetext(tb) {
var mySpanElement = document.getElementById("_txtSecurityQuestion");
mySpanElement.innerText = tb.value;
}
</script>
You could handle the onkeyup event in the textbox
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);">
</asp:TextBox>
which calls the typetext method. In your typetext method, you can set the span (or whatever HTML element) to the text of the textbox.
function typetext(tb)
{
var mytextbox = document.getElementById('<%=_txtSecurityQuestion.ClientID %>');
mytextbox.value = tb.value;
}

Categories