I want to access drop down menu's variable in java script on change event, here is my code
<asp:DropDownList ID="DropDownList1" runat="server" onchange="document.location.href = url_Lookbook;" >
<asp:ListItem Value="0">hello</asp:ListItem>
<asp:ListItem Value="1">world</asp:ListItem>
</asp:DropDownList>
here is the script coding:
<script type="text/javascript">
var url_Lookbook = "http://microsoft.com";
</script>
My question is how do I pass down value=0 or value = 1 to different page, any help is appreciated.
If you wrote it as a javascript function, it would be simpler
<asp:DropDownList ID="DropDownList1" runat="server" onchange="navFromList(this.value);" >
<asp:ListItem Value="0">hello</asp:ListItem>
<asp:ListItem Value="1">world</asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
function navFromList( qsParam )
{
document.location.href = "http://microsoft.com?arg=" + qsParam;
return false;
}
</script>
This is how I do it, completely in server side code. You don't have to use javascript (if you aren't required to)
<asp:DropDownList ID="ddlGlobalDestinations" runat="server" OnSelectedIndexChanged="ddlGlobalDestinations_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="StackOverflow" Value="http://www.stackoverflow.com"></asp:ListItem>
<asp:ListItem Text="Google" Value="http://www.google.com/"></asp:ListItem>
<asp:ListItem Text="Microsoft" Value="http://www.microsoft.com/"></asp:ListItem>
</asp:DropDownList>
here is the c# code-behind
protected void ddlGlobalDestinations_SelectedIndexChanged(object sender, EventArgs e)
{
Response.Redirect(ddlGlobalDestinations.SelectedValue, true);
}
onchange="document.location.href = url_Lookbook + '?param=' + this.value;" appears to work in FF3 and IE7.
Related
There are several articles describing how to do this is code behind however:
Is it possible to set the value of a dropdownlist to a session variable on the aspx page?
I am using SqlDataSource to populate the dropdownlist so do not wish to add code behind if it can be avoided.
<asp:DropDownList ID="ddl" runat="Server" DataSourceID="sqlDS" DataValueField="ID" DataTextField="TEXT" AppendDataBoundItems="true">
<asp:ListItem Text="" Value="" Selected="True" />
</asp:DropDownList>
<asp:SqlDataSource ID="sqlDS" runat="Server" SelectCommand="spDS" SelectCommandType="StoredProcedure" />
Set Session("ID") as selected value on load?
The dropdown list is already populated from the sqldatasource. I just want to set the initial value on page load.
You need a server side code in order to use Session. The following code doesn't requires code behind file, but again the code inside script will run at server side.
<asp:DropDownList ID="ddl" runat="Server"
DataSourceID="sqlDS"
DataValueField="ID"
DataTextField="TEXT"
AppendDataBoundItems="true"
OnSelectedIndexChanged="ddl_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Text="" Value="" Selected="True" />
</asp:DropDownList>
<asp:SqlDataSource ID="sqlDS" runat="Server"
SelectCommand="spDS" SelectCommandType="StoredProcedure" />
<script runat="server">
protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
Session["SelecteValue"] = ddl.SelectedValue;
}
</script>
Note: Make sure AutoPostBack="True" for DropDownList.
Do not mix code with markup. It makes sense to separate them for many reasons. So ASPX will have just the presentation, and CS/VB just the code logic.
When you compile/deploy your side to production - there will not be "the second page" - only ASPX page will remain. Code will be compiled into a DLL.
you'll need an event for your dropdown list on change. Are you using C# or VB.net for your codebehind?
add to onSelectedIndexChanged="ddl_OnSelectedIndexChanged"
to your code behind add:
{this is C# vb is similar}
protected void ddl_OnSelectedIndexChanged(Object sender, EventArgs e)
{
Session["selectedID"] = ddl.selectedValue;
}
to your page load, add
if (isPostback)
{
ddl.selectedValue = Session["selectedID"];
}
<td>Type:
</td>
<td>
<asp:DropDownList ID="ddltype" runat="server">
<asp:ListItem>---select---</asp:ListItem>
<asp:ListItem Text="Setter" Value="1">
</asp:ListItem>
<asp:ListItem Text="Getter" Value="2"></asp:ListItem>
</asp:DropDownList>
</td>
For this dropdownlist, I put validation like this
var ddltype = document.getElementById('<%=ddltype.ClientID%>');
var type = ddltype.options[ddltype.selectedValue].value;
if (type == 0) {
alert("Please Select setter/getter type.");
return false;
}
but it is not firing. How can I write this?
You should really get familiar with ASP.NET validators. Javascript can be disabled.
<asp:DropDownList ID="ddltype" runat="server" AutoPostBack="true">
<asp:ListItem>---select---</asp:ListItem>
<asp:ListItem Text="Setter" Value="1"></asp:ListItem>
<asp:ListItem Text="Getter" Value="2"></asp:ListItem>
</asp:DropDownList><br />
<asp:RequiredFieldValidator ID="reqType" runat="server"
InitialValue="---select---"
ControlToValidate="ddltype"
ErrorMessage="Required: Please select a Type"
Display="Dynamic"
CssClass="blah">
</asp:RequiredFieldValidator>
The InitialValue is important. Otherwise ---select--- would be a valid selection.
Note that i've also added AutoPostBack="true" to the DropDownList, maybe you want to postback immediately as soon as the user has selected an item.
Side-note: use a ValidationSummary with ShowMessageBox="true" and EnableClientScript="true" if you want to show the messages in a javascript alert.
Try this
var ddltype = document.getElementById('<%=ddltype.ClientID%>').text;
if (type == "---select---") {
alert("Please Select setter/getter type.");
return false;
}
Try this way ! but you can use asp.net validation control .
Any way ,my solution will validate two type ,for the dropdown selected vale or dropdown selected item
function Validate()
{
var e = document.getElementById('<%=ddltype.ClientID%>');
//if you need value to be compared then use
var strUser = e.options[e.selectedIndex].value;
//if you need text to be compared then use
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0) **//for text use if(strUser1=="---Select---")**
{
alert("Please Select setter/getter type.");
return false;
}
}
The below code has change your some code and working good for me
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function validation() {
debugger;
var e = document.getElementById('<%=ddltype.ClientID%>');
var strUser1 = e.options[e.selectedIndex].value;
if (strUser1 == 0) {
alert("Please Select setter/getter type.");
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="validation();" OnClick="btnSave_Click" />
<asp:DropDownList ID="ddltype" runat="server">
<asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
<asp:ListItem Text="Setter" Value="1">
</asp:ListItem>
<asp:ListItem Text="Getter" Value="2"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
and see this line
<asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
But you missed set value in that item , So it's get error, Now set value 0 in that line , and now your code working (See my sample code), Or you need to use .text and check the condition for
if(strUser1=="---Select---")
{
//alert
}
I have two dropdownlists on my form-ddl1 and ddl2. They together determine the visibility of a textbox -txt1. For that I do this check:
if (ddl1.SelectedIndex==2 && ddl2.SelectedIndex>2)
{
if (!txt1.Visible)
{txt1.Visible=true;// And then I want to call postback}
}
else
{
if (txt1.Visible)
{txt1.Visible=false;// And then I want to call postback}
}
As you can see, I want to post the page to server only if the above condions are true. The code above is triggered on SelectedIndexChanged event of the both dropdownlists. How can I or is it possible to achieve upon a condition?
I am not sure if i understand your problem but you want to achieve postback only if certain condition is met. you can hook up a javascript function on both dropdown onchange="return onchange();" Set Autopostback = true;
function Onchange() {
var ddl1 = document.getElementById('<%= ddl1.ClientID %>');
var ddl2 = document.getElementById('<%= ddl2.ClientID %>');
var txtbox = document.getElementById('<%= txtbox.ClientID %>');
if (ddl1.selectedIndex == 2 && ddl2.selectedIndex > 2) {
txtbox.style.display = "inline";
__doPostBack(ddl1, '');
}
else {
txtbox.style.display = "none";
return false;
}
}
Aspx code should look like this.
<asp:DropDownList runat="server" AutoPostBack="true" ID="ddl1" onchange="return Onchange();"
OnSelectedIndexChanged="ddl1_SelectedIndexChanged">
<asp:ListItem Text="text1" />
<asp:ListItem Text="text2" />
<asp:ListItem Text="text3" />
<asp:ListItem Text="text4" />
</asp:DropDownList>
<asp:DropDownList runat="server" AutoPostBack="true" ID="ddl2" onchange="return Onchange();"
OnSelectedIndexChanged="ddl1_SelectedIndexChanged">
<asp:ListItem Text="text1" />
<asp:ListItem Text="text2" />
<asp:ListItem Text="text3" />
<asp:ListItem Text="text4" />
</asp:DropDownList>
<asp:TextBox runat="server" ID="txtbox" />
Tested it and it works...
If AutoPostBack = True, which it would have to be for your events to be firing just call a funciton when your condition is met. ASP.NET is always posting back, you just need to handle the condition, otherwise you have to handle the validation with JavaScript and manually post the page:
if (ddl1.SelectedIndex==2 && ddl2.SelectedIndex>2)
{
if (!txt1.Visible)
{
txt1.Visible=true;// And then I want to call postback
//dowork
}
}
else
{
if (txt1.Visible)
{
txt1.Visible=false;// And then I want to call postback
//do work
}
}
I am trying to do something i thought was straightforward [able to do it in PHP this way] but aspx is complaining... the code should build a drop down menu with the numbers from x to y and i wrote it as:
<asp:DropDownList runat="server" ID='DOBD'><asp:ListItem value=''>---</asp:ListItem>
<% for (int i = 1;i<32;i++) { %>
<asp:ListItem value='<%= i %>'><%= i %></asp:ListItem>
<% } %>
</asp:DropDownList>
i am getting the code block error and not sure what to do.
thank you in advance for your help!
Add items in the codebehind class. You can access any control using id of the control:
this.DOBD.Items.Add(new ListItem("----"));
for (int i = 1; i < 32; i++)
{
this.DOBD.Items.Add(new ListItem(i.ToString()));
}
also, you can leave your <asp:ListItem value=''>---</asp:ListItem> but in this case you need to set AppendDataBoundItems to true:
<asp:DropDownList ID="DOBD" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
Also, solution without codebehind class:
<%
for (int i = 1; i < 32; i++)
{
this.DOBD.Items.Add(new ListItem(i.ToString()));
}
%>
<asp:DropDownList ID="DOBD" runat="server" AppendDataBoundItems="true">
<asp:ListItem Text="---"></asp:ListItem>
</asp:DropDownList>
As an alternative to Samich's answer, you can use a DataSource to fill the dropdown:
<asp:DropDownList runat="server" ID='DOBD'
DataSource='<%# System.Linq.Enumerable.Range(1, 32) %>'>
</asp:DropDownList>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if(! IsPostback) {
DOBD.DataBind();
}
}
</script>
or a ObjectDataSource
<asp:DropDownList ID="ddloption" runat="server" Visible="false">
<asp:ListItem Text="Active" Value="Active"></asp:ListItem>
<asp:ListItem Text="D-Active" Value="D-Active"></asp:ListItem>
</asp:DropDownList>
function boxchange(dd)
{
document.getElementById("<%= ddloption.ClientID%>").visibility = "visible";
}
ddloption is null, what i m getting...can you tell me how to work with this.
When you have a runat="server" visible="false" asp control, it is not rendered in the html. Try something like this:
<div id="wrapper" style="display: none;">
<asp:DropDownList ID="ddloption" runat="server">
<asp:ListItem Text="Active" Value="Active"></asp:ListItem>
<asp:ListItem Text="D-Active" Value="D-Active"></asp:ListItem>
</asp:DropDownList>
</div>
function boxchange(dd)
{
document.getElementById("wrapper").style.display = "block";
}
To hide the dropdown
document.getElementById("<%= ddloption.ClientID%>").Style.display='none';
To Show it again:
document.getElementById("<%= ddloption.ClientID%>").Style.display='';
Cheers
try
function boxchange(dd)
{
var control = document.getElementById("<%= ddloption.ClientID %>");
if (control != null)
control.style.visibility = "visible";
}
Nick is right, didn't even notice.