Display overlay on button submit

Question

I'm attempting to disable a button on my form when the user clicks it but it's not firing at all.

I set the ID to submit to match the function but it's not firing. Any suggestions on what I'm doing wrong?

@using System.Web.UI.WebControls
@using WebPortalSite.MiscClasses
@using WebPortalSite.sessions
@model WebPortalSite.Models.PaymentModel.CheckPayment

    @{
      ViewBag.Title = "Checking / Savings Account Information";
    }
    
    @if (CurrentCustomerSession.Current.TokenShowHideSettings.ShowPaymentScreenMessage)
    {
      <div class="CompanyMessage">
        @Html.Raw(@CurrentCustomerSession.Current.TokenSettings.PaymentScreenMessage)
      </div>
    }
    
    @using (Html.BeginForm("AchPaymentSubmit", "Payment", FormMethod.Post))
    {
      <div>
        <fieldset>
          <legend>Please fill out the fields below. All fields are required.</legend>
    
    
          <div class="paymentPageMargin">
    
            <div class="check_paymentBlock">
    
              @if (CurrentCustomerSession.Current.CurrentCustomer.BudgetRate > 0)
              {
                <div class="block_container">
                  <div class="serviceBox1 paymentBlockTextLeft payment-label-nomargin">
                    Budget Rate:
                  </div>
                  <div class="serviceBox2 paymentBlockText payment-label-nomargin">
                    $@($"{CurrentCustomerSession.Current.CurrentCustomer.BudgetRate:F2}")
                  </div>
                </div>
    
                <div class="block_container">
                  <div class="serviceBox1 paymentBlockTextLeft payment-label-nomargin">
                    Budget Balance:
                  </div>
                  <div class="serviceBox2 paymentBlockText payment-label-nomargin">
    
                  </div>
                </div>
    
              }
              else
              {
    
                <div class="block_container">
                  <div class="serviceBox1 paymentBlockTextLeft payment-label-nomargin">
                    Account Balance:
                  </div>
                  <div class="serviceBox2 paymentBlockText payment-label-nomargin">
                    @($"{CurrentCustomerSession.Current.CurrentCustomer.TotalBalance:F2}")
                  </div>
                </div>
              }
    
            </div>
    
            <div>
              @Html.ValidationSummary(true, "All fields are required. Please fill the highlighted fields below.")
            </div>
    
            <!-- BUSINESS OR PERSONAL ACCOUNT -->
            <label for="PaymentType" class="paylabel payinput width600">
              <span class="payspan">Account Type:</span>
    
              @Html.RadioButtonFor(m => m.CheckType, "Personal", new { @class = "" }) Personal
              @Html.RadioButtonFor(m => m.CheckType, "Business", new { @class = "" }) Business
              @Html.ValidationMessageFor(m => m.CheckType)
            </label>
    
            <!-- CHECKING OR SAVINGS SELECTION -->
            <label for="PaymentType" class="paylabel payinput width600">
              <span class="payspan">Payment Type:</span>
              @Html.RadioButtonFor(m => m.AccountType, "Checking", new { @class = "" }) Checking
              @Html.RadioButtonFor(m => m.AccountType, "Savings", new { @class = "" }) Savings
              @Html.ValidationMessageFor(m => m.AccountType)
            </label>
    
            <!-- CARD HOLDER'S NAME -->
            <label for="CardHoldersName" class="paylabel width400 newline">
              <span class="payspan">Name on Check</span>
              @Html.TextBoxFor(m => m.NameOnCheck, new { @class = "payinput width400", @maxlength = "20", autocomplete = "off", id = "CardHoldersName" })
              @Html.ValidationMessageFor(m => m.NameOnCheck)
            </label>
    
            <!-- BILLING PHONE -->
            <label for="PhoneNumber" class="paylabel">
              <span class="payspan">Phone Number</span>
              @Html.TextBoxFor(m => m.PhoneNumber, new { @class = "payinput", @maxlength = "12", autocomplete = "off", id = "PhoneNumber" })
              @Html.ValidationMessageFor(m => m.PhoneNumber)
            </label>
    
            <!-- BILLING STREET -->
            <label for="StreetAddress" class="paylabel width400 newline">
              <span class="payspan">Street Address</span>
              @Html.TextBoxFor(m => m.StreetAddress, new { @class = "payinput width200", @maxlength = "20", autocomplete = "off", id = "StreetAddress" })
            </label>
    
            <!-- BILLING CITY -->
            <label for="City" class="paylabel width400">
              <span class="payspan">City</span>
              @Html.TextBoxFor(m => m.City, new { @class = "payinput width200", @maxlength = "20", autocomplete = "off", id = "City" })
              @Html.ValidationMessageFor(m => m.City)
            </label>
    
            <!-- BILLING STATE -->
            <label for="billingstate" class="paylabel newline">
              <span class="payspan width300">State or Province of Account</span>
              @Html.DropDownListFor(x => x.State, SelectListItemHelper.GetProvincesList(), new { @class = "payinput paycombobox", id = "billingstate" })
              @Html.ValidationMessageFor(m => m.State)
            </label>
    
            <!-- BILLING ZIP -->
            <label for="Zip" class="paylabel">
              <span class="payspan">Zip</span>
              @Html.TextBoxFor(m => m.Zip, new { @class = "payinput", @maxlength = "6", autocomplete = "off", id = "Zip" })
              @Html.ValidationMessageFor(m => m.Zip)
            </label>
    
            <!-- CHECK NUMBER -->
            <label for="CheckNumber" class="paylabel newline">
              <span class="payspan">Check Number</span>
              @Html.TextBoxFor(m => m.CheckNumber, new { @class = "payinput", @maxlength = "10", autocomplete = "off", id = "CheckNumber" })
              @Html.ValidationMessageFor(m => m.CheckNumber)
            </label>
    
            <!-- CHECK ROUTING NUMBER -->
            <label for="CheckRoutingNumber" class="paylabel">
              <span class="payspan">Routing / transit number</span>
              @Html.TextBoxFor(m => m.CheckRoutingNumber, new { @class = "payinput", @maxlength = "9", autocomplete = "off", id = "CheckRoutingNumber" })
              @Html.ValidationMessageFor(m => m.CheckRoutingNumber)
            </label>
    
    
            <label for="CheckAccountNumber" class="paylabel newline">
              <span class="payspan">Account number</span>
              @Html.TextBoxFor(m => m.CheckAccountNumber, new { @class = "payinput", @maxlength = "17", autocomplete = "off", id = "CheckAccountNumber" })
              @Html.ValidationMessageFor(m => m.CheckAccountNumber)
            </label>
    
    
            <label for="CheckAccountNumber2" class="paylabel">
              <span class="payspan">Re-enter account number</span>
              @Html.TextBoxFor(m => m.CheckAccountNumber2, new { @class = "payinput", @maxlength = "17", autocomplete = "off", id = "CheckAccountNumber2" })
              @Html.ValidationMessageFor(m => m.CheckAccountNumber2)
            </label>
    
            <br />
    
            <label for="payamount" class="paylabel">
              <span class="payspan">Payment Amount</span>
              @Html.TextBoxFor(m => m.Amount, "{0:F2}", new { @class = "payinput width90", @maxlength = "8", autocomplete = "off", id = "payamount" })
            </label>
    
            @if (@Model.FeeAmount > 0)
            {
              <label for="CheckNumber" class="feelabel">
                <span class="payspan"> + @Model.FeeAmount.ToString("C") Processing Fee</span>
              </label>
            }
    
            @Html.ValidationMessageFor(m => m.Amount)
    
            <br />
            <div class="paymentButton newline">
              <p>
                <input id="submit" class="typicalbutton" type="submit" value="Continue" />
              </p>
    
              <script>
                $(document).ready(function () {
                  $(".submit").button({ disabled: true });
    
                  $(document).submit(function () {
                    $(".submit").button({ disabled: false });
                    document.getElementById('<%=submit.ClientID%>').value = 'Processing...';
                  });
    
                });
              </script>
    
    
    
            </div>
          </div>
        </fieldset>
      </div>
    
      <div>
        @Html.HiddenFor(x => Model.FeeAmount)
      </div>
    
    }

Answer 1

<div class="paymentButton newline">
      <p>
        <input id="submit" class="typicalbutton" type="submit" value="Submit Payment" />
      </p>
    </div>
    
    <script>
      $(document).ready(function () {
        $('input[type=submit]', this).removeAttr('disabled');

        $(document).submit(function () {
          $('input[type=submit]', this).attr('disabled', true);
          document.getElementById('<%=submit.ClientID%>').value = 'Processing...';
        });

      });
    </script>