I have one master page and Below is one content page's code..I am not able to find dropdownlist dpbatchname 's value inside javascript..i am new to javascript plz,help i want to validate textbox value based on that dropdownlist value..
<asp:Content ID="Content1" ContentPlaceHolderID="Contentplaceholder2" Runat="Server">
<script type="text/javascript" language="javascript">
function ClientValidate(source, arguments) {
var ddl = document.getElementById("dpbatchname");
if (ddl.value.length == 2) {
arguments.IsValid = true;
}
else {
arguments.IsValid = false;
}
}
</script>
<div>
<table style="width: 100%; background-color:Silver" border="1">
<td align="right" width="50%" valign="top">
<asp:Label ID="Label3" runat="server" Text="Select Batch:"
Font-Underline="False" ForeColor="#FF3300" Font-Bold="True" Font-Size="Larger"></asp:Label>
</td>
<td width="50%" valign="top">
<asp:DropDownList ID="dpbatchname" runat="server" AutoPostBack="True"
DataSourceID="SqlDataSource5" DataTextField="batch_name"
DataValueField="batch_name" Width="119px" Height="33px">
</asp:DropDownList>
<asp:TextBox ID="tbnooflecture" runat="server" Width="113px" Height="33px"></asp:TextBox>
<asp:CustomValidator id="CustomValidator1" ControlToValidate="tbnooflecture" ClientValidationFunction="ClientValidate"
ValidationGroup="upper" Display="Static" ErrorMessage="Not an even number!" ForeColor="green" Font-Name="verdana" Font-Size="10pt"
runat="server"/>
</td>
</tr>
</div>
Use
<%=dpbatchname.ClientID %>
to get the rendered ID:
document.getElementById("<%=dpbatchname.ClientID %>");
Related
I have two panels Panel1 and panel2 when page loads, both panels are hidden. And I have a dropdown list, when I selct dropdown values the panel shoud be visible. Now its not visible as per my dropdown selection. My page load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Panel1.Visible = false;
Panel2.Visible = false;
}
}
Dropdown click function
protected void ddmode_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddmode.SelectedItem.Value == "4")
{
Panel1.Visible = true;
Panel2.Visible = false;
}
}
But now when I select dropdown with value 4 panel1 is not visible. My UI part
<tr>
<td align="left" class="style2">
Mode</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<asp:Panel ID="Panel1" runat="server">
<tr>
<td align="left" class="style2">
<asp:Label ID="lblfromdate" runat="server" Text="From Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" TargetControlID ="txtfromdate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator10" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtfromdate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="lbltodate" runat="server" Text="To Date"></asp:Label>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel11" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodate" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender3" TargetControlID ="txttodate"
Format="dd/MM/yyyy" runat="server">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="RequiredFieldValidator11" runat="server"
ErrorMessage="RequiredFieldValidator"
ControlToValidate="txttodate" ForeColor="Red">*</asp:RequiredFieldValidator>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel14" runat="server">
<ContentTemplate>
<asp:Label ID="lbldept" runat="server" Text="From Department" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel12" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txtfromdept" ClientIDMode="Static" runat="server"
TextMode="SingleLine" ></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:UpdatePanel ID="UpdatePanel15" runat="server"><ContentTemplate>
<asp:Label ID="lbltodept" runat="server" Text="To Deprtment" ></asp:Label>
</ContentTemplate></asp:UpdatePanel>
</td>
<td align="left">
<asp:UpdatePanel ID="UpdatePanel13" runat="server">
<ContentTemplate>
<div class="input-prepend" title="Select Date" data-rel="tooltip">
<asp:TextBox ID="txttodept" ClientIDMode="Static" runat="server"
TextMode="SingleLine"></asp:TextBox>
</ContentTemplate></asp:UpdatePanel>
</td>
</tr>
</asp:Panel>
In this case, it looks like your dropdownlist is doing a partial postback within updatepanel4 but Panel1 is not in an updatepanel so it can't be updated in a partial postback. Either remove all the updatePanels or place Panel1 in an update panel.
You need to place your panel inside the update panel for it to work. Controls outside update panel cannot work for events of controls inside the update panel.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate >
<div class="input-prepend" title="Select Machine ID" data-rel="tooltip">
<asp:DropDownList ID="ddmode" runat="server" AutoPostBack="True"
onselectedindexchanged="ddmode_SelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator9" runat="server"
ErrorMessage="RequiredFieldValidator" ControlToValidate="ddmode" ForeColor="Red">*
</asp:RequiredFieldValidator>
<asp:Panel ID="Panel1" runat="server">
....
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I am trying to hide and show text boxes by radio button using jquery. I can show and hide text boxes but the error is I have a drop-down list. When I select drop-down value the page getting refreshed. After page refresh I am unable to do hiding and showing of text boxes. I have update panel for ajax. Why I am unable to hide and show text boxes after page refresh? Here is my source code. Please help me.
<%# Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="ExperienceADD.aspx.cs" Inherits="Manjilas.WebForm31"%>
<%# Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<head>
<script src="Scripts2/jquery-1.7-vsdoc.js"></script>
<script src="Scripts2/jquery-1.7.js"></script>
<script src="Scripts2/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[name="type"]').on('click', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').Show();
$('#txtfrom').Show();
$('#txtto').Show();
} else {
$('#txtcomp').hide();
$('#txtcomp').hide();
$('#txtfrom').hide();
$('#txtto').hide();
}
});
});
</script>
</head>
<div class="container-fluid">
<div class="row-fluid">
<div class="well span5 center login-box">
<div class="alert alert-info">
<b><font size="4">ADD EXPERIENCE DETAILS</font></b>
</div>
<form id="form1" runat="server">
<asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
<div>
<ajaxToolkit:ToolkitScriptManager runat="server">
</ajaxToolkit:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel>
<fieldset>
<table class="ui-accordion">
<tr>
<td align="left" class="style2">
MachID</td>
<td align="left">
<%-- <div class="input-prepend" title="Select Country Name">--%>
<asp:DropDownList ID="ddid" runat="server" AutoPostBack="True"
onselectedindexchanged="ddid_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="Empcode" runat="server" Text="EmpCode"></asp:Label>
<td align="left">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="style2">
</td>
<td align="left">
<input type="radio" name="type" value="Fresher" />Fresher
<input type="radio" name="type" value="Experienced" />Experienced
</td>
</tr>
<tr>
<td align="left" class="style2">
Company</td>
<td align="left">
<div class="input-prepend" title="Autogenerated District ID" data-rel="tooltip">
<asp:TextBox ID="txtcomp" runat="server" TextMode="SingleLine"></asp:TextBox>
</td>
</tr>
<tr>
<td align="left" class="style2">
From Date</td>
<td align="left">
<div class="input-prepend" title="Enter District Name" data-rel="tooltip">
<asp:TextBox ID="txtfrom" runat="server" TextMode="SingleLine"></asp:TextBox>
<ajax:CalendarExtender ID="Calendarextender1" TargetControlID ="txtfrom" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td align="left" class="style2">
To Date</td>
<td align="left">
<div class="input-prepend" title="Enter District Name" data-rel="tooltip">
<asp:TextBox ID="txtto" runat="server" TextMode="SingleLine"></asp:TextBox>
<ajax:CalendarExtender ID="Calendarextender2" TargetControlID ="txtto" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td align="left">
<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add"
Height="36px" Width="74px" onclick="Button1_Click" />
<asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel"
Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" />
</td>
</tr>
<tr>
<td class="style2">
</td>
<td align="left">
<asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</form>
</div><!--/span-->
</div><!--/row-->
</div>
</div>
</asp:Content>
It's because you're using an UpdatePanel, it will refresh everything inside it's <ContentTemplate>, which in your case has input[name="type"] inside it.
Because it's refreshed, the on('click', function() { isn't binding the current radiobutton with the name="type" anymore, thus make the click never triggered after you select one item inside the dropdown, what you need is to wrap the UpdatePanel only for things that you want to be refreshed or changed only, like this for your case:
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<tr>
<td align="left" class="style2">
MachID
</td>
<td align="left">
<asp:DropDownList ID="ddid" runat="server" AutoPostBack="True"
onselectedindexchanged="ddid_SelectedIndexChanged">
</asp:DropDownList>
</td>
</tr>
<tr>
<td align="left" class="style2">
<asp:Label ID="Empcode" runat="server" Text="EmpCode"></asp:Label>
</td>
<td align="left">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Other Way
Use the jQuery on click selector, you just need to change
$('input[name="type"]').on('click', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').show();
$('#txtfrom').show();
$('#txtto').show();
}
too
$('.ui-accordion').on('click', 'input[name="type"]', function () {
if ($(this).val() == 'Experienced') {
$('#txtcomp').show();
$('#txtfrom').show();
$('#txtto').show();
}
The show function is k senstive. Try this:
$('#txtcomp,#txtfrom,#txtto').show();
I have the following three dropdownlist and a button which gives a result based on the selected criterias:
<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br />
<br /><br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static">
</asp:DropDownList>
<br /><br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<asp:Button ID="btnGoAll" Text="Search All" OnClick="btnGoAll_Click" runat="server" ClientIDMode="Static" />
The first two dropdownlist populates using code-behind function.
How can I allow the user to select all three options and hit the search button to display the result without refreshing the page?
I tried something like this:
<div style="width: 390px; margin: 0 auto;">
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DropDownList AutoPostBack="True" ID="slcLocation" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br /><br />
<asp:DropDownList AutoPostBack="True" ID="slcSpecialty" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br /><br />
<asp:DropDownList AutoPostBack="True" ID="slcGender" runat="server" ClientIDMode="Static" style="width: 365px;" class="default" AppendDataBoundItems="true">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcLocation" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcSpecialty" />
</Triggers>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="slcGender" />
</Triggers>
</asp:UpdatePanel>
</div>
<br /><br />
<div style="width: 390px; margin: 0 auto;">
<asp:HyperLink class="loginButton" style="padding: 10px; float: right;" runat="server" ID="aSearchSubmit" ClientIDMode="Static" OnClick="btnGoAll_Click" Text="Search" />
</div>
I update my Repeater with the data retrieved from the search:
<div style="width: 100%;">
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<table border="0" ID="tblInfo" style="background: #43A79A; width: 100%;" ClientIDMode="Static">
<tr>
<td>Physician Name</td>
<td>Image</td>
<td>Gender</td>
<td>Office1</td>
<td>Office2</td>
<td>Office3</td>
<td>Office4</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Physician Name").ToString() %></td>
<td><img src="www.site.com/<%# Eval("Image").ToString() %>" /></td>
<td><%# Eval("Gender").ToString() %></td>
<td><%# Eval("Office1").ToString() %></td>
<td><%# Eval("Office2").ToString() %></td>
<td><%# Eval("Office3").ToString() %></td>
<td><%# Eval("Office4").ToString() %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
When I click on the button, nothing happens.
How can I resolve the issue?
I think what do you want is this.
You need set how updatePanel´s trigger the button.
The part of page what do you want update need to be inside the updatepanel.
The javascript will catch DropDownList changes, and after all three DropDownList were changed the postback will be raised like if you was clicked in button
aspx
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
var slcLocationSelect = false;
var slcSpecialtySelect = false;
var slcGenderSelect = false;
$(document).ready(function () {
$("#<%=slcLocation.ClientID %>").change(function () { changeDropDown(this) });
$("#<%=slcSpecialty.ClientID %>").change(function () { changeDropDown(this) });
$("#<%=slcGender.ClientID %>").change(function () { changeDropDown(this) });
});
function changeDropDown(sender) {
if ($(event.target).attr('id') == $("#<%=slcLocation.ClientID %>").attr('id')) {
slcLocationSelect = true;
}
if ($(event.target).attr('id') == $("#<%=slcSpecialty.ClientID %>").attr('id')) {
slcSpecialtySelect = true;
}
if ($(event.target).attr('id') == $("#<%=slcGender.ClientID %>").attr('id')) {
slcGenderSelect = true;
}
if (slcLocationSelect && slcSpecialtySelect && slcGenderSelect) {
slcLocationSelect = false;
slcSpecialtySelect = false;
slcGenderSelect = false;
__doPostBack("<%=LinkButton1.ClientID %>", "");
}
}
</script>
<div style="width: 390px; margin: 0 auto;">
<asp:DropDownList ID="slcLocation" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="slcSpecialty" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
</asp:DropDownList>
<br />
<br />
<asp:DropDownList ID="slcGender" runat="server" ClientIDMode="Static" Style="width: 365px;"
class="default" AppendDataBoundItems="true">
<asp:ListItem Text="Any Gender" Value="" Selected="True" />
<asp:ListItem Text="Male" Value="1" />
<asp:ListItem Text="Female" Value="2" />
</asp:DropDownList>
<br />
<br />
<div style="width: 390px; margin: 0 auto;">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">Find</asp:LinkButton>
</div>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<div style="width: 100%;">
<asp:Repeater runat="server" ID="rptContent">
<HeaderTemplate>
<table border="0" id="tblInfo" style="background: #43A79A; width: 100%;" clientidmode="Static">
<tr>
<td>
Physician Name
</td>
<td>
Image
</td>
<td>
Gender
</td>
<td>
Office1
</td>
<td>
Office2
</td>
<td>
Office3
</td>
<td>
Office4
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("Physician Name").ToString() %>
</td>
<td>
<img src="www.site.com/<%# Eval("Image").ToString() %>" />
</td>
<td>
<%# Eval("Gender").ToString() %>
</td>
<td>
<%# Eval("Office1").ToString() %>
</td>
<td>
<%# Eval("Office2").ToString() %>
</td>
<td>
<%# Eval("Office3").ToString() %>
</td>
<td>
<%# Eval("Office4").ToString() %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="LinkButton1" />
</Triggers>
</asp:UpdatePanel>
</div>
cs
protected void LinkButton1_Click(object sender, EventArgs e)
{
Label1.Text = slcGender.SelectedItem.ToString();
}
I asked this question last night but it was not very well written so I am going to ask it again. I am creating a simple calculator using ASP.NET and c# as my code behind. I am currently just trying to test and make sure that my code behind is getting the value typed entered into the textbox by the user. I put in a if statement that assigns the textbox a value of mehhh if the string it gets passed it empty. My text box displays mehhh so I knoe it is getting an empty string but i am not sure why? here is a link to the site... http://scort323.csweb.kutztown.edu/Calc.aspx Below is my code for the code behind part of my page:
public partial class Assign2_Calc : System.Web.UI.Page
{
protected void ButtonEqual_Click(object sender, EventArgs e)
{
string inputStr = inputBox.Text;
if (inputStr == string.Empty)
{
inputBox.Text = "mehhhhhh";
}
else
{
inputBox.Text = inputStr; //result.ToString();
}
}
}
below is my .aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Calc.aspx.cs"
Inherits="Assign2_Calc" Debug="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="CalculatorStyle.css" rel="stylesheet" type="text/css" />
<script>
var maxInputLength = 20;
function checkButtonClick(clickedValue) {
var buttonValue = clickedValue;
var inputStr = document.getElementById('inputBox').value;
if (buttonValue == '<--') {
if (inputStr.length >= 1) {
document.getElementById('inputBox').value = inputStr.substring(0, inputStr.length - 1);
}
}
else if (buttonValue == 'C') {
document.getElementById('inputBox').value = "";
}
else {
if (inputStr.length < maxInputLength) {
document.getElementById('inputBox').value = inputStr + buttonValue;
}
else {
//document.getElementById('msg').innerHTML = "Maxmum length is " + maxInputLength;
}
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="main" class="main">
<div id="content" class="content">
<h3 id="h3">Simple Calculator</h3>
<div id="calculatorDiv">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<asp:TextBox runat="server" CssClass="inputBox" ReadOnly="true" ViewStateMode="Enabled" ID="inputBox"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<br />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum7" runat="server" Text="7" CssClass="CalcButtons" OnClientClick="return checkButtonClick(7)" />
</td>
<td>
<asp:Button ID="ButtonNum8" runat="server" Text="8" CssClass="CalcButtons" OnClientClick="return checkButtonClick(8)" />
</td>
<td>
<asp:Button ID="ButtonNum9" runat="server" Text="9" CssClass="CalcButtons" OnClientClick="return checkButtonClick(9)" />
</td>
<td>
<asp:Button ID="ButtonDivide" runat="server" Text="/" CssClass="CalcButtons" OnClientClick="return checkButtonClick('/')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonNum4" runat="server" Text="4" CssClass="CalcButtons" OnClientClick="return checkButtonClick(4)" />
</td>
<td>
<asp:Button ID="ButtonNum5" runat="server" Text="5" CssClass="CalcButtons" OnClientClick="return checkButtonClick(5)" />
</td>
<td>
<asp:Button ID="ButtonNum6" runat="server" Text="6" CssClass="CalcButtons" OnClientClick="return checkButtonClick(6)" />
</td>
<td>
<asp:Button ID="ButtonMultiply" runat="server" Text="*" CssClass="CalcButtons" OnClientClick="return checkButtonClick('*')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="1" CssClass="CalcButtons" OnClientClick="return checkButtonClick(1)" />
</td>
<td>
<asp:Button ID="Button2" runat="server" Text="2" CssClass="CalcButtons" OnClientClick="return checkButtonClick(2)" />
</td>
<td>
<asp:Button ID="Button3" runat="server" Text="3" CssClass="CalcButtons" OnClientClick="return checkButtonClick(3)" />
</td>
<td>
<asp:Button ID="ButtonSubtract" runat="server" Text="-" CssClass="CalcButtons" OnClientClick="return checkButtonClick('-')" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="ButtonDackspace" runat="server" Text="<--" CssClass="CalcButtons" OnClientClick="return checkButtonClick('<--')" />
</td>
<td>
<asp:Button ID="ButtonNum0" runat="server" Text="0" CssClass="CalcButtons" OnClientClick="return checkButtonClick(0)" />
</td>
<td>
<asp:Button ID="ButtonClear" runat="server" Text="C" CssClass="CalcButtons" OnClientClick="return checkButtonClick('C')" />
</td>
<td>
<asp:Button ID="ButtonAdd" runat="server" Text="+" CssClass="CalcButtons" OnClientClick="return checkButtonClick('+')" />
</td>
</tr>
<tr>
<td colspan="4">
<asp:Button ID="ButtonEqual" runat="server" Text="=" CssClass="CalcButtonEqual" OnClick="ButtonEqual_Click" />
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Looking at the source of your web page I found that you have disabled your textbox. If a control is disabled it cannot be edited and its content is excluded when the form is submitted. So instead of disabling (remove disable attribute completely) your textbox set it to readonly (readonly = 'true').
MSDN doc on ReadOnly:
The Text value of a TextBox control with the ReadOnly property set to true is sent to the server when a postback occurs, but the server does no processing for a read-only text box. This prevents a malicious user from changing a Text value that is read-only. The value of the Text property is preserved in the view state between postbacks unless modified by server-side code.
You are "manipulating" the value in client script (not in server code - assuming above is all the code). The original value of the TextBox is preserved (empty).
If you test by removing the ReadOnly attribute (or set it to False), your code will work and you will see the effect of the setting...
Hth....
Update:
..how would I need to go about making it so the user cant use the keyboard to enter anything? making it so they must use the buttons
Unless you have/had a reason to use a server-side control for that input field, a standard HTML Input field with readonly should work.
You will then obtain it's value from the standard POST in the Request (at the end of the day, WebForms is still an HTTP POST), instead of ASP.Net controls.
Trivial example:
Instead of server-control:
<asp:TextBox runat="server" CssClass="inputBox" ReadOnly="true" ViewStateMode="Enabled" ID="inputBox"></asp:TextBox>
Use plain html input field:
<input id="inputBox" name="inputBox" readonly type="text" />
The value of the field (html_readonly) can be obtained in the POST Request:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string _html = Request["inputBox"]; //here it is
//do whatever...
}
}
Hth...
I have a form with 4 dropdownlists whose autopostback property is set to true and each dropdown list gets populated based on the selection of the previous dropdownlist.
Ex. ddlCourseType gets populated after a selection is made in ddlCourseLevel and so on.
I need to validate every textbox and dropdownlist but am having a hard time with the dropdownlists because of its autopostback property.
It will be great if somebody could help me with the best way to validate this form or any tips or advice would be awesome. Thanks a lot. Below is the aspx file that has the jquery function for validating dropdowns and textboxes.
Admin_Course_Edit.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="/JQuery_Plugins/timepicker/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<link href="../JQuery_Plugins/timepicker/css/ui-lightness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#tbStartDate').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BreadCrumbs" runat="server">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="rightNavigation" runat="server">
<script type="text/javascript">
$(document).ready(function () {
//Function to Validate DatePicker
$.validator.addMethod('isDate', function (value, element) {
var isDate = false;
try {
$.datepicker.parseDate('mm/dd/yy', value);
isDate = true;
}
catch (e) {
}
return isDate;
});
//Function to Validate DropDown Lists
$.validator.addMethod('selectNone',
function (value, element) {
return this.optional(element) ||
(value.indexOf("") == -1); //Leave it blank or enter the exact text in index 0
}, "Please Select an Option");
$("#form1").validate({
// $("#tbStartDate").rules("add", {isDate: true} messages: {isDate: "Date to Validate is invalid."}
rules: {
'<%=ddlCourseLevel.UniqueID %>': { selectNone: true },
'<%=tbStartDate.UniqueID %>': { required: true, isDate: true },
'<%=tbCourseName.UniqueID %>': { required: true, maxlength: 25 },
'<%=tbPointScale.UniqueID %>': { required: true, digits: true },
'<%=tbDescription.UniqueID %>': { maxlength: 50 }
},
messages: { '<%=tbStartDate.UniqueID %>': { isDate: "Please enter a Valid Date"} }
});
$("#imgBtn_A_save").click(function (evt) {
// Validate the form and retain the result.
var isValid = $("#form1").valid();
// If the form didn't validate, prevent the
// form submission.
if (!isValid)
evt.preventDefault();
});
$("#imgBtn_A_cancel").click(function () {
$("#form1").validate().cancelSubmit = true;
});
});
function HideLabel() {
document.getElementById('<%= lblMessage.ClientID %>').style.display = "none";
}
setTimeout("HideLabel();", 2000);
</script>
<div class="Admin_rightNavtop">
<div class="title">
<asp:Label ID="lblTitle" Text="Edit Course" runat="server" class="titleLbl" />
</div>
<p align="center">
<asp:Label ID="lblMessage" runat="server" Style="color: Red" /></p>
<!-- START TABLE ADD FORM-->
<table style="margin-left: 70px">
<tr>
<td>
<asp:Label ID="LblCourseLevel" Text="* Course Level :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseLevel" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseLevel_SelectedIndexChanged"
AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourseLevel_Databound"
runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="CourseType" Text="* Course Type :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseType" runat="server" class="ddlSize_large_addEdit"
OnDataBound="helperCourseType_Databound" EnableViewState="true" OnSelectedIndexChanged="ddlCourseType_SelectedIndexChanged"
AutoPostBack="true" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCourseName" Text="* Course Name :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlCourseName" class="ddlSize_large_addEdit" OnSelectedIndexChanged="ddlCourseName_SelectedIndexChanged"
AutoPostBack="true" EnableViewState="true" OnDataBound="helperCourse_Databound"
runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCourseName2" Text="* New Name :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbCourseName" class="tbSize_large_addEdit" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblStartDate" Text="* Start Date :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbStartDate" runat="server" class="tbSize_large_addEdit" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblGraded" Text="* Grade Type :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:DropDownList ID="ddlGradeType" runat="server" class="ddlSize_large_addEdit"
OnSelectedIndexChanged="ddlGradeType_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>---Select Grade Type---</asp:ListItem>
<asp:ListItem Value="1">Point Scale</asp:ListItem>
<asp:ListItem Value="2">Pass/Fail</asp:ListItem>
<asp:ListItem Value="3">Attendance</asp:ListItem>
<asp:ListItem Value="4">Not Graded</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPointScale" Text="* Point Scale :" runat="server" class="lblSize_largeGreen"
Visible="false" />
</td>
<td>
<asp:TextBox ID="tbPointScale" runat="server" class="tbSize_large_addEdit" Visible="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDescription" Text="Description :" runat="server" class="lblSize_largeGreen" />
</td>
<td>
<asp:TextBox ID="tbDescription" runat="server" class="tbSize_large_addEdit" />
</td>
</tr>
</table>
<!-- End of Table ADD COURSE-->
</div>
<!-- End of rightNavTop-->
<center>
<div class="Admin_action">
<asp:ImageButton ID="imgBtn_A_save" ImageUrl="../Images/Save.png" OnClick="save_Click"
runat="server" class="Admin_action_imgSize_small" />
<asp:ImageButton ID="imgBtn_A_cancel" ImageUrl="../Images/Cancel.png" runat="server"
class="Admin_action_imgSize_small" CausesValidation="false" OnClick="cancel_Click" />
</div>
</center>
<!-- End selection buttons-->
</asp:Content>
You can add an onchange event to the control and return false if you think it's invalid to cancel the postback.
Personally, I'd want to do the whole shebang using jQuery and AJAX and cut out the nasty auto postback.
The validations for the dependent DDLs will also have to check their "parent" DDL.
DDL 1 - Must be selected
DDL 2 - If DDL 1 is selected must be selected.
DDL 3 - If DDL 2 is selected must be selected.
DDL 4 - If DDL 4 is selected must be selected.
Sorry I don't have time to write up the code, but hopefully this will be helpful.