ASP.NET

How to conditionally Enable/Disable Button control using JavaScript ? RSS

23 replies

Last post Sep 01, 2011 11:16 PM by anil123455

‹ Previous Thread|Next Thread ›

- Reply
abhijeet.dev...

Member

1 Points

22 Posts

How to conditionally Enable/Disable Button control using JavaScript ?

Sep 04, 2007 04:05 AM|LINK

hi all...

i have a Button control & a TextBox control on my web page. The Button control is initially Disabled.

I want that while typing into TextBox, when the length of the contents of TextBox reaches to 12 (i.e. when i type 12th character), the Button Control should be Enabled & if the length again comes down to less than 12, the Button control should again be Disabled...

How can i do this using JavaScript...?? Does anyone know how to do this...??

Please help. It's urgent...

Thanx in advance to all posts !

javascript in asp.net

Sincerely,
- Abhijeet
- Reply
d4dennis@ins...

Star

9229 Points

1314 Posts

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 04, 2007 04:27 AM|LINK

Hi There,

Base on your requirement, below is the example:

Javascript:
<script language="javascript" type="text/javascript">

function SetButtonStatus(sender, target)
{
if ( sender.value.length >= 12 )
document.getElementById(target).disabled = false;

else
document.getElementById(target).disabled = true;
}

</script>

HTML:

<asp:TextBox ID="txtText" runat="server" onkeyup="SetButtonStatus(this, 'btnButton')"></asp:TextBox>

<asp:Button ID="btnButton" runat="server" Text="Button" Enabled="false" />

auto enable/disable button

DC517
Don't forget to click "Mark as Answer" on the post that helped you.
This credits that member, earns you a point and marks your thread as Resolved.
- Marked as answer by abhijeet.devkute on Sep 04, 2007 10:31 AM
- Reply
abhijeet.dev...

Member

1 Points

22 Posts

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 04, 2007 10:35 AM|LINK

hi there...

That helped me...! [:D]

Thanx a lot dude... ! [Yes]

bye...

Sincerely,
- Abhijeet
- Reply
abhijeet.dev...

Member

1 Points

22 Posts

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 06, 2007 08:33 AM|LINK

hi there...

I have found an issue, that when i type in 12 characters in TextBox, the button is Enabled...but after that, when i click the button, the button is again Disabled when the page posts back (even if there are 12 characters existing in TextBox)...I want that the button should be Enabled even after the page is posted back...(if 12 characters exists there in)

can you please fix this problem...so that it would match my requirements exactly...??

thanks a lot in advance...

Sincerely,
- Abhijeet
- Reply
mattmeckes

Member

16 Points

3 Posts

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 06, 2007 10:18 AM|LINK

You could add a check on the status of the textbox to the body onLoad event. This will check if the text box has more than 12 characters after postback and enable the button if appropriate.

e.g.

HTML

<body onLoad="checkButtonStatus()">

Javascript

<script language="javascript" type="text/javascript">
        function checkButtonStatus{
            if (document.getElementById("txtID").value.length >=12)
                document.getElementById("btnID").disabled = false;
          else
                document.getElementById("btnID").disabled = true;
        }
</script>
- Reply
NC01

All-Star

82577 Points

15430 Posts

MVP

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 06, 2007 01:20 PM|LINK

This should work:

///////////////////
// aspx file
///////////////////

<script type="text/javascript">
function SetButtonStatus(sender, target)
{
if ( sender.value.length >= 12 )
{
  document.getElementById(target).disabled = false;
  document.getElementById('<%= buttonIsDisabled.ClientID %>').value = 'N';
}
else
{
  document.getElementById(target).disabled = true;
  document.getElementById('<%= buttonIsDisabled.ClientID %>').value = 'Y';
}

}
</script>

<form id="Form1" method="post" runat="server">
<asp:TextBox ID="TextBox1" runat="server" onkeyup="SetButtonStatus(this, 'Button1')"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" Enabled="false" />
<input type="hidden" id="buttonIsDisabled" name="buttonIsDisabled" value="Y" runat="server">
</form>

///////////////////
// aspx.cs file
///////////////////
private void Page_Load(object sender, System.EventArgs e)
{
if ( this.IsPostBack )
{
  Button1.Enabled = (buttonIsDisabled.Value == "Y") ? false : true;
}
}

NC...
- Edited by NC01 on Jun 30, 2008 12:02 PM
- Reply
Polarlinks

Member

5 Points

17 Posts

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 14, 2007 07:50 PM|LINK

Do you know if when the button is in a web user control how to reference it properly so the disabled = true works?

I get a null object error.
- Edited by Polarlinks on Sep 14, 2007 07:53 PM
- Edited by Polarlinks on Sep 14, 2007 07:55 PM
- Reply
Polarlinks

Member

5 Points

17 Posts

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Sep 14, 2007 07:59 PM|LINK

Ok the correct way to reference an object in a web control is

WebControl:Button1

in the find by element id.
- Reply
asl

Member

2 Points

1 Post

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Oct 25, 2007 08:50 AM|LINK

hi

thank you so much

it really works great
- Reply
Santha

Member

2 Points

1 Post

Re: How to conditionally Enable/Disable Button control using JavaScript ?

Dec 05, 2007 08:24 AM|LINK

Hi,

Its working fine[:)].

Thx a lot.