3

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

Pazrat
  • 93
  • 1
  • 1
  • 9

6 Answers6

4

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

Result

Sasidharan
  • 3,432
  • 3
  • 15
  • 35
  • i tryed to do this but it didnt work the functions just stop working and the buttons are still pressable – Pazrat Sep 26 '13 at 11:03
  • this is the code that i copied from you and then put my functions where they was needed: `$( "#bind" ).click(function(getLocation) { $(this).attr("disabled", "disabled"); $("#unbind").removeAttr("disabled"); }); $( "#unbind" ).click(function(getLocation1) { $(this).attr("disabled", "disabled"); $("#bind").removeAttr("disabled"); });` – Pazrat Sep 26 '13 at 11:05
  • Did you try my fiddle..did u added jquery library references. – Sasidharan Sep 26 '13 at 11:05
  • yup in the head of the page all it does is make my screen go blank – Pazrat Sep 26 '13 at 11:10
  • Can you create a fiddle of yours..I ll fix that for you – Sasidharan Sep 26 '13 at 11:11
  • http://jsfiddle.net/#&togetherjs=05Sqa4AaqK i fixed the jQuery problem the functions wont run – Pazrat Sep 26 '13 at 11:17
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"

Sasidharan
  • 3,432
  • 3
  • 15
  • 35
Satyam Saxena
  • 581
  • 2
  • 10
0

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?

Community
  • 1
  • 1
Marco Lau
  • 539
  • 2
  • 10
  • 22
  • tbh the coding that i have is all working i just cant find any code that works with a html instead of a submit button – Pazrat Sep 26 '13 at 10:32
  • If you haven't, jQuery is good JavaScript library that makes this easier. It shouldn't take long to learn how to disable a button. Just set disabled to true in your function that handles clicking the button. – Marco Lau Sep 26 '13 at 10:36
  • i would but im not the most experienced with jQuery – Pazrat Sep 26 '13 at 10:42
0

You could try something like this:

$('button').click(function(){
  // Add functionality here, then...
  $(this).attr("disabled", true);   
});
D.Alexander
  • 2,774
  • 2
  • 27
  • 21
  • the code that you just posted disabled them before they was clicked – Pazrat Sep 26 '13 at 10:33
  • 1
    It shouldn't, if implemented properly. In my code snippet, disabling the button occurs within a click event handler. So it should not be disabled until actually clicked. You'll of course, need to add your functionality before disabling. Edited my example to illustrate. – D.Alexander Sep 26 '13 at 11:23
  • yee i tryed this and edited for the functions i was using and it still disabled them before they was pressed – Pazrat Sep 26 '13 at 13:03
0

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.

Daniel Varab
  • 223
  • 1
  • 10
  • this did not work it stops the function from running when the button is pressed – Pazrat Sep 26 '13 at 10:41
  • That is correct. For this to work, one obviously has to implement one to change the locationSearched variable when other buttons have been pushed. – Daniel Varab Sep 26 '13 at 12:26
-1

Maybe this will work. Using DOM

function myFunction() {
  document.getElementById("myBtn").disabled = true;
}
Master death
  • 1
  • 1