javascript - 首次单击 Ajax.BeginForm 后禁用按钮

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>

编辑！！！！！

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

score 0 · Accepted Answer

您需要在禁用按钮后提交表单。

给你的表单一个id：

@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
 });

score 0 · Accepted Answer

您可以使用以下方法在下一个事件循环执行中禁用该按钮setTimeout(func, 0)：

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

这将在用户单击后立即阻止按钮，但它将通过第一次单击。

score 0 · Accepted Answer

0

我认为您应该将属性禁用设置为“禁用”

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

于 2019-01-07T21:22:05.037 回答

score 0 · Accepted Answer

您可能可以尝试使用 jquery 中的 ajaxStart 和 ajaxStop 方法。

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

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

可能是这样的，在 ajaxStart 中禁用按钮。

javascript - 首次单击 Ajax.BeginForm 后禁用按钮

4 回答 4

Related

Reference