37

My button uses AJAX to add information to the database and change the button text. However, I wish to have the button disabled after one click (or else the person can spam the information in the dataabase). How do I do this?

HTML

<button class="btn btn-lg btn-primary" id='roommate_but' onclick='load(<?php echo $user_id;?>)'><span class="glyphicon glyphicon-plus"></span> Add Person</button>

Javascript / AJAX / JQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

function load(recieving_id){                                    
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    } else{
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
            document.getElementById("roommate_but").innerHTML =  xmlhttp.responseText;


        }

    }

xmlhttp.open('GET','include.inc.php?i=' + recieving_id, true);

xmlhttp.send();


}
user3377126
  • 2,091
  • 4
  • 32
  • 39
  • 2
    Do you actually have jQuery included on the page? I am asking because - although you tagged this question with `jQuery` - there is no jQuery being used in your code. So the answers could vary strongly depending whether you can use jQuery or not. – Steve May 11 '14 at 21:08
  • Yes, I am using JQuery. I edited my original post to show the link to JQuery. Any suggestions to disable the button after one click? – user3377126 May 11 '14 at 21:11
  • 4
    Please **do not** use plain XHR if you are already using jQuery. It's extremely ugly to mix both. – ThiefMaster May 11 '14 at 21:27

4 Answers4

43

*Updated

jQuery version would be something like below:

function load(recieving_id){
    $('#roommate_but').prop('disabled', true);
    $.get('include.inc.php?i=' + recieving_id, function(data) {
        $("#roommate_but").html(data);
    });
}
Manoj Yadav
  • 6,560
  • 1
  • 23
  • 21
  • When I added it in the load function, the button is still clickable and it stopped its function to add things to the database and change the button's text. Any particular placement for that code to make sure it works with the buttons other features? – user3377126 May 11 '14 at 21:20
  • After `ajax` success remove `disabled`, answer updated – Manoj Yadav May 11 '14 at 21:26
  • I replaced the entire load function with your load function (therefore replacing AJAX for Jquery) and it still doesn't disable the button after one click (still clickable). However, it still is able to do the same thing that AJAX did, go to another page, add something to db, and change button text. If it helps, I am using a bootstrap button. Any thing I can still do? – user3377126 May 11 '14 at 21:45
  • 1
    If you want to disable the button after one click then remove `$('#roommate_but').prop('disabled', false);`, answer updated – Manoj Yadav May 11 '14 at 21:53
  • 2
    You would get a lot more thumbs up if you make this answer more generic for the title of the question: "Disable button after click in JQuery" which shows up as top result in google. Include info on disabling directly int he answer for example/. – Andrew Dec 15 '15 at 16:04
39

You can do this in jquery by setting the attribute disabled to 'disabled'.

$(this).prop('disabled', true);

I have made a simple example http://jsfiddle.net/4gnXL/2/

kplates
  • 700
  • 1
  • 7
  • 16
  • 1
    You should know when to use `attr` and when to use `prop`. This should be done using `prop`. You can read more about it [here](https://stackoverflow.com/questions/5874652/prop-vs-attr). – Adam Merrifield May 11 '14 at 21:23
  • Yeah, I think Adam is right. When I tried this code: $('roommate_but').click(function(){ $(this).attr('disabled','disabled'); }); , the button was still not disabled. So I just have to change attr to prop right? Any certain place I can place the button to get it to work? If it helps, I am actually using a bootstrap button – user3377126 May 11 '14 at 21:27
  • -1 for using attr even though `.prop()` is there for years now. However, both *should* work. – ThiefMaster May 11 '14 at 21:27
  • Note taken @PeterSmith will update. @user337712 `$('roommate_but')` should be `$('#roommate_but')` – kplates May 11 '14 at 21:34
  • And how you disable a button and keep its styles because the attr "disabled" has often an opacity css rule on it. – DiDebru Nov 13 '18 at 12:12
  • Have a look here. You'll need to overwrite the disabled pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled – kplates Nov 14 '18 at 00:21
0

Consider also .attr()

$("#roommate_but").attr("disabled", true); worked for me.

HappyHands31
  • 4,001
  • 17
  • 59
  • 109
-1

This code is used to accept / decline particular course which a student got as part of allotment in the college.

<script>
    $(document).on('click', '.decline', function() {
     var courseid = $(this).attr('data-id');
     $('#accept_'+courseid).prop('disabled', true);
    });

    $(document).on('click', '.accept', function() {
      var courseid = $(this).attr('data-id');
      $('#decline_'+courseid).prop('disabled', true);
    });
    function accept_decline_action(regno,coursecode,coursename,btnval){

      var url = '<?php echo site_url('home/accept_decline_status') ?>';
      $.ajax({
        url: url,
        type: 'POST',
        data: {
          regno: regno,
          coursecode: coursecode,
          coursename: coursename,
          btnval: btnval
        },
        success: function(data) {
          if (btnval == 1) {
            alert("You have accepted the course : "+coursename);
          } else {
            alert("You have declined the course : "+coursename);
          }
        }
      })
    }
</script>
<td role="cell" style="text-align: center;">
  <div>
    <button type="button" data-id = "<?= $mk['coursecode'] ?>" value = 1 
            id = "accept_<?=$mk['coursecode'] ?>" name = "accept" 
            class="btn btn-success accept"                                                             onclick="accept_decline_action('<?= $regno ?>','<?= $mk['coursecode'] ?>');"
            title="Accept" style="border-color:#4CAF50;background-color:                               #4CAF50;">&#10004
    </button>
  </div>
  <div>
    <button type="button" class="btn btn-danger decline" value=0
          data-id="<?= $mk['coursecode'] ?>" id="decline_<?= $mk['coursecode'] ?>"
          name="decline"
          onclick="accept_decline_action('<?= $regno ?>','<?= 
          $mk['coursecode'] ?>');"
          title="Decline" style="background-color:#DC143C; border-color:#DC143C">&#10008
        </button>
      </div>
    </td>
Tyler2P
  • 2,324
  • 26
  • 22
  • 31
fathimafasna
  • 1
  • 2
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 01 '22 at 07:16
  • Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jun 01 '22 at 08:46
  • @Tyler2P Is it clear now? – fathimafasna Jun 02 '22 at 10:14