使用jQuery提交后禁用按钮

I know there are a lot of questions about it, but I tried several solutions, and nothing works.

我知道有很多关于它的问题，但是我尝试了几个解决方案，但是没有一个有效。

In my django app I have a form:

在django应用程序中，我有一个表单:

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

I wan't to disable the button once the user has submitted the form. Using other questions, I tried several things, like:

用户提交表单后，我不想禁用按钮。用其他问题，我尝试了几件事，比如:

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

When I click, the button is disabled... but the form is not submitted. And for each try I had the same issue: either the button is disabled or the form is submitted. I can't find how to do both...

当我点击时，按钮被禁用……但是表格没有提交。对于每次尝试，我都遇到了相同的问题:要么禁用按钮，要么提交表单。我找不到两种方法……

I'm using Chrome. Any idea on why I have this problem? Thank you for your help.

我使用Chrome。你知道我为什么会有这个问题吗?谢谢你的帮助。

12 个解决方案

#1

Try this:

试试这个:

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

#2

I like this, don't have to traversing DOM. Put function on a setTimeout function, this allows make submit and after disable button, even if setTimeout is 0

我喜欢这个，不用遍历DOM。将函数放在setTimeout函数上，这允许make submit和after disable按钮，即使setTimeout为0

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

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

#3

You could disable it upon the parent form's submit event:

您可以在父表单的提交事件中禁用它:

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

Be sure to run this code only after the HTMLFormElement has been loaded, or else nothing will be bound to it. To ensure that the binding takes place, fire this off from within a document-ready block:

请确保只有在加载HTMLFormElement之后才运行此代码，否则不会绑定到它。为了确保绑定发生，请在准备好文档的块中触发:

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

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

#4

Something like this might work.

像这样的东西可能有用。

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

#5

How about this?

这个怎么样?

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

I would say, instead of disabled, hide it.

我想说的是，把它藏起来，而不是让它失效。

If you want to go with disabled

如果你想要残疾人

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

#6

my variant, disable button, no direct disabled but only vidible hidden:

我的变体，禁用按钮，没有直接禁用，只有vidible隐藏:

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

#7

Try, like this,

这样的尝试,,

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

#8

I like this better:

我更喜欢这个:

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

this way it also prevents the enter key to submit more than once

这样，它还可以防止enter键多次提交

#9

I'm using Chrome. Any idea on why I have this problem?

我使用Chrome。你知道我为什么有这个问题吗?

Well, first time I dealt with this, I solved it like this:

第一次处理这个问题时，我是这样解的:

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

This worked perfectly, but... in Mozilla Firefox. The Google Chrome did not submit it, so I changed it to this:

这工作完全,但是……在Mozilla Firefox。谷歌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();
   });
}

This worked both in Mozilla Firefox, however, after that some of our users using old versions of IE experienced trouble of having two submits. That is, the one initiated by the javascript, and the one by browser ignoring the fact of onclick and just submitting anyway. This can be fixed by e.preventDefault, I guess.

不过，这在Mozilla Firefox中都是有效的，因为我们的一些用户在使用旧版本IE时遇到了两次提交的麻烦。也就是由javascript发起的，浏览器忽略onclick的事实，只提交。这可以用e来固定。preventDefault,我猜。

#10

If you don't want an element to be double-clicked, use .one()

如果不希望双击某个元素，可以使用.one()

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

.one()

。()

#11

Got an issue on Chrome, wasn't submitting the form. Tried a bunch of different code, this was what worked best for me (and looks best imo):

在Chrome上有问题，没有提交表格。尝试了一系列不同的代码，这是最适合我的(在我看来也是最好的):

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

Replace form_id with the id of your form. Classes work too of course: $('.form_class')

用表单的id替换form_id。当然，类也可以工作:$('.form_class')

Source: JavaScript Coder

来源:JavaScript程序员

#12

You can do something like this. It is work fine with me.

你可以这样做。我做得很好。

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

Then in script, add this

然后在脚本中，添加这个

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