禁用表單提交上的提交按鈕

Question

單擊后，我編寫了此代碼以禁用我網站上的提交按鈕：

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

不幸的是，它不發送表格。 我怎樣才能解決這個問題？

編輯我想綁定提交，而不是表單:)

Answer 1

在onSubmit() ：

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

發生的事情是您在實際觸發提交事件之前完全禁用按鈕。

您可能還應該考慮使用 ID 或 CLASSes 命名您的元素，這樣您就不會選擇頁面上所有提交類型的輸入。

演示： http : //jsfiddle.net/userdude/2hgnZ/

（注意，我使用preventDefault()並return false以便表單在示例中不會實際提交；在您使用時不要使用它。）

Answer 2

特別是如果有人在Chrome遇到問題：

要解決此問題，您需要做的是使用<form>元素中的onSubmit標記將提交按鈕設置為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>

Answer 3

禁用的控件不提交它們的值，這無助於了解用戶是否單擊了保存或刪除。

所以我將按鈕值存儲在一個隱藏中，它確實被提交了。 隱藏的名稱與按鈕名稱相同。 我通過button的名稱調用我所有的button 。

例如<button type="submit" name="button" value="save">Save</button>

基於此，我找到了here 。 只需將單擊的按鈕存儲在變量中。

$(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;
}

Answer 4

這應該在您的應用程序中處理它。

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

Answer 5

簡單有效的解決辦法是

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

來源：這里

Answer 6

更簡單的方法。 我試過這個，它對我來說很好：

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

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

Answer 8

如何禁用提交按鈕

只需在 onclick 事件上調用一個函數，然后...返回 true 以提交和 false 以禁用提交。 或者在 window.onload 上調用一個函數，如：

window.onload = init();

並在 init() 中做這樣的事情：

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

Answer 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 等），這將取消提交事件。

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

Answer 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); 
}

注意：這次您的案例可能是多個，可能需要更多條件

Answer 12

想要提交按鈕的值並防止雙重表單提交？

如果您使用的是 submit 類型的按鈕，並且還想提交按鈕的值，如果按鈕被禁用，則不會發生這種情況，您可以設置一個表單數據屬性，然后進行測試。

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });

Answer 13

簡單方法：

Javascript 和 HTML：

 $('form#id').submit(function(e){ $(this).children('input[type=submit]').attr('disabled', 'disabled'); // this is just for demonstration e.preventDefault(); return false; }); <!-- begin snippet: js hide: false console: true babel: false -->

 <form id="id"> <input type="submit"/> </form>

注意：在 chrome 和 edge 上完美運行。

Answer 14

最簡單的純 javascript 解決方案是簡單地禁用按鈕：

<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
  <button id="blahButton">Submit</button>
</form>

document.getElementById('blahButton').disabled = true ;

它適用於/沒有onSubmit 。 形式保持可見，但沒有任何東西可以疊加。

Answer 15

就我而言，我不得不稍微延遲一下，以便表單正確提交，然后禁用按鈕

$(document).on('submit','#for',function()
                {
                    var $this = $(this);
                    setTimeout(function (){
                        $this.find(':input[type=submit]').attr('disabled', 'disabled')
                    },1);
                });

Answer 16

如前所述，如果在“提交”按鈕上添加了禁用的屬性，則不會發送數據。

@Valamas的技巧起作用，但是我找到了一個很容易實現的解決方案：

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

然后像這樣在CSS中定義禁用的類：

.disabled{
    cursor:not-allowed;
}

這將與disabled =“ disabled”相同，但是不會對發送的數據造成影響。