Отключение кнопки после первого нажатия Ajax.BeginForm с Javascript

Question

Имеется проблема с скрытием / отключением кнопки отправки, а также отправки формы. Я попытался добавить: onclick="this.value='Submitting, Please Wait.'; this.disabled='disabled';" в поле ввода ввода, что отключит кнопку, но не будет отправлять форму. Я попытался поместить это в часть javascript, и это не работает. Я пробовал такие вещи также:

$("#SignInButton").one('click', function (event) { 
  event.preventDefault(); 

  $(this).prop('disabled', true); 
});

Я в растерянности, потому что много примеров, на которые я смотрю, касается html.beginform, и эта старая форма была настроена с Ajax.BeginForm. Любое понимание того, как просто спрятать кнопку или отключить кнопку с помощью приведенного ниже кода, очень поможет !!

<div id="LoginModal" style="display:none;padding:1rem;max-width:580px;">
  @using (Ajax.BeginForm("Login", "Accounts", 
    new AjaxOptions 
    { 
      HttpMethod = "POST", 
      OnSuccess = "OnSuccess", 
      OnFailure = "OnSuccess" 
    }))
    {
      <div>
          Other Form Data
          <div>
            @Html.Hidden("ItemID", Model.ItemID)
            <input type="submit" id="SignInButton" data-loading-text="Signing in" class="button success" value="Sign In" />
          </div>
      </div>
    }

  <script type="text/javascript">
    var ready;
      ready = function () {
        $(".fancybox").fancybox({
          'content': $('#LoginModal'),
          'onStart': function () { $("#LoginModal").css("display", "block"); },
          'onClosed': function () { $("#LoginModal").css("display", "none"); }
        });
      };

    $(document).ready(ready);
    $(document).on('page:load', ready);
  </script>

EDIT !!!!!

<div id="LoginModal" style="display:none;padding:1rem;max-width:580px;">
@using (Ajax.BeginForm("Login", "Accounts", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnSuccess" }))
{
    <h1>Sign In</h1>
    var displayLocalLogin = "";
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false, "", new { @class = "text-error" })
    @Html.Sitecore().FormHandler()
    <div class="">
        <div class="row">
            <div class="internal">
                <div class="medium-12 columns">
                </div>
                <div class="medium-12 border-top columns">
                    <div class="form-group">
                        <label for="UserName">UserName <span class="required">*</span></label>
                        @Html.TextBoxFor(m => m.UserName)
                        @Html.ValidationMessageFor(m => m.UserName)
                    </div>
                </div>
                <div class="medium-12 columns">
                    <div class="form-group">
                        <label for="Password">Password <span class="required">*</span></label>
                        @Html.PasswordFor(m => m.Password)
                        @Html.ValidationMessageFor(m => m.Password)
                    </div>
                </div>
                <div class="medium-12 columns" style="padding-bottom: 10px;">
                    <div class="form-group">
                    </div>
                </div>
                <div class="medium-5 columns left">
                    <div class="form-group">
                        <div>
                            <div>
                                @Html.Hidden("ItemID", Model.ItemID)
                                <input type="submit" id="SignInButton" data-loading-text="Signing in" class="button success" value="Sign In">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (string.Equals(System.Configuration.ConfigurationManager.AppSettings["EnableSalesForceLogin"], "true", StringComparison.InvariantCultureIgnoreCase))
            {
                displayLocalLogin = "displaynone";
                @Html.Partial("/salesforceloginpartial.cshtml")
            }
        </div>
    </div>
}

<script type="text/javascript">

$("#SignInButton").one('click', function (event) {
    $(this).prop('disabled', 'disabled');
});


//function OnSuccess(data) {
//  alert(data);
//  $('#LoginModal').parent.html(data).css("display", "block");
//  $("#LoginModal").css("display", "block");
//}

var ready;
ready = function () {
    $(".fancybox").fancybox({
        'content': $('#LoginModal'),
        'onStart': function () { $("#LoginModal").css("display", "block"); },
        'onClosed': function () { $("#LoginModal").css("display", "none"); }
    });
};
$(document).ready(ready);
$(document).on('page:load', ready);

</script>

Answer 1

Вероятно, вы можете попробовать использовать методы ajaxStart и ajaxStop из jquery.

http://api.jquery.com/ajaxStart/

http://api.jquery.com/ajaxStop/

Может быть что-то вроде, в ajaxStart отключить кнопку.

Answer 2

Вам необходимо отправить форму после отключения кнопки.

Дайте вашей форме идентификатор:

@using (Ajax.BeginForm("Login",
                       "Accounts",  
                       new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnSuccess" },
                       new { id = "formId"}))

, а затем отправьте его с помощью javascript:

$("#SignInButton").one('click', function (event) {
     event.preventDefault(); 
     $(this).prop('disabled', true);    //disable button
     $("#formId").submit();             //submit the form
 });

Answer 3

Я думаю, вы должны установить для атрибута disabled значение «disabled» вместо этого

  $(this).prop('disabled', 'disabled'); 

Answer 4

Вы можете отключить кнопку в следующем исключении цикла событий, используя setTimeout(func, 0):

$("#SignInButton").one('click', function (event) { 
  setTimeout(function() { 
    event.preventDefault(); 
    $(this).prop('disabled', true); 
  }, 0); 
});

Это заблокирует кнопку сразу после нажатия пользователем, но пропустит первый щелчок.