button not disabling after click

Question

I am using this post to disable my buttons on click:

Prevent multiple form submits in MVC 3 with validation

This is my page source after it is rendered:

<!DOCTYPE html>

<html>
  <head>


    <title>Do not bookmark this page.</title>
    <link href="/Content/reset.css" rel="stylesheet" type="text/css" />
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/Content/styer.css?t=335" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/Views/main.js" type="text/javascript"></script>
    <link rel="shortcut icon" href="/Content/favicon.ico" type="image/ico" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <script language="javascript" type="text/javascript">
      $(function () {
        $('form').submit(function () {
          if ($(this).valid()) {
            $('input[type="submit"]').attr('disabled', 'disabled');
          }
        });
      });
    </script>

  </head>
  <body>

    <div class="page">

      <div id="header">
        <div id="headerimg"></div>

        <div id="logindisplay">
              [ <a href="/Customer/AccountScreen">Log On</a> ]

        </div>
        <div id="menucontainer">
          <ul id="menu">

              <li><a href="http://www.xxxx.com">Home</a></li>

              <li><a href="/">Logon</a></li>
              <li><a href="/Account/Register">Register</a></li>
                <li><a href="/Home/ContactUs">Contact Us</a></li>

                <li><a href="/Home/NewsList">News</a></li>

          </ul>
        </div>

        <div id="main">


<h2>Forgot Username</h2>
<p>
    Please provide the email address on your web account. Once validated, your username will be sent to your email address for your records.
</p>

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<form action="/Account/ForgotUsername" method="post">    <div>
        <fieldset>
          <legend>Email address</legend>

          <div class="editor-label">
            <label for="EmailAddress">Email</label>
          </div>
          <div class="editor-field focus">
            <input class="GenericTextBox" data-val="true" data-val-length="The Email must be at least 7 characters long." data-val-length-max="100" data-val-length-min="7" id="EmailAddress" name="EmailAddress" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true"></span>
          </div>


          <p>
            <input id="btn" class="makePaymentInput" type="submit" value="Submit"/>
          </p>
        </fieldset>
    </div>
</form>
          <div style="clear: both;"></div>
        </div>
        <div id="footer">
        </div>
      </div>
    </div>

 <!-- Start of StatCounter Code for Default Guide -->
  <script type="text/javascript">
    var sc_project = 9150358;
    var sc_invisible = 1;
    var sc_security = "1af31df9";
    var scJsHost = (("https:" == document.location.protocol) ? "https://secure." : "http://www.");
    document.write("<sc" + "ript type='text/javascript' src='" + scJsHost + "statcounter.com/counter/counter.js'></" + "script>");
    </script>

  <noscript>
    <div class="statcounter"><a title="web analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/9150358/0/1af31df9/1/" alt="web analytics"></a></div>
  </noscript>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer"}
</script>
<script type="text/javascript" src="http://localhost:25759/610299fe88d74cee8d0267b4fc859da0/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

This works on most forms but this one, which is the main reason I used this code.

Anyone see why this one is not working?

Answer 1

Instead of writing this :-

$('input[type="submit"]').attr('disabled', 'disabled');

You should write this :-

$('input[type="submit"]').prop('disabled','true');

button not disabling after click

Question

1 answers

solution1
0 2014-08-30 14:02:30

button not disabling after click

Question

1 answers

solution1 0 2014-08-30 14:02:30

solution1
0 2014-08-30 14:02:30