CODEWITHSUNDEEP
javascriptjqueryasp.netbutton
Maximus Decimus
Maximus Decimus

Reputation: 5261

Enable and disable button

I looked many examples here of enabling and disabling a button in javascript with jquery and any of them worked for me.

Here my desperate situation.

<asp:TextBox ID="mytext" runat="server" onkeyup="enableButton(this, 3)"/>
<asp:Button ID="myButton" runat="server" Text="Search" disabled="disabled" />

and my javascript

        <script type="text/javascript">
            function enableButton(control, chars) {
                if (control.value.length >= chars) {
                    $('#myButton').removeAttr("disabled");
                } else {
                    $('#myButton').attr("disabled", true);
                }
            }
        </script>

EDIT

Hey fellows, finally I got it!

I registered the call of my javascript function in LoadPage event in the codebehind

mytext.Attributes.Add("onkeypress", "enableButton('" + mytext.ClientID + "',3,'" + mybutton.ClientID + "');"

Thank you all you guys for the time!

Upvotes: 0

Views: 2284

Answers (7)

jonni
jonni

Reputation: 338

    function enableButton(control, chars) {
        if (control.value.length >= chars) {
            $('#<%= myButton.ClientID%>').prop("disabled", false);
            $('#<%= myButton.ClientID%>').css("pointer-events", "auto");
           $('#<%= myButton.ClientID%>').css("opacity", "1");
        } else {
            $('#<%= myButton.ClientID%>').prop("disabled", true);
            $('#<%= myButton.ClientID%>').css("pointer-events", "none");
            $('#<%= myButton.ClientID%>').css("opacity", ".5");
        }
    }

disabled works only in IE, it doesn't work in chrome, so add the css pointer-events none which changes the mouse pointer and doesn't allow the link to be clicked.

Edit: Also use myButton.ClientID when you don't use ClientID = static

Upvotes: 0

Maximus Decimus
Maximus Decimus

Reputation: 5261

finally I got it!

I registered the call of my javascript function in LoadPage event in the codebehind

mytext.Attributes.Add("onkeypress", "enableButton('" + txtTRReference.ClientID + "',3,'" + btnGetTR.ClientID + "');"

Thank you all you guys for the time!

Upvotes: 0

Chris
Chris

Reputation: 1

Here is what I've done before.

//On document load
$(function(){
      //Set button disabled
      $("input[type=submit]").attr("disabled", "disabled");

      //Append a change event listener to you inputs
      $('input').change(function(){
            //Validate your form here, example:
            var validated = true;
            if($('#nome').val().length === 0) validated = false;

            //If form is validated enable form
            if(validated) $("input[type=submit]").removeAttr("disabled");                              
      });

      //Trigger change function once to check if the form is validated on page load
      $('input:first').trigger('change');
})

Upvotes: 0

Deepak Mishra
Deepak Mishra

Reputation: 3183

Did you add jquery library in the head tag?

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Upvotes: 0

Manish Sharma
Manish Sharma

Reputation: 2426

Use this.

$('#<%= myButton.ClientID%>').attr('disabled', 'disabled');

Upvotes: 0

UsmanAzam
UsmanAzam

Reputation: 549

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" />

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

Disabled is a property, not an attribute.

Use:

$('#myButton').prop("disabled", "disabled");

Upvotes: 4

Related Questions