I generate a report according to selection of company and their customer. I use one dropdown for company and according to company the customer is displayed. However, I want to make it possible to select multiple customers, and when the user clicks on the button to the view report, I want to update the query string with that selection. If the selection of customer is three, I want to pass their customer code using query string. In sort querystring is send according to the selection of customer.
Please help me.
Thanks and regards.
Mitesh
In your selection page (aspx):
...
<script type="text/javascript">
function submitSelection() {
var customerList = document.getElementById('<%= lbCustomers.ClientID %>');
var companyList = document.getElementById('<%= lbCompany.ClientID %>');
var selectedCustomerQuery = [];
for (var i = 0; i < customerList.options.length; i++) {
if (customerList.options[i].selected)
selectedCustomerQuery.push('customer_id=' + customerList.options[i].value);
}
location.href = 'Report.aspx?company_id=' + companyList.value + '&' + selectedCustomerQuery.join('&');
}
</script>
<asp:DropDownList ID="lbCompany" runat="server" SelectionMode="Single" >
<asp:ListItem Value="1">Company 1</asp:ListItem>
<asp:ListItem Value="2">Company 2</asp:ListItem>
</asp:DropDownList><br />
<asp:ListBox ID="lbCustomers" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="John" Value="1"></asp:ListItem>
<asp:ListItem Text="Paul" Value="2"></asp:ListItem>
<asp:ListItem Text="Peter" Value="3"></asp:ListItem>
</asp:ListBox><br />
<input id="Button1" type="button" value="View Report" onclick="submitSelection()" />
...
Then in your Report.aspx.cs:
...
protected void Page_Load(object sender, EventArgs e)
{
var selectedCompany = Request.QueryString["company_id"];
//get passed selected customers, will be stored in an array
var selectedCustomers = Request.QueryString.GetValues("customer_id");
Response.Write(string.Format("Company ID: {0}, Customers: {1}", selectedCompany.ToString(), string.Join(",", selectedCustomers)));
}
...
This illustrates an example without posting back to the page. If you need to post back to handle other logic in your code behind, you'll have to change the <input> button to an ASP.NET button control and handle its OnClick event.
Related
I am taking a checkbox list in content page of a master page by which i can select multiple values and save in the database. How to confirm that minimum one of the checkboxes r selected at the time of clicking the submit button.
You can do like below.
It does not matter in JavaScript that where control are either or content page or master page
<asp:CheckBoxList ID="chkModuleList"runat="server" />
<asp:CustomValidator runat="server" ID="cvmodulelist"
ClientValidationFunction="ValidateModuleList"
ErrorMessage="Please Select Atleast one Module" />
// javascript to add to your aspx page
function ValidateModuleList(source, args)
{
var chkListModules= document.getElementById ('<%= chkModuleList.ClientID %>');
var chkListinputs = chkListModules.getElementsByTagName("input");
for (var i=0;i<chkListinputs .length;i++)
{
if (chkListinputs [i].checked)
{
args.IsValid = true;
return;
}
}
args.IsValid = false;
}
Update:
Or you can go through this approach: Put any css-class say company. You can go through below.
There is a :checked ( http://api.jquery.com/checked-selector/ ) selector you can use :
<script>
$(document).ready(function() {
$(".company input").click(function() {
var cnt = $(".company input:checked").length;
if (cnt == 0)
{
// none checked
}
else
{
// any checked
}
});
});
</script>
You may want to add (or use) an id on the container of these checkbox, to optimize selector speed.
As for asp.net messing up client ids on controls, you can use
$('<%= MyControl.ClientID %>')
References:
Check if a checkbox is checked in a group of checkboxes in clientside
How to validate a user chose at least one checkbox?
Dado.Validators, a library on GitHub, handles this very nicely too.
<asp:CheckBoxList ID="cblCheckBoxList" runat="server">
<asp:ListItem Text="Check Box (empty)" Value="" />
<asp:ListItem Text="Check Box 1" Value="1" />
<asp:ListItem Text="Check Box 2" Value="2" />
<asp:ListItem Text="Check Box 3" Value="3" />
</asp:CheckBoxList>
<Dado:RequiredFieldValidator runat="server" ControlToValidate="cblCheckBoxList" ValidationGroup="vlgSubmit" />
Example codebehind.aspx.cs
btnSubmit.Click += (a, b) =>
{
Page.Validate("vlgSubmit");
if (Page.IsValid) {
// Validation Successful
}
};
https://www.nuget.org/packages/Dado.Validators/
I have a form containing two DropDowns lists:
Marital Status
No. of Children
Now I would like to enable the No. of Children DropDown upon selection of following items in the Marital Status DropDown:
Widow
Divorced
Awaiting Divorce
How can I do it?
In the MaritalStaus DropDownList Selected Index changed event, If the selected values match your options then enable the NoOfChild DropDownList.
protected void MaritalStaus_SelectedIndexChanged(object sender, EventArgs e)
{
//Match the selected value here : for Example:
if (MaritalStaus.SelectedValue.Equals("Divorced") || /*Other Comparisions */)
{
NoOfChild.Enabled = true;
}
}
DropDown lists have ListItem collection in them. Each ListItem has a Text and a Value. Try setting the text as "Divorced" and value as "D" or better to an integer like "1", something similar to ID. You will get these Text/Value from a Database table if you are retrieving it from the Database.
Make the No. of Children DropDown Enabled = false by default and then Enable = true as explained in the code snippet above by ebad86.
you can also use cascading dropdown from ajaxcontroltoolkit
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
.aspx
<asp:DropDownList ID="ddlMaritalStatus" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlMaritalStatus_SelectedIndexChanged">
<asp:ListItem Text="" />
<asp:ListItem Text="Widow" />
<asp:ListItem Text="Divorced" />
<asp:ListItem Text="Awaiting Divorce" />
</asp:DropDownList>
<asp:DropDownList ID="ddlNoOfChildren" runat="server" Enabled="false">
<asp:ListItem Text="1" />
<asp:ListItem Text="2" />
<asp:ListItem Text="3" />
<!-- and so on -->
</asp:DropDownList>
aspx.cs
protected void ddlMaritalStatus_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlMaritalStatus.SelectedItem.Text == "Widow") // if widow is selected
ddlNoOfChildren.Enabled = true;
else
ddlNoOfChildren.Enabled = false;
}
i have a drop downlist. When Selected Index changes I wanted to handle it in javascript. So, as starting step , I tried to print the value of list item text in a textbox through javascript. But could not accomplish it successfully. Here is the dropdownlist:
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
AppendDataBoundItems="True" TabIndex="3" AutoPostBack="True"
OnSelectedIndexChanged = "PlaceHoldersDropDownList_SelectedIndexChanged" >
<asp:ListItem Value="">Select</asp:ListItem>
<asp:ListItem Value="ContactName">[Contact Name]</asp:ListItem>
<asp:ListItem Value="ProductName">[Product Name]</asp:ListItem>
<asp:ListItem Value="ProductShortName">[Product Short Name]</asp:ListItem>
<asp:ListItem Value="CurrentTime">[Current Time]</asp:ListItem>
<asp:ListItem Value="EventStartTime">[Event Start Time]</asp:ListItem>
<asp:ListItem Value="EventStopTime">[Event Stop Time]</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="tb" runat="server"></asp:TextBox>
Here is the C# code
protected void PlaceHoldersDropDownList_SelectedIndexChanged(object sender,
EventArgs e)
{
var text = PlaceHoldersDropDownList.SelectedItem.Text;
string x = text;
PlaceHoldersDropDownList.Attributes.Add("onchange", "javscript:PasteTextInEditor
('"+text+"')");
}
Here is the javascript
function PasteTextInEditor(text) {
var x = document.getElementById("<%= tb.ClientID %>");
x.value = text; }
Can you please let me know the mistake I've been doing?
first you have to set AutoPostBack to false to handle it in client side(javascript) and you don't need to add onchange event programatically, you can just write it in the <asp:DrobDownList> something like that
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
AppendDataBoundItems="True" TabIndex="3" AutoPostBack="false"
onchange="PasteTextInEditor()">
and the PasteTextInEditor method will become
function PasteTextInEditor() {
var text = $("#<%= PlaceHoldersDropDownList.ClientID %> option:selected").text();
$("#<%= tb.ClientID %>").val(text);
}
note I am using jquery syntax
Using jQuery you can make the following:
1- turn off AutoPostBack and don't handle the OnSelectedIndexChanged event:
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server" AppendDataBoundItems="True" TabIndex="3" >
2- add a reference to jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
3- add a "startup" script to hook the onchanged event for the dropdown list, read the javascripts comments for more details.
<script type="text/javascript">
$(function () {
var ddl = $("#<%= PlaceHoldersDropDownList.ClientID %>");
var txt = $("#<%= tb.ClientID %>");
// hook the change event for the drop down list
$(ddl).change(function (e) {
var selectedValue = $(ddl).val();
// set the selectedValue into the textBox
$(txt).val(selectedValue);
});
});
</script>
I have done a code to disable a control when user clicks on a control. On my form i am having a TextBox and a DropDown. When user clicks on a TextBox i will disable the DropDown like that when click on DropDown i will disable the TextBox which works fine.
But when the user clicks on Disabled control i would like to enable that control. Means if i click on TextBox which was disabled i would like to Enable it like that for dropdown too..
My sample Script is as follows
<script type="text/javascript">
function toggleDropDownList1()
{
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
</script>
Design
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
Apparently Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled, and any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree.
So, if you want to achieve something like that, you will probably have to do it with a workaround.
Instead of actually disabling the field try to style the fields to look as if they are disabled, that way you can still capture the click event.
The idea is to place a div in front of dropdown list, and this div accept the onclick event.
The issue here is that the div can not place so easy in front of dropdown list. To place it you need to do that dynamically and use the absolut position.
I make here a small code, and test it and working. I have left the background color RED on div to see where it is. Some details I left it to you, eg to find the width and height of your control list, I place the onclick, you can place back the double click, And just remove the red background.
<script type="text/javascript">
function toggleDropDownList1()
{
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "none";
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
// need to find the height/width
// MyDiv.style.height = MyDdl.style.height;
// MyDiv.style.width = MyDdl.style.width;
}
</script>
and the asp code.
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<br /><br />
<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;">
</div>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>
Do you mean
function toggleIt() {
var d=document.getElementById("<%= DropDownList4.ClientID %>");
var t =document.getElementById("<%= TextBox1.ClientID %>");
d.disabled=!d.disabled
t.disabled=!t.disabled
}
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
I have the code below with sets the focus on a textbox when the page loads and when the user selects a radio button.
How can I change this so that if they choose the last radio option "Mail" the focus is not set to
txtPayerName but instead to the btnSubmit control?
$(function () {
SetDefaultPaymentType();
$("#txtPayerName").focus();
$("#rdLstPaymentOptions").change(function () {
$("#txtPayerName").focus();
});
});
<asp:RadioButtonList ID="rdLstPaymentOptions" runat="server" RepeatColumns="3" RepeatDirection="vertical"
RepeatLayout="Flow" OnPreRender="rdBtnLst_PreRender" TabIndex="1"
ClientIDMode="Static">
<asp:ListItem Text="Credit Card " Value="CreditCard" ></asp:ListItem>
<asp:ListItem Text="Electronics Fund Transfer " Value="EFT"></asp:ListItem>
<asp:ListItem Text="Check By Mail " Value="Mail"></asp:ListItem>
</asp:RadioButtonList>
What if you set the change event on each radio button individually?
Something like:
$("#rdLstPaymentOptions").each(function (index) {
if (index == $("#rdLstPaymentOptions").length - 1) {
// insert code to set change event for last radio button
}
else {
($this).change = function () {
$("#txtPayerName").focus();
}
}
});
Give the radio button and the submit button a unique CSS class, then use:
$('.radioClass').click(function() {
$('.submitClass').focus()
})