I am trying to get a javascript function to work properly with my asp.net controls. I have two radio buttons and three textboxes.
When the first radio button is clicked I would like to disable the third textbox and when the second radio button is clicked I would like to disable the third text box. See the attachment for a screenshot.
I have tested that the function works by adding "OnClick" to the first radio button and setting AN ALERT WHICH IS WORKING.
However, I am not sure how to pass the controls in to the function to have access to them. Anyone know how to do this?
Screenshot
ASP.NET
<asp:RadioButton ID="RadioButton1" runat="server" Checked="True" GroupName="DateTimeQuery" OnClick="TimeRangeClickEvent()"/>
<asp:TextBox ID="startdatetext" Enabled="true" runat="server" MaxLength="10"></asp:TextBox>
<asp:TextBox ID="enddatetext" Enabled="true" runat="server" MaxLength="10"></asp:TextBox>
<asp:RadioButton ID="RadioButton2" runat="server" GroupName="DateTimeQuery" OnClick="TimeRangeClickEvent() />
<asp:TextBox ID="withinthepast" Enabled="true" runat="server" Text="1"></asp:TextBox>
Javascript
<script>
function TimeRangeClickEvent(How do I pass asp.net controls here)
{
alert('Working');
}
</script>
You should use ClientID control properties to get IDs of HTML elements and then work with them from Javascript. More info.
In Javascript:
var radio1 = document.getElementById('<%=RadioButton1.ClientID%>');
When you have all your HTML elements you just need to handle necessary change/clicked/selected events in javascript to make it work.
Related
I've a page where on page load event I've set focus on a textbox using javascript. But after button press I've to set focus on different text box of different asp:Panel. Is this possible using javascript? Currently I am doing this via code behind page.
<script type="text/javascript">
$(function () {
document.getElementById('<%=txtPassengerId.ClientID%>').focus();
});
</script>
<asp:Panel ID = "firstPanel" >
<asp:TextBox ID="txtPassengerId" runat="server"/>
<asp:Button ID="btn_search" runat="server" Text="Search" OnClick="btn_search_Click" />
</asp:Panel>
<asp:Panel ID = "secondPanel" >
<asp:TextBox ID="txtDestination" runat="server"/>
</asp:Panel>
After the button pressed secondPanel is visible and I need to focus on txtDestination text box. Is this possible using javascript?
Yes, you have to use the selector you've used "document.getElementById" and use the .focus() function.
document.getElementById("secondpanel").style.visibility = "visible";
document.getElementById("txtDestination").focus();
should do it. if you need more just comment.
I'm developping a form page in a WebForms application.
I have a RadioButtonList and a Panel, and I wanted the panel to open when a especific value of the RadioButtonList was selected, how do I do this?
I've tried with AutoPostBack but I didn't like how it worked (running the page again), are there any other solutions?
Some of the places I searched for an answer recommended using the AutoPostBack property, but I personally didn't like it and so I had to find another way for it to work and so I decided to use JavaScript/JQuery...
This is an HTML sample code of an example of a RadioButtonList and a panel that opens when a chosen option on it is clicked (the value "Required" causes it to open and "Not Required" to close in this case):
<div>
<p class="space">3.2. ACCOMMODATION (*)</p>
<asp:RadioButtonList ID="accomodation" runat="server" RepeatDirection="Horizontal" RepeatLayout="Flow" Width="500px">
<asp:ListItem Text="Not Required" Value="Not Required"></asp:ListItem>
<asp:ListItem Text="Required" Value="Required"></asp:ListItem>
</asp:RadioButtonList>
<asp:Panel ID="PanelAccommodation" runat="server">
<p>
Number of nights (*):
<asp:RequiredFieldValidator ID="RequiredFieldValidator12" runat="server" ControlToValidate="numberOfNights" ForeColor="red" ErrorMessage="<- Required"></asp:RequiredFieldValidator>
</p>
<asp:TextBox ID="numberOfNights" runat="server" Width="50px"></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" TargetControlID="numberOfNights"
FilterType="Numbers" runat="server">
</ajaxToolkit:FilteredTextBoxExtender>
<p>Preferred Hotel:</p>
<asp:TextBox ID="preferredHotel" runat="server" Width="450px"></asp:TextBox>
<p>Preferred Hotel URL:</p>
<asp:TextBox ID="preferredHotelURL" runat="server" Width="450px"></asp:TextBox>
</asp:Panel>
</div>
The Script I used:
$(document).ready(function () {
$("#MainContent_PanelAccommodation").hide("fast");
$('#<%= accomodation.ClientID%>').find('input:radio').click(function () {
var selVal = $('#<%= accomodation.ClientID %>').find('input:checked').val();
if (selVal == "Required") {
$("#MainContent_PanelAccommodation").show("fast");
}
if (selVal == "Not Required") {
$("#MainContent_PanelAccommodation").hide("fast");
}
})
});
In this Script I use the first
$("#MainContent_PanelAccommodation").hide("fast");
to make sure that when the page runs the panel is hidden and will only open when/if "Required" is selected...
Another thing you may struggle with is what ID to put in the function since as you can see the panel ID is "PanelAccommodation", but the ID I use in the function is "MainContent_PanelAccommodation" since that's how it's recognized on your browser (to check this just select the panel's position and inspect element) you'll notice that the ID becomes "MainContent_PanelAccommodation" because it inherits from your asp:Content ContentHolderID...
Hope this helps ;) any questions just ask...
I have a GridView in this GridView there is a column which I use to select date with the use of asp:CalendarExtender. I have multiple rows in GridView which are dynamically generated.
When I click the image button calender pops up and I choose my date.
In some rows I want the User to select date when he clicks image button of that row. sometime I don't want to allow him to select date.
When he tries to change the date or click on the image button, he should get alert message saying that you are not allowed to change the date.
I want to handle it from client side. So please suggest me how to do this.
this is the aspx code.
<asp:TextBox runat="server" ID="StartDateTime" CssClass="search_area_text_vm_small" onclick = "javascript:DateClick(this.id);"></asp:TextBox>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/image3.jpg" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDateTime" PopupButtonID="Image1" Format="yyyy-MM-dd" ></asp:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="StartDateTime"
ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator>
You can make use of the OnClientDateSelectionChanged event of the CalendarExtender.
Use below code:
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="StartDateTime" PopupButtonID="Image1" Format="yyyy-MM-dd" OnClientDateSelectionChanged="checkIfDateSelected()" >
</asp:CalendarExtender>
<javascript>
function checkIfDateSelected(){
var dateTextBox=document.getElementByid('StartDateTime');
if(dateTextBox!='')
{
alert ('Date once selected cannot be changed');
return false;
}
</javascript>
This will show the info pop up and prevent the form submission if the date has been selected already.
How can I make postback after user changes textbox text and hits enter ?
Is only javascript real solution. Doesnt asp.net give any out from box solution for such a problem ?
Thank You for any hints.
Beside the javascript solutions, you can place the textbox with a submit button inside a panel and make use of DefaultButton property of the panel.
Below is the code example: -
Your aspx will look like this
<asp:Panel ID="Panel1" runat="server" DefaultButton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</asp:Panel>
Now, when you press enter inside the text box the button click event occurs, same as by clicking the button.
Hi
While working on asp, i want if i click on my asp text field, a radio button should be checked, but i dont find any onClick event available for asp text field, and if i use onchange, it is from the server end, i want this situation without page refresh, just like we do in html fields using javascript, please help!!!
Try this one:
HTML:
<asp:TextBox ID="txtSelect" runat="server" Width="200px" Text="Click here"> </asp:TextBox>
<br />
<asp:RadioButton ID="radCheck" runat="server" />
JQUERY:
$("#txtSelect").click(function(){
$("#radCheck").attr("checked",true);
});
OnFocus is probably the event I would use.
You can use Ajax if you don't wanna refresh the page