I want to save the values of checkbox in an array using javascript or jquery.
My checkboxlist is inside the datalist. Whenever the user select an item, I want to add the value of that selected item to a array.
ASPX :
<asp:DataList ID="dl_Groups_1" RepeatColumns="1" runat="server" OnItemDataBound="dl_Groups_1_ItemDataBound" RepeatDirection="vertical" ShowFooter="False" ShowHeader="False">
<ItemTemplate>
<asp:CheckBox Font-Bold="true" runat="server" ID="chk_Group_1" Text='<%# Eval("category_type") %>' Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />
<asp:CheckBoxList CssClass="line" runat="server" ID="chkServiceType_1" DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true">
</asp:CheckBoxList>
<br />
</ItemTemplate>
</asp:DataList>
I tried the below to, get the items that are slected, but i am struck up here...
function test() {
$(":checkbox").each(function () {
if (this.checked) {
alert(this);
}
});
}
When i do this, i get alert message as "ON" and not the value. And where do i call the javascript to keep the array updated on selecting and un selecting the items in checkboxlist ?
var arrValues = new Array();
function test() {
$(":checkbox").each(function () {
if (this.checked && arrValues.indexOf(this.value) == -1) {
arrValues.push(this.value);
}
});
}
use map()
var selectedValue= $("input:checkbox:checked").map(function(){
return this.value;
}).get();
console.log(selectedValue);
selectedValue will have all the checked value in array..
var val;
$('#<%= chkServiceType_1.ClientID %> input[type=checkbox]').change(function(){
val = $("#<%= chkServiceType_1.ClientID %> input[type=checkbox]:checked").map(function(){
return this.value;
}).get();
})
Related
Here is my gridview
<asp:GridView ID="gvDoctorVisits" runat="server" DataKeyNames="AdmissionId" class="tableStyle"
AutoGenerateColumns="False" Width="100%" EmptyDataText="No record found" ShowHeaderWhenEmpty="true">
<Columns>
<asp:BoundField DataField="Amount" HeaderText="Amount"></asp:BoundField>
<%--<asp:BoundField DataField="PaidAmount" HeaderText="Paid Amount"></asp:BoundField>--%>
<asp:TemplateField HeaderText="Paid Amount">
<ItemTemplate>
<asp:TextBox ID="txtPaidAmount" type="text" runat="server" Text='<%# Eval("PaidAmount") %>' CssClass='<%# "txtDoctorPaidAmount "+"txtDPPaidAmount_"+Eval("AdmissionId") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I am using j query each function of my gridview textbox class,but jquery each function not executing,here is my code
$(".txtDoctorPaidAmount").on('keyup change', function () {
debugger;
var sum = 0;
$('.txtDoctorPaidAmount').each(function () {
sum += parseFloat($(this).text());
});
$("#txtPaidAmount").val(sum.toFixed(2));
});
this each function not executing,how to solve this?
Try this: Use val() instead of text() and add a console.log to see, if iteration is executed.
$(".txtDoctorPaidAmount").on('keyup change', function () {
var sum = 0;
$('.txtDoctorPaidAmount').each(function () {
// use val instead of text
let inputVal = $(this).val();
// this line is just to show, that each is executed
console.log('adding value: ' + inputVal);
sum += parseFloat(inputVal);
});
$("#txtPaidAmount").val(sum.toFixed(2));
});
I have an asp.net listbox that has an option of "Other". If a user selects "Other" I want to enable a textbox. When the form is submitted I want the text inside of of the textbox to replace "Other". So far I have gotten the textbox to enable if the "Other" value is selected but not sure how to replace "Other" with the text from the textbox. Any ideas?
<script type="text/javascript">
$(document).ready(function () {
$("#ListBox1").click(function () {
var arr = [];
$.each($("#ListBox1 option:selected"), function () {
arr.push($(this).val());
});
if ($.inArray("Other", arr) >= 0) {
$("#TextBox12").prop("disabled", false);
}
else {
$("#TextBox12").prop("disabled", true);
}
});
});
</script>
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Other" Value="other"></asp:ListItem>
<asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
<asp:ListItem Text="Red" Value="red"></asp:ListItem>
<asp:ListItem Text="Green" Value="green"></asp:ListItem>
</asp:ListBox>
<asp:TextBox ID="TextBox12" runat="server" Enabled="false"></asp:TextBox>
You should be careful with case sensitivity. The listbox item value is other but you are trying to find value in the array as Other.
if ($.inArray("other", arr) >= 0) {
$("#TextBox12").prop("disabled", false);
}
else {
$("#TextBox12").prop("disabled", true);
}
The simplest way may be to work through the code behind:
protected void TextBox12_TextChanged(object sender, EventArgs e)
{
if (ListBox1.SelectedItem != null && ListBox1.SelectedItem.Text == "Other")
{
ListBox1.SelectedItem.Text = TextBox12.Text;
}
}
I have below function when we check or uncheck the check box (inside the gridview) it will show the popup and other processing information.
Is there any way to execute this function only when checkbox is checked and not on unchecked condition?
Below is my function:
$(document).ready(function () {
$('#<%= gvPRCertInfo.ClientID %> input[type="checkbox"]').change(function () {
var signValue = $(this).closest('tr').children('td:eq(4)').html();
if (signValue == "Virtual") {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm("you have selected virtual do u want to create a new name for this?")) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "No";
}
document.forms[0].appendChild(confirm_value);
}
});
});
This is my gridview:
<asp:GridView ID="gvPRCertInfo" runat="server" GridLines="None"
CssClass="data responsive">
<Columns>
<asp:TemplateField HeaderText="Select" SortExpression="">
<HeaderTemplate>
<asp:CheckBox ID="chkboxSelectAll" runat="server" AutoPostBack="true" OnCheckedChanged="chkboxSelectAll_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkCert" AutoPostBack="true" ClientIDMode="Static" 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" />
................
.................
Would anyone please suggest any ideas on how to execute only when I check the checkbox.
Try this inside the on change function of the checkbox.
if($(this).is(':checked') == true)
{
/* Your function code here.*/
}
hello my dear i think this will work but still i'm not sure
you can code like below :
$(document).ready(function () {
$('#myCheckbox').change(function () {
if ($(this).attr("checked")) {
// fire your function
return;
}
// not checked
});
});
try this in side the onchange function
Javascript code
if(document.getElementById('mycheckbox').checked) {
console.log("ckecked")
} else {
console.log("not ckecked")
}
jquery code
if ($('#mycheckbox').attr("checked")) {
console.log("ckecked")
}else{
console.log("not ckecked")
}
You can use jQuery's is() function:
if($("input").is(':checked')) {
dosomething
}
I have got a problem with making textbox empty using JavaScript function.
If checkbox is unchecked the asp:Textbox should make disabled and empty.
It happens, but in code behind all the time is visible previous value which was entered before in that textbox.
<asp:RadioButton ID="radio_fx_no" runat="server" Text="NO" GroupName="optradio1" onclick="CheckBoxChangedDisableFx(this);" />
<asp:RadioButton ID="radio_fx" runat="server" Text="YES" GroupName="optradio1" onclick="CheckBoxChangedAbleFx(this);" />
<asp:TextBox ID="txt_fx" ClientIDMode="Static" runat="server" Enabled="false" />
<script>
function CheckBoxChangedAbleFx(checkbox) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').disabled = false;
}
}
function CheckBoxChangedDisableFx(checkbox) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').value = "";
document.getElementById('<%= txt_fx.ClientID %>').disabled = true;
}
}
</script>
Any ideas what is wrong in my code?
This problem is called the Cacheing the browser data. You can try three things in this case:
1) Clear value of textbox in pageload event at every postback:
if (IsPostBack)
{
txt_fx.text = "";
}
and in your aspx code make text="":
<asp:TextBox ID="txt_fx" Text="".../>
2) Set AutoComplete property of textbox to off for html input
or disable autocompletetype property of asp textbox
<asp:TextBox ID="txt_fx" autocompletetype="disabled".../>
3) or Set AutoComplete of your FORM tag of your page to "off"
If you want to clear actual value of textbox on server side without postback then you need to use AJAX.
Hope it will help you..!!
in .cs file,Page_Load method,plus such code:
if(!Page.IsPostBack)
{
radio_fx.Attributes.Add("onClick", "return CheckBoxChangedState(this,false);");
radio_fx_no.Attributes.Add("onClick", "return CheckBoxChangedState(this,true);");
}
and in .aspx file,change as follows:
<script type="text/javascript">
function CheckBoxChangedState(checkbox, state) {
if (checkbox.checked == true) {
document.getElementById('<%= txt_fx.ClientID %>').value = "";
document.getElementById('<%= txt_fx.ClientID %>').disabled = state;
}
}
<asp:RadioButton ID="radio_fx_no" runat="server" AutoPostBack="false" Text="NO" GroupName="optradio1" />
<asp:RadioButton ID="radio_fx" runat="server" AutoPostBack="false" Text="YES" GroupName="optradio1" />
I have textbox and gridview(checkbox in Itemtemplate) in my webform.
my requirement selecting checkbox in gridview must be restricted based on value given in textbox i.e if textbox value is 10 then i can only be able to check 10 rows in gridview.
Can anybody give me javascrit for this or any other easy way....
Thanks in advance..
my code is below...
<script type="text/javascript" >
function CheckBoxCount() {
var gv = document.getElementById("<%= GridView1.ClientID %>");
var inputList = gv.getElementsByTagName("input");
var textboxcount = document.getElementById("<%=txtId.ClientID %>").value;
var numChecked = 0;
for (var i = 0; i < inputList.length; i++)
{
if (inputList[i].type == "checkbox" && inputList[i].checked)
{
alert(numChecked);
if (numChecked < textboxcount)
{
inp[i].checked = false;
alert(numChecked);
}
numChecked = numChecked + 1;
}
}
}
</script>
I am trying in javascript
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField HeaderText="Select">
<ItemTemplate >
<asp:CheckBox ID="chb" runat="server" AutoPostBack="true" onClick="CheckBoxCount()" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I can't give you the JS right away but try doing it this way.
put a class on your text box and check box, And then:
<asp:CheckBox ID="chb" runat="server" AutoPostBack="true" onClick="CheckBoxCount()" CssClass="MyCheckBox" />
Then in the javascript add a function onClick of checkBox:
$('.MyCheckBox').onClick(function(){
var $allCheckBoxes = $('#GridView1').find('.MyCheckBox');
var checkedCheckBoxes = 0;
var allowedCheckBoxes = $('.NumberOfCheckBoxesClass').val();
$allCheckBoxes.each(
if($(this).Checked){
checkedCheckBoxes++;
}
);
if(checkedCheckBoxes > 10){
$(this).disable;
AND SHOW SOME MESSAGE letting the user know.
}
});
You obviously need a few more methods to disable all the
Let me know if you have any questiongs.