Disabling a TextBox web control using javascript (client-side)

I'm using two textboxes and one button for a C# .NET web app


code:
<form id="Form1" method="post" runat="server">
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 128px" runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 168px" runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 248px; POSITION: absolute; TOP: 216px" runat="server" Text="Button"></asp:Button>
<asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 472px; POSITION: absolute; TOP: 240px" runat="server">Label</asp:Label>
</form>
When a user enters text into TextBox1, I would like TextBox2 to be disable so the user can't enter text into it
after user enters text into TextBox1 and then directly clicks the button the text in TextBox1 is displayed in a label

and vice versa for entering text into TextBox2
I'm having a tough time finding a solution for this.
Does anyone know how to do this either in c# code behind or javascript?
bebop
0
bebop1
3/27/2004 2:53:51 AM
asp.net.client-side 24353 articles. 2 followers. Follow

24 Replies
1718 Views

Similar Articles

[PageSpeed] 20
Get it on Google Play
Get it on Apple App Store

by definition this is not something you con do in code-behind. well, that's a lie, HOWEVER the point is why would you refresh the entire page to do so?


no, we're on to javascript, right? so is this public website or an intra/extranet?
RTFM - straight talk for web developers. Unmoderated, uncensored, occasionally unreadable

Jason Brown - MVP, IIS
0
Atrax
3/27/2004 9:53:21 AM

This is a public website
I'm not refreshing the page at all.

I'm not using autopostback
I'm using two textboxes and one button for c# .NET app
code:
<form id="Form1" method="post" runat="server">
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 128px" runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 168px" runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 248px; POSITION: absolute; TOP: 216px" runat="server" Text="Button"></asp:Button>
<asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 472px; POSITION: absolute; TOP: 240px" runat="server">Label</asp:Label>
</form>
When user enters text into TextBox1, I would like TextBox2 to be disabled so the user can't enter text into it
then when user clicks the button the text in TextBox1 is displayed in a label

and vice versa for entering text into TextBox2
bebop
0
bebop1
3/27/2004 3:01:21 PM
Not hard... just write a javascript function that handles the keyup event of the textboxes.  If the textbox has characters then the function should disable and cleanout the other textbox. If the textbox receiving the keypress has no content the enable the other textbox.  In the server-side code for the button click just use the textbox that has content.
0
billupton
3/27/2004 4:23:50 PM
The problem is that I'm not using HTML INPUT Textfield tags which has the keypress event

I'm using two textbox web controls and one button for a C# .NET web app
code:
<form id="Form1" method="post" runat="server">
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 248px; POSITION: absolute; TOP: 128px" runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 102; LEFT: 248px; POSITION: absolute; TOP: 168px" runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 248px; POSITION: absolute; TOP: 216px" runat="server" Text="Button"></asp:Button>
<asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 472px; POSITION: absolute; TOP: 240px" runat="server">Label</asp:Label>
</form>
When user enters text into TextBox1, I would like TextBox2 to be disabled so the user can't enter text into it
then when user clicks the button the text in TextBox1 is displayed in a label

and vice versa for entering text into TextBox2

bebop
0
bebop1
3/27/2004 5:25:06 PM
All those controls end up as html in the browser. You're just not sure how to add the javascript?  In server side code you can add the script like this:

TextBox1.Attributes.Add("onkeyup","handleKeyUp(this)");
...and then somewhere you'd need to add the handler JS to the page as well. Write the client-side JS and put it in a variable (like a string builder obj) and then call RegisterClientScriptBlock to add it to the page:

//sb is tring builer obj with script txt
if(!Page.IsClientScriptBlockRegistered("tbScripts"))
Page.RegisterClientScriptBlock("tbScripts", sb.ToString());

0
billupton
3/27/2004 6:47:08 PM
I understand how to call a javascript function in c# code behind.

This is the code I'm using:
<form id="Form1" method="post" runat="server">
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 48px; POSITION: absolute; TOP: 24px" runat="server"></asp:TextBox>
<asp:TextBox id="TextBox2" style="Z-INDEX: 102; LEFT: 48px; POSITION: absolute; TOP: 64px" runat="server"></asp:TextBox>
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 48px; POSITION: absolute; TOP: 112px" runat="server"
Text="Button"></asp:Button>
<asp:Label id="Label1" style="Z-INDEX: 104; LEFT: 232px; POSITION: absolute; TOP: 24px" runat="server"></asp:Label>
<asp:Label id="Label2" style="Z-INDEX: 105; LEFT: 232px; POSITION: absolute; TOP: 72px" runat="server"></asp:Label>
</form>
<script language="javascript">
function disable1()
{
document.getElementById('TextBox2').disabled = true;
}

function disable2()
{
document.getElementById('TextBox1').disabled = true;
}
</script>
***********c# code behind:
private void Page_Load(object sender, System.EventArgs e)
{

TextBox1.Attributes.Add("onclick","disable1()");

TextBox2.Attributes.Add("onclick","disable2()");


}
private void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = TextBox1.Text;
Label2.Text = TextBox2.Text;
}
What I'm having trouble with is the following:
If user clicks textbox1 and enters text, TextBox2 is disabled so the user can't enter text into TextBox2 but what if the user changes their mind and wants to enter text into TextBox2 web control
How is the user supposed to enter text in TextBox2 if the TextBox2 is disabled or can't insert text into it.
Is there an alternative where user can switch from textbox to textbox and whichever is selected the other textbox is disabled or can't allow user input.
Can this be done?

bebop
0
bebop1
3/27/2004 10:16:42 PM
How about using onchange and, if the input has content, disable the other input.  Otherwise, enable the other input.  This should allow people to change their minds...
0
stiletto
3/28/2004 2:26:09 AM
Right, try this:

#### In your web page ####:

<script language="javascript">
function handleKeyUp( tBox ) {
var frm=document.forms[0];

if (tBox.id=="TextBox1")
var tOtherBox=document.getElementById("TextBox2");
else
var tOtherBox=document.getElementById("TextBox1");

if (tBox.value=='') {
tOtherBox.disabled=false;
tOtherBox.style.backgroundColor="";
}
else {
tOtherBox.value='';
tOtherBox.disabled="disabled";
tOtherBox.style.backgroundColor="#eeeeee";
}
}
</script>

#### and then in code-behind ####
private void Page_Load(object sender, System.EventArgs e) 

{
TextBox1.Attributes.Add("onkeyup","handleKeyUp(this);");
TextBox2.Attributes.Add("onkeyup","handleKeyUp(this);");
}
0
billupton
3/28/2004 2:26:56 AM
....and Just to be complete here is the button click event code:

private void Button1_Click(object sender, System.EventArgs e)
{
Label1.Text = TextBox1.Text + TextBox2.Text;
}
0
billupton
3/28/2004 2:32:06 AM
billupton

You have done it.
Thank you.

I had a page where a user has the option of creating a new record (TextBox1) or searching for a pre-existing record (TextBox2).
the thought I was pondering was - what if the user by mistake had entered text in both textboxes and clicked the submit button. I didn't want that.
Problem solved.
Thanks again.
bebop
0
bebop1
3/28/2004 3:46:34 PM
I want to also thank everyone who participated on this dilemma I was having.

Thanks for your input.
bebop
0
bebop1
3/28/2004 3:47:48 PM
Where you have the following:

TextBox1.Attributes.Add("onkeyup","handleKeyUp(this);");
TextBox2.Attributes.Add("onkeyup","handleKeyUp(this);");

I didn't know you could get the 'onkeyup' event in c# code behind.
I kept looking for these event handlers ( 'onchange', 'onkeypress', 'onkeyup','onblur', etc.) under the html code.
Trouble was that I couldn't find them because I was using .NET web controls
<asp:TextBox id="TextBox1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 32px" runat="server"></asp:TextBox>
These web controls when trying to add the event handlers mentioned above were not there.
Instead the event handlers available (at least visible) were
OnDataBinding, OnDisposed, OnInit, OnLoad, OnPreRender, OnTextChanged, and OnUnLoad
Final question:
billupton, does this mean that I can call onchange, onkeypress, onblur events in c# code behind as well?

bebop
0
bebop1
3/28/2004 3:56:00 PM
To answer your question, they are two different environments so you generally cannot mix them.  You need to use DOM, browser, dhtml events on the client-side and use "control" events on the server-side. 

The difference between server-side and client-side coding is not always apparent and, judging by these forums, it is often misunderstood.
Just remember with all these fancy types of controls available to us, they all get coverted to simple html for the browser to use. The browser doesn't know a thing about webcontrols or its events. To see for yourself create a page with all the controls on it. Then in the browser RtClick and View Source. All you'll see is plain html.
HTH
0
billupton
3/28/2004 4:39:59 PM
try this.

In code behind
textbox1.attributes.add("onkeyup","return funDisable1();")
textbox2.attributes.add("onkeyup","return funDisable2();")
in javascript try this
function funDisable1()
{
window.document.getElemtById("textbox2").enabled=false;
return false;
}
function funDisable2()
{
window.document.getElemtById("textbox1").enabled=false;
return false;
}
Umesh
0
umesh
3/29/2004 4:26:38 AM
The code didn't disable the TextBox2 when a user entered text into TextBox1 and vice versa.

The solution is already posted.
Thanks.
bebop
0
bebop1
3/29/2004 1:11:51 PM
This was very educational, thank you guys! :)

Answered about 5 of my questions about tying javascript into .net.
0
fetlock
3/29/2004 4:20:46 PM
i was looking to do this same thing but to a button

when you click a button i would like it to dissable until the page posts back
i think this is how to start it but i am not sure
(plus i am using vb not c#)
btn.Attributes.Add("OnMouseUp", "handleKeyUp(this);")
i just cant figure out the javascript needed to perform this operation
0
blackdisk
6/25/2004 4:02:50 PM
also i dont want to just dissable it 

i dont know if i said this in the last post.
but i would like it to be dissabled until the page posts back
0
blackdisk
6/25/2004 4:27:23 PM
Try this:

http://www.asp.net/Forums/ShowPost.aspx?tabindex=1&PostID=591495
0
stiletto
6/25/2004 5:29:07 PM
I guess there was some way to inject the actual JavaScript in the Page, something like

What was it ?
0
IndianGuru
5/30/2005 10:10:06 AM
Either add the code directly or use registerstartupscript 

Eric
Pascarello.com | Twitter epascarello | LinkedIn
0
A1ien51
5/30/2005 1:30:47 PM
 A1ien51 wrote:
Either add the code directly or use registerstartupscript

Eric

hmmm, you mean something like this ?
===========================================
Sub Page_Load(........)
      registerstartupscript ("myscript.js")
End Sub
===========================================

Can you please give a working Example ?
0
IndianGuru
5/30/2005 1:54:58 PM
registerstartupscript ("startup","<script type='text/javascript' src='myscript.js'></script>")
Pascarello.com | Twitter epascarello | LinkedIn
0
A1ien51
5/30/2005 1:59:11 PM
Reply:

Web resources about - Disabling a TextBox web control using javascript (client-side) - asp.net.client-side

Client-side - Wikipedia, the free encyclopedia
Client-side refers to operations that are performed by the client in a client–server relationship in a computer network . Typically, a client ...

Senior Search Manager - Client Side!!
... strategy insight for senior IT management - resources to understand and leverage information technology. Senior Search Manager - Client Side ...

Account Manager - Client Side - Previous Agency Experience Welcome!!
Computerworld Australia is the leading source of technology news, analysis and tools for IT decision makers, managers and professionals.

Media Sales Executive - Client Side!!
Technology news and reviews for business and home.

PPC Paid Search Manager - CLIENT SIDE
Defining Technology for Australia's IT Leaders. PPC Paid Search Manager - SEM - **CLIENT SIDE** Sydney CBD Location Client side!! SEM/PPC/Paid ...

How Basecamp Next got to be so damn fast without using much client-side UI
When we started working on Basecamp Next last year, we had much internal debate about whether we should evolve the existing code base or rewrite ...

Seven Tips for Pitching From the Client's Side of the Table
I had a chance to sit on the other side of the pitch table. Here is what I learned.

Client-side coding: How to prevent malicious use?
Applications that run on a user-controlled device cannot be perfectly protected.

The client side
... regarding the professionals you seek to assist. Even better if you possess that understanding yourself, having worked on the client side. I'm ...

Ecommerce traffic being hijacked by client side malware
According to new research 15 to 30 percent of eCommerce site visitors are infected with Client Side Injected Malware (CSIM) that causes them ...

Resources last updated: 2/20/2016 3:25:42 PM