Solved

Textbox text change Event in Javascript

Posted on 2011-09-28
5
246 Views
Last Modified: 2012-05-12
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
Comment
Question by:gladstonesheeba
  • 2
  • 2
5 Comments
 
LVL 12

Expert Comment

by:jagssidurala
ID: 36718653
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
 
LVL 12

Expert Comment

by:jagssidurala
ID: 36718666
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36718697
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
 
LVL 82

Expert Comment

by:leakim971
ID: 36718714
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now