how to change button text after succes in ajax

Question

I want to change button text on success.. I want to change this to accepted after success

    <button type="button" onclick="saveData<?php echo $row1->id; ?>()">Accept</button> 
      <script>
      function saveData<?php echo $rrr->id; ?>(){

      $.ajax({
        type: "POST",
        url: "<?php echo base_url().'home/accept_seller/'. $rrr->id; ?>",
        data:{},       
        success:function( data )
        {

        }
       });
  }

My function is properly working because i have used alert after success but i dontknow how to chage its text after success. pls help

Possible duplicate of [jQuery change button text](http://stackoverflow.com/questions/5580616/jquery-change-button-text) — Madhawa Priyashantha, Jul 14 '16 at 12:53

Indrasis Datta · Answer 1 · 2016-07-14T12:57:40.123

3

You can associate a class with the button:

<button type="button" onclick=".." class="submit-btn">Accept</button>

Now, in your AJAX success code, mention the following:

 $.ajax({
    type: "POST",
    url: "<?php echo base_url().'home/accept_seller/'. $rrr->id; ?>",
    data:{},       
    success:function( data ) {
       $(".submit-btn").html("Accepted");   // Add this line
    }
});

edited Jul 14 '16 at 12:57

answered Jul 14 '16 at 12:54

Indrasis Datta

8,692
2
14
32

You have a typo, should be $(".submit-btn").html("Accepted"); – Tom Jul 14 '16 at 12:57
Thanks for pointing it out. :) I've made the necessary modifications. – Indrasis Datta Jul 14 '16 at 12:58
Thank you Object Manipulator and Tom ... its working – Pardeep Jul 14 '16 at 13:01
what if i want to pass this row id ($rrr->id;) with class submit-btn... because if i click accept on one row then it change to accepted in all rows ? – Pardeep Jul 15 '16 at 04:28

score 1 · Answer 2 · answered Jul 14 '16 at 12:59

$.ajax({
  type: "POST",
  url: "<?php echo base_url().'home/accept_seller/'. $rrr->id; ?>",
  data: {},
  success: function(data) {
   $("#btn").text('your new text here'); // add id to your button
  }
});

<button id="btn" type="button" onclick="saveData<?php echo $row1->id; ?>()">Accept</button>

score 0 · Answer 3 · answered Jul 14 '16 at 12:54

1) pass this in function

2) Use .text() function to change text of button.

<button type="button" onclick="saveData<?php echo $row1->id; ?>(this)">Accept</button> 
<script>
          function saveData<?php echo $rrr->id; ?>(obj){
              $.ajax({
                 type: "POST",
                 url: "<?php echo base_url().'home/accept_seller/'. $rrr->id; ?>",
                 data:{},       
                 success:function( data )
                 {
                      $(obj).text("New Text");
                 }
              });
          }
</script>

score 0 · Answer 4 · answered Jul 14 '16 at 12:58

0

HTML : add id in button

<button type="button" id="accept" onclick="saveData<?php echo $row1->id; ?>()">Accept</button>

script:

 success:function( data ) {
       $("#accept").html("accepted");   
    }

answered Jul 14 '16 at 12:58

Dave

3,073
7
20
33

score 0 · Answer 5 · answered Apr 17 '19 at 13:22

0

id; ?>()">Accept function saveDataid; ?>(){

  $.ajax({
    type: "POST",
    url: "<?php echo base_url().'home/accept_seller/'. $rrr->id; ?>",
    data:{},       
    success:function( data )
    {
       $("#buttonid").html('Changetext');
    }
   });

answered Apr 17 '19 at 13:22

Munaf Wadiwala

7
2

Hi, welcome to Stack Overflow. When answering a question that already has many answers, please be sure to add some additional insight into why the response you're providing is substantive and not simply echoing what's already been vetted by the original poster. This is especially important in "code-only" answers such as the one you've provided. – chb Apr 17 '19 at 13:42

how to change button text after succes in ajax

5 Answers5

Linked