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>

Answer 1

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

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

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

Answer 2

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

为您的表单提供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
 });

Answer 3

我认为您应该将属性Disabled设置为“ disabled”

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

Answer 4

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

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

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

可能类似于在ajaxStart中禁用该按钮。

使用Javascript首次单击Ajax.BeginForm后禁用按钮

4 个答案: