Отключить кнопку отправки только после отправки

У меня есть следующий HTML и jquery:

<html dir="ltr" lang="en">
<head>
</head>
<body>

<h2>Test disabling submit button for 1 minute...</h2>

<br/>

<p style="text-align:center"> 
<form id="yourFormId" name="yourFormId" method="post" action="#">
 <input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>




<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  
</script>
<script type="text/javascript">

$(document).ready(function () {
    $(".submitBtn").click(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

</script>
<!--script ends here-->

</body>
</html>

В качестве подставки кнопка отправки отключается при нажатии. Однако после нажатия на него не появляется команда submit. Если я удалил jquery, чтобы отключить кнопку, кнопка затем выполняет отправку в обычном режиме.

Как отключить кнопку только после того, как она выполнила отправку? текущий jquery выше, похоже, противоречит операции отправки.

Любые предложения по решению этой проблемы будут чрезвычайно полезны.

Ответ 1

Добавьте отключенную часть в событие отправки.

$(document).ready(function () {
    $("#yourFormId").submit(function () {
        $(".submitBtn").attr("disabled", true);
        return true;
    });
});

Ответ 2

Эй, это работает,

   $(function(){
     $(".submitBtn").click(function () {
       $(".submitBtn").attr("disabled", true);
       $('#yourFormId').submit();
     });
   });

Ответ 3

Я столкнулся с той же проблемой. Клиенты могут отправить форму, а затем несколько адресов электронной почты получат почтовое сообщение. Если ответ страницы занимает слишком много времени, иногда кнопка была нажата дважды или даже больше раз.

Я попытался отключить кнопку в обработчике onsubmit, но форма не была отправлена вообще. Выше решения работают, наверное, хорошо, но для меня это было немного слишком сложно, поэтому я решил попробовать что-то еще.

В левой части кнопки отправки я поместил вторую кнопку, которая не отображается и отключается при запуске:

<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>   
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>

В обработчике onsubmit, прикрепленном к форме, "реальный" submit скрыт, а "fake" submit отображается с сообщением о отправке сообщений.

function checkinput // submit handler
{
    ..
    ...
    $("#btnverzenden").hide(); <= real submit button will be hidden
    $("#btnverzenden2").show(); <= fake submit button gets visible
    ...
    ..
}

Это сработало для нас. Надеюсь, это поможет вам.

Ответ 4

Это отредактированный script, надеюсь, что это поможет,

   <script type="text/javascript">
        $(function(){
            $("#yourFormId").on('submit', function(){
                return false;
                $(".submitBtn").attr("disabled",true); //disable the submit here
                //send the form data via ajax which will not relaod the page and disable the submit button
                $.ajax({
                   url      : //your url to submit the form,
                   data     : { $("#yourFormId").serializeArray() }, //your data to send here 
                   type     : 'POST',
                   success  : function(resp){
                        alert(resp);    //or whatever 
                   },
                   error    : function(resp){

                   }
                });
            })
        });
    </script>

Ответ 5

Это решение имеет преимущества работы на мобильных устройствах и довольно просто:

<form ... onsubmit="myButtonValue.disabled = true; return true;">

Ответ 6

Протестируйте с помощью setTimeout, который работал у меня, и я мог бы отправить свою форму, ссылается на этот ответ fooobar.com/questions/12932/...

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        setTimeout(function () { disableButton(); }, 0);
    });

    function disableButton() {
        $("#btnSubmit").prop('disabled', true);
    }
});

Ответ 7

Я помещал это в свой глобальный код для работы со всеми кнопками отправки:

$("input[type='submit']").on("click", function (e) {
    $(this).attr("disabled", true);
    $(this).closest("form").submit()
});

Ответ 8

Считая комментарии, кажется, что эти решения несовместимы между браузерами. Решил тогда подумать, как бы я это сделал 10 лет назад до появления функции jQuery и функции события.

Итак, вот мое ретро-решение хипстера:

<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false;  }" action="" method="GET">

<input type="submit" value="submit - but only once!"/>
</form>

Главное отличие заключается в том, что я полагаюсь на возможность прекратить отправку формы путем возврата false в обработчик отправки, и я использую переменную глобального флага, которая заставит меня перейти прямо в ад!

Но с положительной стороны, я не могу себе представить проблемы совместимости с браузером - эй, возможно, он даже работает в Netscape!

Ответ 9

Моя проблема была решена, когда я добавляю раздел bind в мой файл script.

Всего я сделал это 2 шага:

1 - Отключить кнопку и предотвратить двойное представление:

$('form').submit(function () {
    $(this).find(':submit').attr('disabled', 'disabled');
});

2 - Включить кнопку отправки, если произошла ошибка проверки:

$("form").bind("invalid-form.validate", function () {
    $(this).find(':submit').prop('disabled', false);
});

Ответ 10

$(document).ready(function() {
    $(body).submit(function () {
        var btn = $(this).find("input[type=submit]:focus");
        if($(btn).prop("id") == "YourButtonID")
            $(btn).attr("disabled", "true");
    });
}

и на стороне сервера:

protected void YourButton_Clicked(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "", "$('#YourButtonID').removeAttr('disabled');", true);
}

Ответ 11

Как отметили многие люди, отключение кнопки отправки имеет некоторые отрицательные побочные эффекты (по крайней мере, в Chrome это предотвращает отправку имени/значения кнопки, нажатой). Мое решение состояло в том, чтобы просто добавить атрибут, чтобы указать, что запрос был запрошен, а затем проверить наличие этого атрибута на каждой отправке. Поскольку я использую функцию отправки, это вызывается только после успешной проверки HTML 5. Вот мой код:

  $("form.myform").submit(function (e) {
    // Check if we have submitted before
    if ( $("#submit-btn").attr('attempted') == 'true' ) {
      //stop submitting the form because we have already clicked submit.
      e.preventDefault();
    }
    else {
      $("#submit-btn").attr("attempted", 'true');
    }
  });

Ответ 12

  $(function(){

    $("input[type='submit']").click(function () {
        $(this).attr("disabled", true);   
     });
  });

это его.