Javascript enable/disable button not working as expected

Question

This is my logon view:

@model SuburbanCustPortal.Models.LogOnModel

@{
    ViewBag.Title = "Log On";
}

<h2>Log On</h2>
<p>
  Please enter your user name and password. @Html.ActionLink("Register", "Register") if you don't have an account.
</p>

<p>
  If only you wish to make a payment on your account and do not want to create a website login, @Html.ActionLink("click here", "RedirectToPaymentPage", "Account").
</p>


@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm()) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field focus">
                @Html.TextBoxFor(m => m.UserName, new { @class = "GenericTextBox", onkeyup = "enableLogonButton()" })
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password, new { @class = "GenericPasswordBox", onkeyup = "enableLogonButton()" })
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

          <p>
            <button name="btn" value="Log On" onclick="disableButton()" disabled="disabled">Log On</button>
          </p>

          <p>
            If you need to retrieve your username @Html.ActionLink("click here.", "ForgotUsername", "Account")<br/>
            If you need to reset your password @Html.ActionLink("click here.", "ForgotPassword", "Account")
          </p>

        </fieldset>
    </div>
}

This is my widget.js:

function enableLogonButton() {
  if ($('#UserName').val() == "") {
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  if ($('#Password').val() == "") {
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  $('#btn').removeAttr('disabled');
}

    function logonDisableSubmitButtons(clickedButton) {

        $("input[type='button']").each(function() {
          if (this.name != clickedButton)
            $(this).attr("disabled", "disabled");
          else {
            //hiding the actually clicked button
            $(this).hide();
            //Creating dummy button to same like clicked button
            $(this).after('<input type="button" disabled="disabled" value="' + $(this).val() + '" class="' + $(this).attr('class') + '" />');
          }
        });

      }

      function disableButton() {

        $('#btn').click(function (e) {
          $(this).attr('disabled', 'disabled');
        });


      }

I'm not having the button enabled no matter what I do.

What I am wanting is two things:

When the user has something in the logon and username, enable the submit button.
When they click submit, the button is disabled so they cannot click it twice.

I'm not having luck with either.

I have made the changes suggested below but the button is still not being enabled once I have entered something in the fields

** FURTHER TESTING**

I added the alerts() as suggested as such:

function enableLogonButton() {
  alert("start");
  if ($('#UserName').val() == "") {
    alert("username");
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  if ($('#Password').val() == "") {
    alert("password");
    $('#btn').attr('disabled', 'disabled');
    return;
  }
  alert("enabled");
  $('#btn').removeAttr('disabled');
}

Not one of them are firing off. At least, I'm getting no prompt.

So, then I changed the call to this to make sure it was even seeing the JScript:

@Html.PasswordFor(m => m.Password, new { @class = "GenericPasswordBox", onkeyup = "enableLogonButtonX()" })

And I get this message:

Microsoft JScript runtime error: 'enableLogonButtonX' is undefined

So, I believe it is seeing the JScript.

I then added this:

<script>
    function myFunction() {
      alert("hit!");
    }
</script>

And changed this:

 <button name="btn" value="Log On" onclick="myFunction()" disabled="disabled">Log On</button>

And my "hit" worked. So, I believe the onclick is working also.

Diodeus - James MacFarlane · Accepted Answer · 2012-11-27 17:58:19Z

2

disabled is a boolean property, not an attribute.

To set:

$('#btn').attr('disabled', 'disabled');

To clear:

$('#btn').removeAttr('disabled')

answered Nov 27, 2012 at 17:58

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

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

6 Comments

ErocM Over a year ago

I have made the changes but the button is still not being enabled once the fields are filled in. I have updated my post.

ErocM Over a year ago

Ok I did and I added the results in my original question.

Diodeus - James MacFarlane Over a year ago

No one can actually run your code, since you posted your .NET code and not the HTML. The alerts are really there for you to help debug this.

ErocM Over a year ago

And I did debug it. Like I said, it is not reaching the alerts at all. It's not even reaching the first alert at the top of the function. I actually ran SEVERAL tests on this as my addition to my posts shows.

Diodeus - James MacFarlane Over a year ago

If the button is disabled the onclick cannot fire either.

|

hawkke · Accepted Answer · 2012-11-27 23:08:50Z

1

Unless I'm not reading your question close enough (which, admittedly, could be the case since it is after 5 here...time for beer) or you have a typo in your question, I think your error message gives you everything you need to debug this.

Here is your message: Microsoft JScript runtime error: 'enableLogonButtonX' is undefined

Here is your function name: enableLogonButton

So, according to the error message, you are calling the function enableLogonButtonX() but your function is named enableLogonButton. Change to this:

@Html.PasswordFor(m => m.Password, new {
        @class = "GenericPasswordBox", 
        onkeyup = "enableLogonButton()" })

answered Nov 27, 2012 at 23:08

hawkke

4,2821 gold badge29 silver badges23 bronze badges

Comments

Kundan Singh Chouhan · Accepted Answer · 2012-11-27 17:59:00Z

0

Instead of changing the value of disable attribute remove it completely from element.

i.e. Replace this

$('#btn').attr('disabled', false);

With

$('#btn').removeAttr('disabled');

answered Nov 27, 2012 at 17:59

Kundan Singh Chouhan

14.4k4 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

Javascript enable/disable button not working as expected

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related