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

Question

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>

FYI, I removed the PHP tag, since the question is all about JS. — M. Eriksson
– M. Eriksson, Commented Dec 23, 2022 at 11:06

Bhavik · Accepted Answer · 2022-12-23 10:59:37Z

1

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

answered Dec 23, 2022 at 10:59

Bhavik

5032 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kashmiri Ammar Over a year ago

Works perfect (y)

Tyler2P · Accepted Answer · 2022-12-24 11:52:41Z

1

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

edited Dec 24, 2022 at 11:52

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Dec 23, 2022 at 10:57

Mower

1872 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related