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

Я знаю, что в этом есть много вопросов, но я попробовал несколько решений, и ничего не работает.

В моем приложении django у меня есть форма:

<form method='post'>
    <button type='submit'>Send</button>
</form>

Я не могу отключить кнопку, как только пользователь отправит форму. Используя другие вопросы, я попробовал несколько вещей, например:

<button type='submit' onclick="this.disabled=true">Send</button>

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

Я использую Chrome. Любая идея о том, почему у меня есть эта проблема? Благодарим вас за помощь.

Ответ 1

Попробуйте следующее:

$('form').submit(function() {
  $(this).find("button[type='submit']").prop('disabled',true);
});

Ответ 2

Мне нравится это, не нужно пересекать DOM. Поместите функцию в функцию setTimeout, это позволяет выполнять отправку и после отключения кнопки, даже если setTimeout равен 0

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

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

Ответ 3

Вы можете отключить его в родительской форме submit event:

$("form").on("submit", function () {
    $(this).find(":submit").prop("disabled", true);
});

Обязательно запустите этот код только после того, как был загружен HTMLFormElement, иначе он не будет привязан к нему. Чтобы убедиться, что привязка имеет место, выключите это из блока document-ready:

// When the document is ready, call setup
$(document).ready(setup);

function setup () {
    $("form").on("submit", function () {
        $(this).find(":submit").prop("disabled", true);
    });
}

Ответ 4

Попробуйте, например,

  <input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">

Ответ 5

Что-то вроде этого может работать.

<button id="btnSubmit" type='submit'> Send </button>

<script>
     $("#btnSubmit").on("click", function(e){
          e.PreventDefault();
          $(this).closest("form")[0].submit();
          $(this).prop('disabled',true)
     });
</script>

Ответ 6

Как насчет этого?

onclick="this.style.visibility='hidden';"

Я бы сказал, вместо отключенного, скрыть его.

Если вы хотите пойти с disabled

onclick="this.style.disabled='true';"

Ответ 7

мой вариант, кнопка отключения, без прямого отключения, но только скрытая скрытая:

<input type="submit" name="namebutton" value="Nahrát obrázek"  onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>

Ответ 8

Мне нравится это лучше:

<script>
    var submit = false;
    $('form').submit(function () {
        if (submit) { return false; }
        else { submit = true;}
    });
</script>

таким образом он также предотвращает отправку ключа ввода более одного раза

Ответ 9

Я использую Chrome. Любая идея о том, почему у меня есть эта проблема?

Хорошо, в первый раз, когда я справился с этим, я решил это следующим образом:

function blockButtons() {
   $('button:submit').click(function(){
    $('button:submit').attr("disabled", true);
   });
}

Это сработало отлично, но... в Mozilla Firefox. Google Chrome не отправил его, поэтому я изменил его на следующее:

function blockButtons() {
   $('button:submit').click(function(){
      var form = $(this).parents('form:first');
    $('button:submit').attr("disabled", true);
    $('button:submit').css('opacity', 0.5);
    form.submit();
   });
}

Это работало как в Mozilla Firefox, однако, после этого некоторые из наших пользователей, использующих старые версии IE, столкнулись с проблемой наличия двух сообщений. То есть, инициированный javascript, а другой браузер игнорирует факт onclick и просто отправляет в любом случае. Это может быть исправлено с помощью e.preventDefault, я думаю.

Ответ 10

Если вы не хотите, чтобы элемент был двойным щелчком, используйте .one()

<button id="submit" type="submit">Send</button>
<script>
$(function () {
$("#submit").one("click", function () {
//enter your submit code
 });
});

. one()

Ответ 11

У вас возникла проблема с Chrome, он не отправил форму. Пробовал кучу разного кода, это было то, что работало лучше всего для меня (и выглядит лучше всего imo):

  $('#form_id').submit(function() {
    $("input[type='submit']", this)
      .val("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
  });

Замените form_id на идентификатор вашей формы. Конечно, занятия тоже работают: $('.form_class')

Источник: Кодировщик JavaScript

Ответ 12

Вы можете сделать что-то подобное. Это хорошо работает со мной.

<form method='post' onSubmit='disableFunction()'>
// your code here
</form>

Затем в script добавьте это

<script>
function disableFunction() {
    $('#btn_submit').prop('disabled', true);
}
</script>

Ответ 13

Вы можете сделать что-то вроде этого. Это хорошо работает со мной.

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

Двойной щелчок по вашей кнопке. Этот код будет запущен

Ответ 14

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

JavaScript:

$('form').submit(function(e) {
    // if the form is disabled don't allow submit
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        return;
    }
    $(this).addClass('disabled');
});

Как только форма правильно отключена, вы можете настроить ее внешний вид.

CSS:

form.disabled {
    pointer-events: none;
    opacity: 0.7;
}