Switch class and disable button

Question

Is it possible to also switch the class to a loading graphic and disable the button when onClick is called and before the location.href is launched? There is a delay and I'm hoping to avoid double clicks. Can someone show me a sample of this?

<button type="button" class="MoreTides" onclick="location.href='http://www.domain.com/tides/parser_iphone.php?stats=$xml->stationid'">View Graph - Change Dates</button>

yes... [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript), [How to disable html button using JavaScript?](http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript) Generally a good idea to search before asking a question. — sachleen, Oct 14 '12 at 02:11

score 2 · Accepted Answer · answered Oct 14 '12 at 02:23

Something like this might be a start:

<script>
  function loadPage(input) {
    input.disabled = true;
    input.className = "loadingButton"; // define how this should look in CSS
    location.href='http://www.domain.com/tides/parser_iphone.php?stats=$xml->stationid';
  }
</script>

<button type="button" class="MoreTides" onclick="loadPage(this)">View Graph - Change Dates</button>

Switch class and disable button

1 Answers1