javascript - 如何在提交表单之前禁用按钮

Question

Fiddle和代码:

$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
  $.post(url, data, function(data) { 
    try {
        data = JSON.parse(data);
        $(form).children("button").css('color',data.watchlisticoncolor); 
		$(form).children("button").attr('data-tooltip',data.addremove + " YOUR WATCHLIST");
        $(form).children("input#addedornotsend").attr('value',data.addedornotsend); 

    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form class="addtowatchlistform" action="insert.php" method="POST" >

		<input id="addedornotsend" type="hidden" name="addedornot" value="'.$addedornot.'"/>
		<button id="addtowatchlistbutton" type="submit" name="tmdb_id"  data-tooltip="'.$addremove.' YOUR WATCHLIST" class="material-icons">Submit please</button>
		<span class="result"></span> 
		</form>

此代码提交表单而不重新加载页面(ajax)。但问题是，用户可以在提交表单时多次提交表单。

我想在提交表单时禁用该按钮。我怎样才能做到这一点？

Answer 1

表单上的帖子设置按钮已禁用

$(".addtowatchlistform").submit(function(e) {
  var data = $(this).serialize();
  var url = $(this).attr("action");
  var form = $(this); // Add this line
$("#addtowatchlistbutton").attr('disabled','disabled');
  $.post(url, data, function(data) { 
    try {
        data = JSON.parse(data);
        $(form).children("button").css('color',data.watchlisticoncolor); 
		$(form).children("button").attr('data-tooltip',data.addremove + " YOUR WATCHLIST");
        $(form).children("input#addedornotsend").attr('value',data.addedornotsend); 
 $("#addtowatchlistbutton").removeAttr('disabled');
    } catch (e) {
        console.log("json encoding failed");
$("#addtowatchlistbutton").removeAttr('disabled');
        return false;
    }
});
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form class="addtowatchlistform" action="insert.php" method="POST" >

		<input id="addedornotsend" type="hidden" name="addedornot" value="'.$addedornot.'"/>
		<button id="addtowatchlistbutton" type="submit" name="tmdb_id"  data-tooltip="'.$addremove.' YOUR WATCHLIST" class="material-icons">Submit please</button>
		<span class="result"></span> 
		</form>