Defining the Calling Buttons

Sometimes, you may want to disable a button from JavaScript. You need to, for example, when the service called by the button is not available. A Web service called synchronously should not be called again while working on its previous call.

Play around with the following two buttons. Toggle the second button with the first one:

Here is how the buttons are defined:

<BUTTON ID="b1" onclick="toggleOtherButton()">
  Toggle Other Button</BUTTON><BR><BR>
<BUTTON ID="b2" onclick="sayHello()" disabled>
  Say Hello</BUTTON><BR><BR><BR><BR>

The first button toggles the disability of the button below it, through the toggleOtherButton() function:

function toggleOtherButton() {
  if (b2.disabled) {b2.disabled = false;}
  else b2.disabled = true;
}

Here is the whole JavaScript code:

<SCRIPT LANGUAGE="JavaScript">
<!--
function toggleOtherButton() {
  if (b2.disabled) {b2.disabled = false;}
  else b2.disabled = true;
}

function sayHello() {
  alert("Hello there");
}
// -->
</SCRIPT>

We defined our Web service calling buttons as follows:

<BUTTON ID="b1" onclick="callAsynch()">
  Call Asynchronously</BUTTON><BR><BR>
<BUTTON ID="b2" onclick="callSynch()"
  disabled>Call Synchronously</BUTTON><BR><BR><BR><BR>

The second button's disability is triggered by the webService behavior's event handler onserviceavailable:

webServiceCallerBody.onserviceavailable =
  enableServiceCall;

When the Web service becomes available, the Call Synchronously button is enabled. It is disabled when the page initially loads.