Disable Button and change button text on click after ajax success function call-CodePudding

I am working on PHP ajax project. I want to disable and change the button's text after the success function call in ajax. my ajax function is working fine and I am getting the desired output. just one thing is remaining which is the button thing. Here is my code for ajax.

 $(document).ready(function () {

  $(document).on("click", "#add_btn", function (e) {
    e.preventDefault();
    var id = $(this).val();
    var cus_id = $('#customer_selection').val();
    if (!cus_id) {
      alert("Please select a customer")

    } else {

      $.ajax({
        url: "add_selection_script.php",
        type: "POST",
        data: {
          id: id,
          cus_id: cus_id
        },
        success: function (data) {
          // here i want to change button text and disable for click button only
            not others because my buttons are dynamic
          prop("disabled", true);
          html("Added");

        }
      });
    }
  });
});

here is the button code

<button type="submit" id="add_btn" value="<? echo $id; ?>">Add to selection</button>

CodePudding user response：

you have to give identifier for which you have to make changes

$("#add_btn").prop('disabled', true);
$("#add_btn").html('Added');

if your button is dynamic, then you can do below: on click of button, get your element in a variable

var element = $(this);

and in your success function, write this

element.prop('disabled', true);
element.html('Added');

CodePudding user response：

You need to set the attribute of the button and use .html or .text to change the text.

success: function (data) {
       $('#add_btn').attr('disabled', true);
       $('#add_btn').html('changed text');
    }