How to disable submit button after Ajax response with jQuery?

Question

I have a form that saves data to a database with jQuery. On a success response I want to disable the submit button on the form so it can't be resubmitted. I've tried $(this).find("button[type='submit']").prop('disabled',true); but it's not working and I don't understand why. Can anyone tell me what's wrong?

Form

 <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);
              });
              });
     });

Why not just use the id to find the element? `$("#like").prop('disabled', true);` — mrogers, Jan 03 '17 at 22:48
Probably because `this` is not what you think it is http://stackoverflow.com/questions/8684669/jquery-this-problems-with-post — Paul Abbott, Jan 03 '17 at 22:52

score 0 · Answer 1 · edited Jan 04 '17 at 05:32

0

I've noticed that you use this in

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

You should know that it doesn't refer to the form you want but ajaxSettings.

edited Jan 04 '17 at 05:32

RBT

24,161
21
159
240

answered Jan 04 '17 at 05:24

SevenNights

1

xrcwrn · Answer 2 · 2017-01-04T06:40:32.673

Remove extra }); from jquery code.

$("#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>

Other way you can disable button based on id like

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

Thanks for this. Whilst your snippet works here when I use it it just makes the entire submit button disappear... — JulianJ, Jan 04 '17 at 09:08

How to disable submit button after Ajax response with jQuery?

2 Answers2