jQueryでAjaxレスポンス後にサブミットボタンを無効にするには？

Question

jQueryを使用してデータをデータベースに保存するフォームがあります。成功応答では、フォーム上の送信ボタンを無効にして再送信できないようにしたいと考えています。私は試しました$(this).find("button[type='submit']").prop('disabled',true); しかし、それは動作していないと私はなぜ理解していない。誰が何が間違っているのか教えてくれますか？

フォーム

<form action="" id="like_unlike" method="" enctype="multipart/form-data"> 
    <input type="hidden" name="file" value="<?php echo $page_id;?>" /> 
    <input type="hidden" name="userid" value="<?php echo $_SESSION['user_session'];?>" /> 
    <span> <button type="submit" id="like" class="btn btn-default btn-small" name="like"><span class="icon-heart-empty"id="heart"></span> 
    <span class="submit-text" id="count"><?php echo $rowcount?></span></button></span> 
    </form> 

jQueryが

$("#like_unlike").submit(function(e) { //Second Form 
    e.preventDefault(); 
    var url = "update.php"; //Grab URL from form 
    var formdata = $(this).serialize(); 
      console.log(formdata); 
     $.post(url, formdata, //Post the form 
      function(response) { 

    $('#count').html(response); 
     $(this).find("button[type='submit']").prop('disabled',true); 
       }); 
       }); 
    }); 

Answer 1

私はあなたがそれがフォームを参照していないことを知っている必要があり

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

にこのを使用することに気付きましたajaxSettingsが必要です。

Answer 2

jqueryコードから余分な});を削除します。

$("#like_unlike").submit(function(e) { //Second Form 
 
e.preventDefault(); 
 
var url = "update.php"; //Grab URL from form 
 
var formdata = $(this).serialize(); 
 
console.log(formdata); 
 
$(this).find("button[type='submit']").prop('disabled',true); 
 
$.post(url, formdata, //Post the form 
 
    function(response) { 
 
     $('#count').html(response); 
 
    $(this).find("button[type='submit']").prop('disabled',true); 
 
    
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" id="like_unlike" method="" enctype="multipart/form-data"> 
 
    <input type="hidden" name="file" value="1" /> 
 
    <input type="hidden" name="userid" value="23" /> 
 
    <span> <button type="submit" id="like" class="btn btn-default btn-small" name="like"><span class="icon-heart-empty"id="heart"></span> 
 
    <span class="submit-text" id="count">Row Count</span></button> 
 
    </span> 
 
</form>

あなたはIDに基づいて、ボタンを無効にすることができ、他の方法のような

$("#count").attr("disabled", "disabled");