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

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

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.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint