OnSelectedIndexChanged Not working - asp.net

I'm not sure what I'm doing wrong here. I'm try to get an OnSelectedIndexChanged event working, but I'm trying to do it without using the asp form controls.
In the below example the OnServerClick works for the <a> element but neither the OnSelectedIndexChanged nor OnServerClick seem to work for the <select>.
<%# Page Language="VB" AutoEventWireup="True" %>
<!DOCTYPE html>
<html>
<head>
<script runat="server">
Sub HtmlAnchor_Click_1(sender As Object, e As EventArgs)
Message.InnerHtml = "this doesn't work"
End Sub
Sub HtmlAnchor_Click_2(sender As Object, e As EventArgs)
Message.InnerHtml = "this works"
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<select id="AnchorSelect" name="select1" OnSelectedIndexChanged="HtmlAnchor_Click_1" runat="server">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br /><br />
<a id="AnchorButton" onserverclick="HtmlAnchor_Click_2" runat="server">Click Here</a>
<br /><br />
<span id="Message" runat="server"/>
</form>
</body>
</html>
Any ideas, or solutions would be appreciated.
Cheers.

select is an HTML input and the OnSelectedIndexChanged would be a Javascript function that gets called.
Use <asp:DropDownList> and set autopostback=true. Then, you would put the OnSelectedIndexChanged in your codebehind to use it.
Check out this example: DropDownList's SelectedIndexChanged event not firing

Related

aspx Request.Form.Count=0

I am not getting any data when submitting a form. I would expect Request.Form.Count=2, but instead RequestForm.Count=0.
Any assistance would be appreciated.
<%# Page Language="VB" EnableViewState="false" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="ecomm_Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1" method="post">
<input id="textfield" type="text" value="My Text" />
<input type="submit" value="Send it" />
</form>
</body>
</html>
Code behind part
Imports System.Diagnostics
Partial Class ecomm_Default2
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Request.HttpMethod = "POST" Then
Debug.WriteLine(Request.Form.Count)
End If
End Sub
End Class
You input fields are missing names. Make sure you add them:
<input id="textfield" name="foo" type="text" value="My Text" />
<input type="submit" name="bar" value="Send it" />
Now on the server you will get both foo and bar keys with their respective values.

Why my checkBox statement doesnt works?

Why my checkBox statements doesnt works?I've used session as you seen(because my homework so dissmiss if it usefull or not):
<form id="ShoppingCart" action="Final.aspx">
<input type="checkbox" runat="server" id="CallOfDutyCheckBox" />
<%
if (CallOfDutyCheckBox.Checked)
Session["Username_CallOfDutyCheckBox_price"] = "5";
%>
<input type="submit" value="Buy It" />
</form>
<form id="Final">
<div>
<%
Response.Write(Session["Username_CallOfDutyCheckBox_price"]);
%>
</div>
</form>
Do you understand when you click the checkbox, the code at the server does not run yet? Click submit to submit the form with the value of the checkbox.

jQuery: function not working when clicking button inside <form runat="server">

With jQuery, in (document).ready I assigned a click function to all buttons of my asp.net (aspx) page.
When I click a button outside , the function works properly.
When clicking a button INSIDE the form, it doesn't work. Why?
Here my default.aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQuery._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("input").before("ciao");
});
});
</script>
</head>
<body>
<button id="Button1">Button BEFORE Form</button>
<button id="Button2">Another BEFORE Form</button>
<form id="form1" runat="server">
<button id="btStart">Button in Form</button>
<div>
<input type="text" value="I like number 1" />
<input type="text" value="Smile to number 2" />
</div>
</form>
</body>
</html>
I'm using Visual Studio 2010. I tried also with jQuery 1.4.2, same problem.
Thanks for letting me know, cheers.
Since you are clicking a button in a <form>, it triggers a submit action. Try adding
return false;
after
$("input").before("ciao");
to prevent the default action related to that click event.
It should work but the button is just submitting and refreshing so you are not noticing it. Since your using asp.net you could do it by just using an asp:Button like:
<asp:Button ID="yourButton"
OnClientClick="$('input').before('ciao'); return false;" Text="Test" />

How to get selected value of a html select with asp.net

I have code below:
<select id="testSelect">
<option value="1">One</option>
<option value="2">Two</option>
</select>
<asp:Button ID="btnTest" runat="server" Text="Test it!" onclick="btnTest_Click" />
I need to get selected options' value on postback. How can I do this with asp.net?
You need to add a name to your <select> element:
<select id="testSelect" name="testSelect">
It will be posted to the server, and you can see it using:
Request.Form["testSelect"]
I've used this solution to get what you need.
Let'say that in my .aspx code there's a select list runat="server":
<select id="testSelect" runat="server" ClientIDMode="Static" required>
<option value="1">One</option>
<option value="2">Two</option>
</select>
In my C# code I used the code below to retrieve the text and also value of the options:
testSelect.SelectedIndex == 0 ? "uninformed" :
testSelect.Items[testSelect.SelectedIndex].Text);
In this case I check if the user selected any of the options. If there's nothing selected I show the text as "uninformed".
If you would use asp:dropdownlist you could select it easier by testSelect.Text.
Now you'd have to do a Request.Form["testSelect"] to get the value after pressed btnTes.
Hope it helps.
EDIT: You need to specify a name of the select (not only ID) to be able to Request.Form["testSelect"]
<%# Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> HtmlSelect Example </title>
<script runat="server">
void Button_Click (Object sender, EventArgs e)
{
Label1.Text = "Selected index: " + Select1.SelectedIndex.ToString()
+ ", value: " + Select1.Value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
Select an item:
<select id="Select1" runat="server">
<option value="Text for Item 1" selected="selected"> Item 1 </option>
<option value="Text for Item 2"> Item 2 </option>
<option value="Text for Item 3"> Item 3 </option>
<option value="Text for Item 4"> Item 4 </option>
</select>
<button onserverclick="Button_Click" runat="server" Text="Submit"/>
<asp:Label id="Label1" runat="server"/>
</form>
</body>
</html>
Source from Microsoft. Hope this is helpful!
Java script:
use elementid. selectedIndex() function to get the selected index

Running Javascript after control's selected value has been set

Simple ASP.NET application.
I have two drop-down controls. On the first-drop down I have a JavaScript onChange event. The JavaScript enables the second drop-down and removes a value from it (the value selected in the first drop-down). If they click the blank first value of the drop-down, then the second drop-down will be disabled (and the options reset).
I also have code in the OnPreRender method that will enable or disable the second drop-down based on the value of the first drop-down. This is so that the value of the first drop-down can be selected in code (loading user settings).
My problem is:
The user selects something in the first drop-down. The second drop-down will become enabled through JavaScript.
They then change a third drop-down that initiates a post back. After the post back the drop-downs are in the correct state (first value selected, second drop-down enabled).
If they then click the back button, the second drop-down will no longer be enabled although it should be since there's something selected in the first drop-down.
I've tried adding a startup script (that will set the correct state of the second-drop down) through ClientScript.RegisterStartupScript, however when this gets called the first drop-down has a selectedIndex of 0, not what it actually is. My guess is that the value of the selection gets set after my start script (but still doesn't call the onChange script).
Any ideas on what to try?
If the second dropdown is initially enabled through javascript (I'm assuming this is during a javascript onchange, since you didn't specify), then clicking the back button to reload the previous postback will never enable it.
Mixing ASP.NET with classic javascript can be hairy. You might want to have a look at ASP.NET's Ajax implementation (or the third-party AjaxPanel control if you're forced to use an older ASP.NET version). Those will give you the behaviour that you want through pure C#, without forcing you to resort to javascript hackery-pokery.
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void indexChanged(object sender, EventArgs e)
{
Label1.Text = " I did something! ";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test Page</title>
</head>
<body>
<script type="text/javascript">
function firstChanged() {
if(document.getElementById("firstSelect").selectedIndex != 0)
document.getElementById("secondSelect").disabled = false;
else
document.getElementById("secondSelect").disabled = true;
}
</script>
<form id="form1" runat="server">
<div>
<select id="firstSelect" onchange="firstChanged()">
<option value="0"></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="secondSelect" disabled="disabled">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label1" runat="server"></asp:Label>
</div>
</form>
<script type="text/javascript">
window.onload = function() {firstChanged();}
</script>
</body>
</html>
Edit: Replaced the whole code. This should work even in your user control.
I believe that Register.ClientScriptBlock is not working because the code you write in that block is executed before window.onload is called. And, I assume (I am not sure of this point) that the DOM objects do not have their values set at that time. And, this is why you are getting selectedIndex as always 0.

Resources