how to disable a html button after it has been clicked not a submit button

Question

hi i have a html button and when you press it, it should give you the distances of shops from where you are so when you press it they appear now the problem is because it is in early stages the information is printed everytime the button is pressed i would just like to now how to disable it when it has been pressed once and then reactivate it when another button has been pressed this is not a submit button my code for the button is :

   <button onclick="getLocation()">Search</button>

any help would be much appreciated thanks in advance

Answer 1

I think its very clear for you..

Call your getlocation() method inside the click event..

Working fiddle

Code

$( "#bind" ).click(function() {
   $(this).attr("disabled", "disabled");
   $("#unbind").removeAttr("disabled");
});
$( "#unbind" ).click(function() {
     $(this).attr("disabled", "disabled");
     $("#bind").removeAttr("disabled");
});

Output

Answer 2

Do like that:

    <script type="text/javascript">
    var clicked = false;
    function disableMe() {
        if (document.getElementById) {
            if (!clicked) {
                document.getElementById("myButton").value = "thank you";
                clicked = true;
                return true;
            } else {
                return false;
            }
        } else {
            return true;
        }
    }
</script>
<button type="button" id="myButton" onClick="return disableMe()" value="OK">

Or, you can do this: onclick="this.disabled=true"

Answer 3

There are a number of ways to do this. Usually, you could use JavaScript to edit the attributes. It's best to read on this and ask if you have problems with your coding.

You should find what you need on this post: How to disable html button using JavaScript?

Answer 4

You could try something like this:

$('button').click(function(){
  // Add functionality here, then...
  $(this).attr("disabled", true);   
});

Answer 5

This can be solved in several ways, but the most intuitive way would most likely be to feed the application (which this appears to be) which state it is in. Such as:

var locationSearched = false //global scope of the application
getLocation() {
  if(locationSearched) {
      //do nothing or inform user of the state + wait for alternative button click
  } else {
      //execute the method and request to retrieve the location
      state = true
  }
}

Alternatively this could be passed as a parameter to the method. This does seem abit wonky in my opinion tho. With the solution suggested you can perform logical behavior in relation to the state, making it abit more scalable.

Answer 6

Maybe this will work. Using DOM

function myFunction() {
  document.getElementById("myBtn").disabled = true;
}