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





}