Question

Fiddle和代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 1

禁用表单发布设置按钮

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有很多方法可以做到这一点。你可以简单地禁用/隐藏提交按钮或添加一个变量来跟踪表单是否被提交，如下面的代码所示：

var isSubmited = false;
$(".addtowatchlistform").submit(function(e) {
  if (isSubmited) return false;
  isSubmited = true;
  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;
});

Answer 3

<强>样本

＆＃13;

$(".addtowatchlistform").submit(function(e) {
  $("#addtowatchlistbutton").attr("disabled", true); //disable it
  
  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); 
        
    $("#addtowatchlistbutton").attr("disabled", false); //enable it
    
    } catch (e) {
        console.log("json encoding failed");
        return false;
    }
});*/
  $.ajax({
     type: "POST",
      url: url,
      data: $(this).serialize(),
      success: function() {
        // callback code here
        $("#addtowatchlistbutton").attr("disabled", false); //enable it
       }
    })
  return false;
});

＆＃13;

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

＆＃13;

$("#addtowatchlistbutton").attr("disabled", true);使用它来启用/禁用该元素。点击禁用它，并在成功时再次启用它。

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

3 个答案: