Get selected items from checkbox list with jQuery - javascript

How to get the selected items values of checkBoxList in button click event in jquery...
<asp:CheckBoxList ID="check_list" runat="server">
<asp:ListItem Text ="One" Value="1"></asp:ListItem>
<asp:ListItem Text ="Two" Value="2"></asp:ListItem>
<asp:ListItem Text ="Three" Value="3"></asp:ListItem>
</asp:CheckBoxList>
<input type="button" id="btn_click" value="Click"/>

just use an attribute selector like
On click of button you can loop trough all checked values like
$("#btn_click").click(function(){
$("[id*=check_list] input[type=checkbox]:checked").each(function () {
// add $(this).val() to your array
});
});

See the jQuery :checked selector as described in the API.

Related

Get selected value of radio button in Asp.net through javascript

I know it has been asked several times and I found many solutions but no solution worked for me.
I am working on IE
<asp:RadioButtonList ID="rbtnView" runat="server" OnSelectedIndexChanged="rbtnView_SelectedIndexChanged"
AutoPostBack="True" TabIndex="7" RepeatDirection="Horizontal">
<asp:ListItem Selected="True" Value="0">Show Pending</asp:ListItem>
<asp:ListItem Value="1">Show Processed</asp:ListItem>
</asp:RadioButtonList>
here is the button code from where I am calling the function:
<asp:Button ID="btnPrint" runat="server" CssClass="myButton" OnClick="btnPrint_Click"
Text="Print" ValidationGroup="validationgroup2" TabIndex="9" OnClientClick="doPrint()" />
here is the javascrit function
function doPrint() {
debugger;
var rad = $('#<%=rbtnView.ClientID %> input[type=radio]:checked').val();
}
Any help would be appreciated.
var radioValue = $("input[name='YOURVALUEFORTHEGROUP']:checked").val();
replace YOURVALUEFORTHEGROUP
The javascript function works just fine. But you are doing a form post (PostBack) when pressing the btnPrint button.
You can use a regular button instead of an asp.net Control. Or if you need a PostBack to execute the btnPrint_Click method. But then you can get the value there. It all depends why you need the value client side.
<input type="button" value="Get value" onclick="doPrint()" />
Or add return false to the aspnet button.
OnClientClick="doPrint(); return false;"

Calling Javascript from RadioButtonList onchange/Onclick

I have a radiobuttonlist on whose change event I want to change the watermark text in a textbox.
But I am not able to call Javascript function from RadioButtonList and also not able to retrieve the value of the selected field.
Below is the code for the same.
<asp:RadioButtonList ID="rdbSelectType" runat="server" CssClass="radioButtonList" RepeatDirection="Horizontal" AutoPostBack="true" OnSelectedIndexChanged="rdbSelectType_SelectedIndexChanged">
<asp:ListItem Selected="True" Value="0" Text="Auto Generate"></asp:ListItem>
<asp:ListItem Value="1" Text="Manually Generate"></asp:ListItem>
</asp:RadioButtonList>
Can anyone help me on this please?

dropdown value changed by javascript is not coming in codebehind

I have a dropdown list whose value is changed based on other controls in the UI using javascript.
I used the following code to change the dropdown list,
document.getElementById("ddlchkStsID").options[2].selected = true;
document.getElementById("ddlchkStsID").value = "3";
But in the code-behind, the ddlchkStsID.SelectedValue is still coming as first option's value.
This the control in aspx page.
<asp:DropDownList ID="ddlchkStsID" runat="server" TabIndex="10" CssClass="meta">
<asp:ListItem Text="TBD" Value="1" />
<asp:ListItem Text="Yes" Value="2" />
<asp:ListItem Text="No" Value="3" />
</asp:DropDownList>
Could someone help me how to get the changed value in the code-behind.
thanks in advance :)
Since the control is running at the server, you should be referencing the control using the ClientID, like this:
document.getElementById("<%=ddlchkStsID.ClientID%>").options[2].selected = true;
Is your JavaScript code actually working?

javascript .focus() to operate with tab

For some reason none of my setfocus() events were working on the server side of my web app, so I created a Javascript function setfocus that is set to trigger on the onload event of the body tag.
<body onload="SetFocus()">
The user will click a radio button which enables the drop down. they select from the drop down which enables the textbox. When they scan a barcode into the textbox it will automatically tab out of the field, therefore triggering the onchange event to call some server side code which, if a successful SQL insert is completed, will insert a new row to the gridview, and it should set focus automatically back to the textbox via Javascript. Once that gridview object has more than a header and a row of data, I disable the drop down and radio button list, so if you look at the Javascript below, I can't use those as criteria in my if statement anymore.
Javascript:
var MatAllRB = document.getElementById("HF_RB_MatAll").value;
var MatAllCL = document.getElementById("DD_SelectCL_All").value;
var MatAll = document.getElementById("Txt_MatBC_All");
var MatAllPrompt = document.getElementById("HF_AllPrompt").value;
var count = $("#GV_Scan_All tr").children().length;
This works perfectly:
else if (ActiveTab == "cont-3" && MatAllRB != "" && MatAllCL != "")
{ alert("went into setfocus");
document.getElementById("Txt_MatBC_All").focus();
alert("made it through setfocus");
}
This only works if you actually click off the field, the tab doesn't work. It just does nothing.
else if (ActiveTab == "cont-3" && count == 9)
{ alert("went into setfocus");
document.getElementById("Txt_MatBC_All").focus();
alert("made it through setfocus");
}
This does the same thing as the above:
else if (ActiveTab == "cont-3" && (MatAllPrompt == "RP" || MatAllPrompt == "P03"))
{ alert("went into setfocus");
document.getElementById("Txt_MatBC_All").focus();
alert("made it through setfocus");
}
The weird thing is that all of these alerts that I have in here show up correctly, it just never sets focus. I am pretty new at this stuff still, so maybe I'm missing something, but I can't figure out why the focus() will work for click off rather than tabbing off. Any help would be appreciated.
Here's the HTML:
<asp:RadioButtonList runat="server" ID="RB_Mat_All" AutoPostBack="true" RepeatColumns="4" OnSelectedIndexChanged="RB_Mat_All_OnSelectedIndexChange">
<asp:ListItem Text="NC" value="NC"></asp:ListItem>
<asp:ListItem Text="DA" value="DA"></asp:ListItem>
<asp:ListItem Text="GW" value="GW"></asp:ListItem>
<asp:ListItem Text="PC" value="PC"></asp:ListItem>
</asp:RadioButtonList>
<asp:HiddenField runat="server" ID="HF_RB_MatAll"></asp:HiddenField >
<br />
<asp:DropDownList runat="server" ID="DD_SelectCL_All" AutoPostBack="true" OnSelectedIndexChanged="DD_SelectCL_All_OnSelectedIndexChange">
<asp:ListItem Value="" Text="Select..."></asp:ListItem>
<asp:ListItem value="53" text="05"></asp:ListItem>
<asp:ListItem value="54" text="06"></asp:ListItem>
<asp:ListItem value="55" text="07"></asp:ListItem>
<asp:ListItem value="57" text="08"></asp:ListItem>
<asp:ListItem value="58" text="09"></asp:ListItem>
</asp:DropDownList>
<asp:label runat="server" ID="Lbl_All_Prompt" CssClass="Form" Text=""></asp:label>
<asp:HiddenField runat="server" ID="HF_AllPrompt"></asp:HiddenField >
<asp:TextBox runat="server" ID="Txt_MatBC_All" Cssclass="Form" Text="" AutoPostBack="true" OnTextChanged="Txt_MatBC_All_TextChanged"></asp:TextBox>
<asp:GridView runat="server" ID="GV_Scan_All" CssClass="Form_Feedback"></asp:GridView>
When I view the source the textbox looks like this:
<input name="Txt_MatBC_All" type="text" onchange="javascript:setTimeout('__doPostBack(\'Txt_MatBC_All\',\'\')', 0)" onkeypress="if (WebForm_TextBoxKeyHandler(event) == false) return false;" id="Txt_MatBC_All" class="Form" />
It's odd that you can click off the field and it works, but tabbing off doesn't. Try adding tabIndexes to the inputs on your page.
The ids of your text box, change when the asp.net render the page. So try this to get the id dynamically and see if its works.
document.getElementById("<%=Txt_MatBC_All.ClientID%>").focus();
The same way you must use the ClientID on every getElementById you use.
by the way, on every line you focus the same text control (Txt_MatBC_All). If this is the case, why you make all that if, just use one line.
tip 1: you can see if your getElementById found the control by make teamporary an alert call like alert(document.getElementById("<%=Txt_MatBC_All.ClientID%>"));
tip 2: Right click on your browser and see the source code of your page to see what ids your control have take, to see if you actually is correct and the same with the javascript you use.
Try converting your JavaScript to square bracket notation. For example: document.forms[0].Txt_MatBC_All.focus();

how to reset dropdown selected index serverside value from javascript?

problem is I have a date text box and a shifts drop down. When I select a date and shift I get the list of employees. dropdown has a onSelectedIndexChanged event, so employee list will be populate only if we change shifts. So for date chage I have added ajavascript to reset shift dropdown to 0 index. therefore every time when you change the date you have to select the shift too and the selectindex change event will be fired.BUT the problem is when I reset shifts dropdown from javascript it is done only in client side not in server side.So if I select dropdownt to the previous value it doesn't fire the change event but for other values it works fine.
<asp:TextBox ID="txtSelectDate" runat="server" CssClass="inputAddRes" onchange="javascript:return ResetShifts();"></asp:TextBox>
<asp:DropDownList ID="ddlShifts" AutoPostBack="true" OnSelectedIndexChanged="ddlShifts_SelectedIndexChanged" runat="server" >
<asp:ListItem Text="Morning" Value="1"/>
<asp:ListItem Text="Evening" Value="2"/>
<asp:ListItem Text="Night" Value="3"/>
</asp:DropDownList>
function ResetShifts() {
document.getElementById('<%= ddlShifts.ClientID %>').selectedIndex = 0;
}
You could just call the select onchange event manually
document.getElementById('<%= ddlShifts.ClientID %>').onchange();

Categories