March 28, 2000 - Arrayed Buttons | WebReference

March 28, 2000 - Arrayed Buttons

Yehuda Shiran March 28, 2000
Arrayed Buttons
Tips: March 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The phone keypad is built as a 3x4 table, mimicking a real phone faceplate. Each cell of the table contains an INPUT button. Let's look at one of the buttons, say 4:

<INPUT NAME="button4" TYPE="BUTTON" VALUE=" 4 GHI " onclick="numPressed(4)">

The button specification includes the VALUE of the button (the text printed on it), its NAME, and its onclick event handling. The event handling is the numPressed() function. Each button is sending a number between 0 to 11. The key itself is sent for keys 0 to 9. The asterix (*) button is sending a value of 10 and the pound sign (#) is sending a value of 11. The whole table is positioned within a FORM element, to facilitate the buttons inside. Here is the form:

<FORM NAME="phonePlate">
<TABLE BORDER=2WIDTH=150 HEIGHT=60CELLPADDING=1 CELLSPACING=5>
<TR>
  <TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 1       "
       onclick="numPressed(1)"></TD>
  <TD><INPUT NAME="button2" TYPE="BUTTON" VALUE=" 2 ABC "
       onclick="numPressed(2)"></TD>
  <TD><INPUT NAME="button3" TYPE="BUTTON" VALUE=" 3 DEF "
       onclick="numPressed(3)"></TD>
  <TD ROWSPAN="4" VALIGN="top" NOWRAP><SPAN ID="foundSoFar"></SPAN></TD>
</TR>
<TR>
  <TD><INPUT NAME="button4" TYPE="BUTTON" VALUE=" 4 GHI "
       onclick="numPressed(4)"></TD>
  <TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 5 JKL  "
       onclick="numPressed(5)"></TD>
  <TD><INPUT NAME="button1" TYPE="BUTTON" VALUE=" 6 MNO"
       onclick="numPressed(6)"></TD>
</TR>
<TR>
  <TD><INPUT NAME="button7" TYPE="BUTTON" VALUE=" 7 PRS"
       onclick="numPressed(7)"></TD>
  <TD><INPUT NAME="button8" TYPE="BUTTON" VALUE=" 8 TUV "
       onclick="numPressed(8)"></TD>
  <TD><INPUT NAME="button9" TYPE="BUTTON" VALUE=" 9 WXY"
       onclick="numPressed(9)"></TD>
</TR>
<TR>
  <TD><INPUT NAME="button*" TYPE="BUTTON" VALUE=" *        "
       onclick="numPressed(10)"></TD>
  <TD><INPUT NAME="button0" TYPE="BUTTON" VALUE=" 0        "
       onclick="numPressed(0)"></TD>
  <TD><INPUT NAME="button#" TYPE="BUTTON" VALUE=" #        "
       onclick="numPressed(11)"></TD>
</TR>
</TABLE>
</FORM>

The display on the right hand side of the keypad is created by a fourth column of the table, spanning all four rows, and including a SPAN element:

<SPAN ID="foundSoFar"></SPAN>

See an example for using the phone pad in Column 57, The Doc Dialer.