March 5, 2000 - Arrayed Buttons | WebReference

March 5, 2000 - Arrayed Buttons

Yehuda Shiran March 5, 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. 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>

Learn more about implementing this buttons in Column 57, The Doc Dialer, Part I.