Enable button after an item in ListBox is selected - javascript

At the moment I'm using
<asp:ListBox ID="UserListBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
the button is disabled by default and after the OnSelectedIndexChanged is fired I am executing this behind.
protected void UserListBox_SelectedIndexChanged(object sender, EventArgs e)
{
loginBtn.Enabled = true;
}
This is causing the site to reload. I don't want that, instead I need javascript but I'm not familiar.

#Marco's answer is definitely more in-line with what you're looking for in the Web Forms world, but if you're set on using JavaScript start with:
document.getElementById("loginBtn").disabled = true;
This assumes that you've given your login button a fixed ID and ASP.NET isn't automatically assigning something crazy.
You'll have to remove the server-side event handler UserListBox_SelectedIndexChanged and replace it with a JavaScript event handler, otherwise the button will be disabled by JavaScript, but then the page will reload and undo the disable. If you had any other server-side code in that method it would need to find a new home, or you'd have to start really hacking at it.
Reasons like this are why it's nice to be able to stick with a single paradigm - do either server-side Web Forms work or client-side JavaScript. Avoid mixing & matching unless absolutely necessary - it's doable, but there will be tears and long nights.

Solution using javascript:
<script>
function checkSelect() {
if (document.getElementById('<%=UserListBox.ClientID %>').value != '')
document.getElementById('<%=loginBtn.ClientID %>').disabled = false;
}
</script>
just before </asp:content> also my list box now is:
<asp:ListBox ID="UserListBox" runat="server" onchange='checkSelect(this);'></asp:ListBox>

A usefull way to solve it is use update panels:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListBox ID="UserListBox" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
</ContentTemplate></asp:UpdatePanel>
....
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ListBox ID="loginBtn" runat="server" AutoPostBack="true" OnSelectedIndexChanged="UserListBox_SelectedIndexChanged"></asp:ListBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="UserListBox" EventName="SelectedIndexChanged" />
</Triggers></asp:UpdatePanel>

Hi you can simply use jquery to achieve the same, please consider below example
<div>
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Apple" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
<asp:ListItem Text="Guava" Value="4"></asp:ListItem>
<asp:ListItem Text="Pineapple" Value="5"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="6"></asp:ListItem>
<asp:ListItem Text="Grapes" Value="7"></asp:ListItem>
</asp:ListBox>
<asp:Button ID="btnLogin" runat="server" Text="Login" Enabled="false"/>
</div>
and register change event of select list in $(document).ready event of jquery like shown below
<script type="text/javascript">
$(document).ready(function () {
$('select[id*=ListBox1]').change( function () {
if($('select[id*=ListBox1] :selected').length >0)
$('#<%= btnLogin.ClientID%>').prop('disabled', false);
else
$('#<%= btnLogin.ClientID%>').prop('disabled', true);
});
});
</script>
comment for any problem, Enjoy !!

Related

ASPx.Net How to catch a change in value in an Itemtemplate DDL

I'm struggling to find a way to solve this.
I have a gridview and the first column of it is a DropDownList defined in an Itemtemplate:
<asp:GridView ID="gvXYZ" runat="server" DataKeyNames="Serial, XYZValue">
<Columns>
<asp:TemplateField HeaderText="Status">
<ItemTemplate>
<asp:DropDownList ID="ddlStat" runat="server" OnSelectedIndexChanged="ddlStat_SelectedIndexChanged"><asp:ListItem> </asp:ListItem><asp:ListItem> </asp:ListItem><asp:ListItem>OK</asp:ListItem><asp:ListItem>NG</asp:ListItem></asp:DropDownList>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="False" />
</asp:TemplateField>
</Columns>
</asp:GridView>
The user is presented with an empty choice, OK or NG as possible selections.
How can I trigger either JavaScript or VB side to run a function when the user makes any selection in any of the DDL in the grid?
In order to complete what asked, the user has to have either OK or NG selected.
I'm trying to tie the Save button to the fact that the grid has been completed.
I know I can run JavaScript on a HTML dropdown so I tried to create a function to do it and from an article I found I tried to run a VB method from a javascript function:
function ddlStat_SelectedIndexChanged() {
var someValueToPass = 'Hello server';
__doPostBack('CustomPostBack', someValueToPass);
}
the script never runs, the postback does not occur and the VB side code:
Protected Sub ddlStat_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim x As Integer
For x = 1 To 10 : x = x + 1 : Next
End Sub
is never triggered either.
I thought to do this on the VB side because I think I can more easily access properties of the grid, like the number of rows so I can check the DDL in each one of them.
Thank you for this and ask questions if I wasn't clear.
Setting AutoPostback property of the drop down should raise a post back call to the server side. JS function can be called using the HTML event onchange
<asp:DropDownList ID="MyDropDown" runat="server" AutoPostBack="True"
OnSelectedIndexChanged="SelectedChange" onchange="YourChangeFun(this);">
</asp:DropDownList>
Javascript:
<script type="text/javascript">
function YourChangeFun(ddl)
{
alert(ddl.selectedIndex);
}
</script>

How to pass Javascript value to label server side

I have a gridview that contains two(2) ASPxComboBox the value of the second Combo box is base on the value of the first combo box. DevExpress demos and sample are a bit complicated and time consuming so I think of a workaround that when the selected item of combo box is exchange the value will store in a label. And I will get the value of label to store in dropdown. But I don't know how to pass the value of label in server side. Any help would be much appreciated. Thank you!
Here's my code.
FrontEnd
<asp:Label ID="LblProduct" runat="server" Text="Label"></asp:Label>
<dx:ASPxGridView ID="ASPxGridView2" OnRowDataBound="ASPxGridView2_RowDataBound" ClientInstanceName="GridV" runat="server" AutoGenerateColumns="False" DataSourceID="forprod" KeyFieldName = "ppdtl_no">
<columns>
<dx:GridViewDataTextColumn FieldName="fld_product" Name="Dd_product" ShowInCustomizationForm="true" VisibleIndex="3">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxProduct" runat="server" DataSourceID="pp_prod" TextField="pp_ppname" ValueField="pp_ppcode">
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnProductChanged(s); }"></ClientSideEvents>
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataTextColumn>
<dx:GridViewDataComboBoxColumn FieldName="fld_type" Name="dd_type" ShowInCustomizationForm="true" VisibleIndex="4">
<SettingsHeaderFilter>
<DateRangePickerSettings EditFormatString="" />
</SettingsHeaderFilter>
<EditItemTemplate>
<dx:ASPxComboBox ID="ASPxComboBoxType" runat="server" DataSourceID="pp_type" TextField="pp_codetype" ValueField="pp_codetype">
</dx:ASPxComboBox>
</EditItemTemplate>
</dx:GridViewDataComboBoxColumn>
</columns>
</ASPxGridView>
JavaScript
function OnProductChanged(s, e) {
var selected_index = s.lastSuccessValue;
var aa = document.getElementById('LblProduct').innerText = selected_index;
}
onload = OnProductChanged;
You need to use the ClientID property of any element you run at server level in your selector. To achieve this, you have to write the JavaScript inside the file with your label, and then use <%= LblProduct.ClientID %>.
<script type="text/javascript">
document.getElementById('<%= LblProduct.ClientID %>');
</script>
Look at your project during runtime with Inspect - you will see the ID after compilation is not LblProduct, but something similar to ProjectName_PageName_ContentPlaceHolderName_LblProduct.
You could also just copy-paste that, though it's not open to change.

Populating existing dropdownlist using AsyncPostBackTrigger, not populate a new dropdownlist

For my web app, I tried to populate dropdownlist (DDL) based on what client click on the calendar extender ( I have this declared in codebehind vb.net to load it from database) using AsyncPostBackTrigger (because I dont want the page to autopostback). I have the button to fire the date selected and it did worked to populate the DDL except not really the way I wanted it to. Instead of updating it in the existing DDL, it creates a new DDL besides the existing ones. I tried looking for solution but did not managed to find any. Anyone can help me figure out why this happens and how to fix this?
Here's my asp.net & javascript code
<asp:Label ID="label16" runat = "server" Text="Select the date"></asp:Label></td>
<td id="Td29" style="width:290px;" runat="server">
<asp:TextBox ID="tbPostingDt" runat="server" style ="width:174px;"></asp:TextBox>
<asp:Button ID="ClickBtn" runat="server" Text="Click" style="display:none" OnClick="ClickBtn_Click" />
<asp:ImageButton ID="CalendarBtnPostingDt" runat="server" ImageUrl="~/Images/Calendar_scheduleHS.png" AlternateText="Click to display calendar"/>
<cc1:CalendarExtender ID="calPost" runat="server" PopupButtonID="CalendarBtnPostingDt"
TargetControlID="tbPostingDt" OnClientDateSelectionChanged="dateSelectionChanged" Format="dd-MMM-yyyy" Enabled="True"></cc1:CalendarExtender></td>
<asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="label18" runat = "server" Text="Post Cycle No"></asp:Label></td>
<td id="Td33" style="width:290px;" runat="server">
<asp:DropDownList ID = "ddlPostCycleNo" runat = "server" style ="width:180px;">
<asp:ListItem>ALL</asp:ListItem>
</asp:DropDownList> </td>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClickBtn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
function dateSelectionChanged(sender, args) {
var PostingDt = document.getElementById('<%= tbPostingDt.ClientID%>').value.trim();
var clickButton = document.getElementById("<%= ClickBtn.ClientID %>");
clickButton.click();
}
nevermind I figured it out already. I used the ontextChanged for the textbox when user select the date from calendar, and removed OnClientDateSelectionChanged, triggers and dummy button. I keep the UpdatePanel and it works just the way I wanted.

Unable to call Javascript function onload a asp:button using ASP.NET4

I am unable to call a Javascript function on the OnLoad event of a asp:button
HTML
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " onLoad = "AllHide()" OnClientClick ="ShowCal()" />
Javascript
function AllHide() {
alert("Hello");
}
Please Help
You will need to use JavaScript to toggle styles like you are trying
<asp:Button ID="btnFromCalOpen" runat="server" Text="" OnClientClick ="ShowCal()" style="display:none;visiblity:hidden;" />
Original Comment You can't do onLoad with JavaScript for any button. What are you hoping to accomplish? We can help figure out that solution.
You can do it at the page level. The page has a javascript onload event.
You can't do that.
Here's why. The OnLoad event in ASP.NET for a control is fired while the server is building the page (on the web server), but before it sends it to the browser (running on the user's machine).
Code on the web server can't directly call code on the browser computer (which hasn't even got the page yet).
If you just want to hide the control, just do this in your markup:
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " visible="false" OnClientClick ="ShowCal()" />
Another approach (hidden control doesn't takes up space):
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " style="display:none;" OnClientClick ="ShowCal()" />
Another approach (hidden control takes up space)
<asp:Button ID="btnFromCalOpen" runat="server" Text=" > " style="visibility:hidden;" OnClientClick ="ShowCal()" />

AjaxControlToolkit:TabPanel

This control has a property Enabled that acts exactly as Visible behaves i.e. ?.Enabled = false hides the control.
I need to be able to keep all the tabs visible but some to be disabled under code control.
Any hints as to how I can achieve this? Thanks.
Try to set Enabled property for TabPanel.
<ajaxToolkit:TabContainer
ID="TabContainer1" runat="server" ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"></ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"></ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel3" Enabled="False" runat="server" HeaderText="TabPanel3"></ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
Or in code-behind,
TabContainer1.Tabs[0].Enabled = false;
Here is one possible solution using client-side scripting. Basically, handle the OnClientActiveTabChanged event for the TabContainer (which fires whenever the active tab is changed). Then, if the tab is one that you don't want the user to use, change the ActiveTabIndex property of the TabContainer back to one that is acceptable.
Tab Container:
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1"
Height="126px" Width="400px" ClientIDMode="Predictable"
onclientactivetabchanged="tabClickCheck" >
<asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
</asp:TabPanel>
<asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
</asp:TabPanel>
<asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
</asp:TabPanel>
</asp:TabContainer>
Javascript handler:
<script type="text/javascript">
function tabClickCheck() {
var tabCont = document.getElementById("<%=TabContainer1.ClientID %>").control;
var tabInd = tabCont.get_activeTabIndex();
tabCont.set_activeTabIndex(2);
}
</script>
This function just sets the ActiveTabIndex to 2, regardless of which tab you clicked (you'll notice I'm also getting the current ActiveTabIndex, but I don't do anything with it - that's just to show you how). Obviously, use whatever logic makes sense for your app =)

Categories