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

Ответ 1

Сделайте это onSubmit():

$('form#id').submit(function(){
    $(this).find(':input[type=submit]').prop('disabled', true);
});

Что происходит, так это то, что вы полностью отключили кнопку, прежде чем она инициирует событие отправки.

Вероятно, вам также следует подумать об именах ваших элементов с идентификаторами или CLASS, поэтому вы не выбираете все входы типа отправки на странице.

Демонстрация: http://jsfiddle.net/userdude/2hgnZ/

(Обратите внимание: я использую preventDefault() и return false, поэтому форма не является фактической отправкой в ​​примере, оставьте это в своем использовании.)

Ответ 2

В частности, если кто-то сталкивается с проблемой в Chrome :

Чтобы это исправить, нужно использовать тег onSubmit в элементе <form> чтобы disabled кнопку отправки. Это позволит Chrome отключить кнопку сразу после ее нажатия, и отправка формы будет продолжена...

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Ответ 3

Отключенные элементы управления не отправляют свои значения, что не помогает узнать, нажал ли пользователь сохранить или удалить.

Таким образом, я сохраняю значение кнопки в скрытом, которое отправляется. Имя скрытого файла совпадает с именем кнопки. Я вызываю все мои кнопки по имени button.

например. <button type="submit" name="button" value="save">Save</button>

Основываясь на этом, я нашел здесь. Просто сохраните нажатую кнопку в переменной.

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Вот моя функция IsNull. Используйте или замените свою собственную версию для IsNull или undefined и т.д.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

Ответ 4

Это должно позаботиться об этом в вашем приложении.

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Ответ 5

Простое и эффективное решение

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Источник: здесь

Ответ 6

Более простой способ. Я попробовал это, и это работало нормально для меня:

$(':input[type=submit]').prop('disabled', true);

Ответ 7

Ваш код действительно работает на FF, он не работает в Chrome.

Это работает на FF и Chrome.

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

Ответ 8

Как отключить кнопку отправки

просто вызовите функцию onclick event и... возвращайте true для отправки и false, чтобы отключить отправку. ИЛИ вызовите функцию на window.onload, например:

window.onload = init();

и в init() сделать что-то вроде этого:

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do 

Ответ 9

У меня сработало следующее:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

Это отменяет событие отправки, если пользователь пытается отправить форму несколько раз (нажав кнопку отправки, нажав Enter и т.д.)

Ответ 10

Я использовал blockUI, чтобы избежать несовместимости браузера с отключенными или скрытыми кнопками.

http://malsup.com/jquery/block/#element

Тогда у моих кнопок есть класс автоподключения:

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });   

Тогда форма такая:

<form>
....
<button class="autobutton">Submit</button>   
</form>

Ответ 11

Код кнопки

<button id="submit" name="submit" type="submit" value="Submit">Submit</button>

Кнопка отключения

if(When You Disable the button this Case){
 $(':input[type="submit"]').prop('disabled', true); 
}else{
 $(':input[type="submit"]').prop('disabled', false); 
}

Примечание. В этом случае ваш случай может быть несколько

Ответ 12

Как уже говорилось, если вы добавите отключенный атрибут на кнопку отправки, данные не будут отправлены.

Трюк от @Valamas работает, но я нашел решение, которое очень легко реализовать:

$('#yourform').submit(function(){
    $('#mySubmitButton').addClass('disabled');
});

И вы определяете отключенный класс в CSS следующим образом:

.disabled{
    cursor:not-allowed;
}

Это сделает то же самое, что отключено = "отключено", но без последствий для отправленных данных.