• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

Textbox text change Event in Javascript

Hi,
  I want this below textbox_texchanged event in Javascript. Am not sure how to do this in Javascript. Please help.

 protected void txtPtID_TextChanged(object sender, EventArgs e)
        {
            if (txtPtID.Text != "")
            {
                txtFirstName.Text = "";
                txtLastName.Text = "";
                txtDOB.Text = "";
                txtStateID.Text = "";
                txtFirstName.Enabled = false;
                txtFirstName.BackColor = System.Drawing.Color.LightGray;
                txtLastName.Enabled = false;
                txtLastName.BackColor = System.Drawing.Color.LightGray;
                txtDOB.Enabled = false;
                txtDOB.BackColor = System.Drawing.Color.LightGray;
                txtStateID.Enabled = false;
                txtStateID.BackColor = System.Drawing.Color.LightGray;
            }
            else
            {
                txtFirstName.Enabled = true;
                txtFirstName.BackColor = System.Drawing.Color.Empty;
                txtLastName.Enabled = true;
                txtLastName.BackColor = System.Drawing.Color.Empty;
                txtDOB.Enabled = true;
                txtDOB.BackColor = System.Drawing.Color.Empty;
                txtPtID.Enabled = true;
                txtPtID.BackColor = System.Drawing.Color.Empty;
                txtStateID.Enabled = true;
                txtStateID.BackColor = System.Drawing.Color.Empty;
            }
        }
0
gladstonesheeba
Asked:
gladstonesheeba
  • 2
  • 2
1 Solution
 
jagssiduralaCommented:
you need write onblur event for text box.

<html><head><title>(Type a title for your page here)</title>

<script type="text/javascript">
function change_case()
{
document.form1.type.value=document.form1.type.value.toLowerCase();
}
</script>

</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onLoad="form1.type.focus();">

<form name=form1 method=post action=''''>
<input type=text name=type value=''Enter USER ID'' onblur="change_case();">
<input type=submit value=Submit> </form>

</body>
</html>

Refer links

http://stackoverflow.com/questions/384820/adding-javascript-to-the-onblur-property-of-an-asp-net-text-box-control

http://en.allexperts.com/q/Javascript-1520/Textbox.htm
0
 
jagssiduralaCommented:
0
 
leakim971PluritechnicianCommented:
Use :
<script language="javascript" type="text/javascript">
	window.onload = function() {
		document.getElementById("<%= txtPtID.ClientID %>").onchange = function() {
			if( this.value != "" ) {
				document.getElementById("<%= txtFirstName.ClientID %>").value = "";
				document.getElementById("<%= txtLastName.ClientID %>").value = "";
				document.getElementById("<%= txtDOB.ClientID %>").value = "";
				document.getElementById("<%= txtStateID.ClientID %>").value = "";
				
				document.getElementById("<%= txtFirstName.ClientID %>").removeAttribute("disabled");
				document.getElementById("<%= txtLastName.ClientID %>").removeAttribute("disabled");
				document.getElementById("<%= txtDOB.ClientID %>").removeAttribute("disabled");
				document.getElementById("<%= txtStateID.ClientID %>").removeAttribute("disabled");
				
				document.getElementById("<%= txtFirstName.ClientID %>").style.backgroundColor = "LightGray";
				document.getElementById("<%= txtLastName.ClientID %>").style.backgroundColor = "LightGray";
				document.getElementById("<%= txtDOB.ClientID %>").style.backgroundColor = "LightGray";
				document.getElementById("<%= txtStateID.ClientID %>").style.backgroundColor = "LightGray";
			}
			else {
				document.getElementById("<%= txtFirstName.ClientID %>").disabled = true;
				document.getElementById("<%= txtLastName.ClientID %>").disabled = true;
				document.getElementById("<%= txtDOB.ClientID %>").disabled = true;
				document.getElementById("<%= txtStateID.ClientID %>").disabled = true;
				
				document.getElementById("<%= txtFirstName.ClientID %>").style.backgroundColor = "";
				document.getElementById("<%= txtLastName.ClientID %>").style.backgroundColor = "";
				document.getElementById("<%= txtDOB.ClientID %>").style.backgroundColor = "";
				document.getElementById("<%= txtStateID.ClientID %>").style.backgroundColor = "";
			}
		}
	}
</script>

Open in new window


Test page :
<%@ Page Title="Page d'accueil" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

<script language="javascript" type="text/javascript">
	window.onload = function() {
		document.getElementById("<%= txtPtID.ClientID %>").onchange = function() {
			if( this.value != "" ) {
				document.getElementById("<%= txtFirstName.ClientID %>").value = "";
				document.getElementById("<%= txtLastName.ClientID %>").value = "";
				document.getElementById("<%= txtDOB.ClientID %>").value = "";
				document.getElementById("<%= txtStateID.ClientID %>").value = "";
				
				document.getElementById("<%= txtFirstName.ClientID %>").removeAttribute("disabled");
				document.getElementById("<%= txtLastName.ClientID %>").removeAttribute("disabled");
				document.getElementById("<%= txtDOB.ClientID %>").removeAttribute("disabled");
				document.getElementById("<%= txtStateID.ClientID %>").removeAttribute("disabled");
				
				document.getElementById("<%= txtFirstName.ClientID %>").style.backgroundColor = "LightGray";
				document.getElementById("<%= txtLastName.ClientID %>").style.backgroundColor = "LightGray";
				document.getElementById("<%= txtDOB.ClientID %>").style.backgroundColor = "LightGray";
				document.getElementById("<%= txtStateID.ClientID %>").style.backgroundColor = "LightGray";
			}
			else {
				document.getElementById("<%= txtFirstName.ClientID %>").disabled = true;
				document.getElementById("<%= txtLastName.ClientID %>").disabled = true;
				document.getElementById("<%= txtDOB.ClientID %>").disabled = true;
				document.getElementById("<%= txtStateID.ClientID %>").disabled = true;
				
				document.getElementById("<%= txtFirstName.ClientID %>").style.backgroundColor = "";
				document.getElementById("<%= txtLastName.ClientID %>").style.backgroundColor = "";
				document.getElementById("<%= txtDOB.ClientID %>").style.backgroundColor = "";
				document.getElementById("<%= txtStateID.ClientID %>").style.backgroundColor = "";
			}
		}
	}
</script>

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:TextBox runat="server" ID="txtPtID" /> 
    <asp:TextBox runat="server" ID="txtFirstName" /> 
    <asp:TextBox runat="server" ID="txtLastName" /> 
    <asp:TextBox runat="server" ID="txtDOB" /> 
    <asp:TextBox runat="server" ID="txtStateID" /> 
</asp:Content>

Open in new window

0
 
leakim971PluritechnicianCommented:
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now