POST請求后禁用按鈕
[英]Disabling button after POST Request
問題描述
發布請求后單擊一次后如何禁用按鈕？ 在下面的代碼中，當我單擊按鈕時，發布請求未執行，但按鈕被禁用。
HTML
<form class="col s12" method="POST" action="<?php echo base_url(); ?>do/this">
<button type="submit" name="send" id="my_button"
class="waves-effect waves-green btn">My Button</button>
</form>
JS
document.getElementById("my_button").onclick = function() {
this.disabled = true;
}
2 個解決方案
解決方案1
0 2019-02-12 16:43:02
如果我是你，我會使用jQuery來做到這一點。
像那樣：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.post demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
</body>
</html>
您可以在代碼的這一部分中禁用按鈕：
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
像那樣：
posting.done(function( data ) {
document.querySelector("#send_messages").disabled = true;
});
解決方案2
0 已采納 2019-02-12 16:46:49
document.getElementById("my_button").onclick = function(e) { e.preventDefault(); this.disabled = true; }
<form class="col s12" method="POST" action="<?php echo base_url(); ?>do/this"> <button type="submit" name="send" id="my_button" class="waves-effect waves-green btn">My Button</button> </form>
一個請求后禁用AJAX提交按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.