用jQuery提交後禁用按鈕

我知道有很多關於它的問題，但我嘗試了幾種解決方案，沒有任何效果。用jQuery提交後禁用按鈕

在我的Django應用程序我有一個表格：

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

我wan't一旦用戶提交表單禁用按鈕。使用其他問題，我嘗試了幾件事情，例如：

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

當我點擊時，按鈕被禁用......但表單未提交。對於每一次嘗試，我都有同樣的問題：按鈕被禁用或表單被提交。我找不到如何做到這一點...

我使用的是Chrome。任何想法，爲什麼我有這個問題？感謝您的幫助。

來源

2012-11-28 Juliette Dupuis

你能設置''

試試這個：

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

來源

2012-11-28 13:50:20 Johann

完美！有用。我儘快接受答案 –

+12

這會使提交按鈕值不被提交。通常不是問題，但可以。 – Jake

嘗試，這樣，

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

來源

2012-11-28 13:52:25

仍然沒有提交... –

@JulietteDupuis更新， –

你可以在父窗體的submit事件禁用它：

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

來源

2012-11-28 13:52:28 Sampson

這樣的事情可能會奏效。

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

來源

2012-11-28 13:53:38

這個怎麼樣？

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

我會說，而不是禁用，隱藏它。

如果你想要去disabled

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

來源

2012-11-28 13:55:48

對我來說，我試過這個，工作正常，但它只隱藏確認按鈕，因爲我已確認並取消我的網頁上的按鈕，我希望兩個按鈕都隱藏 onClick雖然沒有爲我工作。 – raja777m

我的變種，禁用按鈕，沒有直接禁止，但只有vidible隱藏：

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

來源

2013-09-15 18:24:12 geniv

對我來說，我試過這個，工作正常，但它只隱藏確認按鈕，因爲我已確認並取消我的網頁上的按鈕，並且我希望兩個按鈕都被隱藏起來 – raja777m

我喜歡這更好：

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

這樣它也可以防止輸入密鑰多次提交

來源

2014-01-17 15:33:31 Cenas

不是，它不提交 – raja777m

我正在使用Chrome。任何想法，爲什麼我有這個問題？

好了，我第一次處理了這個問題，我解決了這個問題是這樣的：

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

這完美地工作，但......在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(); 
    }); 
}

這在Mozilla Firefox然而，這兩個工作，之後，一些使用IE瀏覽器的舊版本我們的用戶的經歷有兩個的提交的麻煩。也就是說，由javascript啓動的那個，而瀏覽器忽略onclick的事實並且只是提交。我猜，這可以通過e.preventDefault修復。

來源

2016-01-22 13:23:00

我喜歡這個，不必遍歷DOM。在setTimeout函數認沽功能，這使得使提交和禁用按鈕後，即使是的setTimeout 0

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

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

來源

2016-04-25 16:20:47

如果你不希望一個元素是雙擊，使用。一（）

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

.one()

來源

2016-08-01 07:24:35

上了車瀏覽器的問題，並沒有提交表單。嘗試了很多不同的代碼，這是什麼工作最適合我（和期待最好IMO）：

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

更換form_id與形式的ID。類工作太當然：$('.form_class')

來源：JavaScript Coder

來源

2016-11-11 16:37:09

你可以做這樣的事情。這對我來說工作很好。

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

然後在腳本中，添加此

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

來源

2017-05-02 06:40:39 JunieL

用jQuery提交後禁用按鈕

回答

相關問題