Enable and disable button using javascript and asp.net

Question

I am checking if user exists in database if exists I am showing message as "existed user" and then I need to disable the signup button if not I need to enable it.

I am unable to enable and disable the sign Up button.

Can anyone help me in this issue?

Here is my code:

 <script type="text/javascript">
     $(function () {
         $("#<% =btnavailable.ClientID %>").click(function () {
             if ($("#<% =txtUserName.ClientID %>").val() == "") {
                 $("#<% =txtUserName.ClientID %>").removeClass().addClass('notavailablecss').text('Required field cannot be blank').fadeIn("slow");

             } else {
                 $("#<% =txtUserName.ClientID %>").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
                 $.post("LoginHandler.ashx", { uname: $("#<% =txtUserName.ClientID %>").val() }, function (result) {
                     if (result == "1") {
                         $("#<% =txtUserName.ClientID %>").addClass('notavailablecss').fadeTo(900, 1);
                       document.getElementById(#<% =btnSignUp.ClientID %>').enabled = false;
                     }
                     else if (result == "0") {
                         $("#<% =txtUserName.ClientID %>").addClass('availablecss').fadeTo(900, 1);
                        document.getElementById('#<% =btnSignUp.ClientID %>').enabled = true;
                     }
                     else {
                         $("#<% =txtUserName.ClientID %>").addClass('notavailablecss').fadeTo(900, 1);
                     }
                 });
             }
         });

         $("#<% =btnavailable.ClientID %>").ajaxError(function (event, request, settings, error) {
             alert("Error requesting page " + settings.url + " Error:" + error);
         });
     });
</script>

My problem is unable to disable and enable the signup button.If username existed I need to disable it and if not I need to enable it. — coder
– coder, Commented Sep 22, 2011 at 12:31

cillierscharl · Accepted Answer · 2011-09-22 12:32:17Z

11

Unfortunately your problem is something as small as the difference between enabled and disabled

.enabled = true;

Should be :

.disabled = false;

answered Sep 22, 2011 at 12:32

cillierscharl

7,1053 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

coder Over a year ago

Yes I have done that as shown above but when the user is available and I click SignUp button it's refreshing the page.

cillierscharl Over a year ago

I see you're using POST so i assume you're just missing event.preventDefault() in your event handler on your button.

cillierscharl Over a year ago

add your submit click handler to your original post.

Amr Elgarhy · Accepted Answer · 2011-09-22 12:35:34Z

10

You can play with this:

$('#ButtonId').prop("disabled", true); ->> disabled
$('#ButtonId').prop("disabled", false); ->> Enabled

answered Sep 22, 2011 at 12:35

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

2 Comments

cillierscharl Over a year ago

as much as i love jquery too, i dont think OP is using it.

cillierscharl Over a year ago

sorry, habit of looking at the tags at a glance ;)

Adriano Carneiro · Accepted Answer · 2011-09-22 13:24:22Z

9

Try this...

document.getElementById('<%= button.ClientID %>').disabled = true;

OR

document.getElementById('<%= button.ClientID %>').disabled = false;

edited Sep 22, 2011 at 13:24

Adriano Carneiro

58.8k12 gold badges94 silver badges123 bronze badges

answered Sep 22, 2011 at 12:36

sharmila

1,5335 gold badges23 silver badges43 bronze badges

2 Comments

coder Over a year ago

Yeh I have tried the same thing as mentioned in the above code but not working.

Lord nick Over a year ago

I tried setting a "var" to this value and then setting the "disabled", but nothing happened. When I used the above code it all worked. I believe it has something to do with a "var" variable not being understood as a button, where the above code is still understood that way.

Raj · Accepted Answer · 2013-10-07 13:07:17Z

7

JavaScript:

 function Enable() {
      $("#btnSave").attr('disabled', false);                
    }
 function Disable() {
       $("#btnSave").attr('disabled', true);
    }

ASPX Page:

 <asp:Button runat="server" ID="btnSave" Text="Save" UseSubmitBehavior="false" OnClientClick="if(Page_ClientValidate('Validation')){javascript:Disable();}" ValidationGroup="Validation"/>

Code Behind:

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "Disable", "javascript:Disable();", True)

answered Oct 7, 2013 at 13:07

Raj

7988 silver badges8 bronze badges

Comments

Prakash Kumar Jha · Accepted Answer · 2011-09-22 12:53:16Z

2

u can just set visibility of your button to false visibility="false"

answered Sep 22, 2011 at 12:53

Prakash Kumar Jha

2322 gold badges7 silver badges16 bronze badges

2 Comments

coder Over a year ago

Yes I have done that too but when the user clicks the show availability then if the user exists in the database then I need to make the signUp button enabled which is not happenning

Prakash Kumar Jha Over a year ago

for that u have to use some if else statement with some conditions and in c# code buttoneName.visibility=true or false

EaziLuizi · Accepted Answer · 2013-11-18 14:11:00Z

1

The .disabled does work, have you used break point to make sure your code was even being reached ? Your conditional if / else's may not be returning your expected values.

answered Nov 18, 2013 at 14:11

EaziLuizi

1,6151 gold badge18 silver badges25 bronze badges

Comments

Dan Ng · Accepted Answer · 2017-05-09 18:48:13Z

1

I do this:

Disable:

    var myButton = document.getElementById('<%= this.myButton.ClientID %>');
    $(myButton).attr('disabled', 'disabled');

Enable:

    $(myButton).removeAttr('disabled');

edited May 9, 2017 at 18:48

answered May 9, 2017 at 18:42

Dan Ng

113 bronze badges

Comments

Shiridish · Accepted Answer · 2012-10-27 04:23:34Z

To enable and disable the buttons using JavaScript, this is what should be done-

Example:

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="a(); return false;"/>
<asp:Button ID="Button2" runat="server" Text="Button" OnClientClick="b(); return false;" />

and

<script type="text/javascript">
   function a() {
       alert('1');
       document.getElementById('<%=Button1.ClientID %>').disabled = true;
       document.getElementById('<%=Button2.ClientID %>').disabled = false;
      }
   function b() {
       alert('2');
       document.getElementById('<%=Button2.ClientID %>').disabled = true;
       document.getElementById('<%=Button1.ClientID %>').disabled = false;
      }
 </script>

NOTE: While other posts had similar code, they fail because of the reload on the page. So to avoid the reload a return false should be added like OnClientClick="a(); return false;"

Joseph Mathew · Accepted Answer · 2017-09-07 07:31:57Z

This JavaScript code should work.

document.getElementById("<%=btnSignUp.ClientID%>").disabled = true; //To disable the button

document.getElementById("<%=btnSignUp.ClientID%>").disabled = false;//To enable the button

Your code should look like

<script type="text/javascript">
     $(function () {
         $("#<% =btnavailable.ClientID %>").click(function () {
             if ($("#<% =txtUserName.ClientID %>").val() == "") {
                 $("#<% =txtUserName.ClientID %>").removeClass().addClass('notavailablecss').text('Required field cannot be blank').fadeIn("slow");

             } else {
                 $("#<% =txtUserName.ClientID %>").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
                 $.post("LoginHandler.ashx", { uname: $("#<% =txtUserName.ClientID %>").val() }, function (result) {
                     if (result == "1") {
                         $("#<% =txtUserName.ClientID %>").addClass('notavailablecss').fadeTo(900, 1);
                       document.getElementById("<%=btnSignUp.ClientID%>").disabled = true;
                     }
                     else if (result == "0") {
                         $("#<% =txtUserName.ClientID %>").addClass('availablecss').fadeTo(900, 1);
                        document.getElementById("<%=btnSignUp.ClientID%>").disabled = false;
                     }
                     else {
                         $("#<% =txtUserName.ClientID %>").addClass('notavailablecss').fadeTo(900, 1);
                     }
                 });
             }
         });

         $("#<% =btnavailable.ClientID %>").ajaxError(function (event, request, settings, error) {
             alert("Error requesting page " + settings.url + " Error:" + error);
         });
     });
</script>

Collectives™ on Stack Overflow

Enable and disable button using javascript and asp.net

9 Answers 9

3 Comments

2 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

2 Comments

2 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related