i m trying to creat a touch screen page in which i have 6 textboxs like
Phone NO: textbox1 - textbox2 - textbox3
Confirm Phone No:textbox4 - textbox5 - textbox6
and 10 buttons with value 0,1,2,3,4,5,6,7,8 and 9 like
Expand|Select|Wrap|Line Numbers
- <table cellspacing="0" style="width: 398px; height: 156px">
- <tr>
- <td style="width: 55px" align="center">
- <input id="Button1" class="button" type="button" value="1" onclick="add(1)" style="width: 117px; height: 70px" /></td>
- <td style="width: 10px" align="center">
- <input id="Button2" type="button" value="2" onclick="add(2)" style="width: 117px; height: 70px"/></td>
- <td style="width: 3px" align="center">
- <input id="Button3" type="button" value="3" onclick="add(3)" style="width: 117px; height: 70px"/></td>
- </tr>
- <tr>
- <td style="width: 55px" align="center">
- <input id="Button4" type="button" value="4" onclick="add(4)" style="width: 117px; height: 70px"/></td>
- <td style="width: 10px" align="center">
- <input id="Button5" type="button" value="5" onclick="add(5)" style="width: 117px; height: 70px"/></td>
- <td style="width: 3px" align="center">
- <input id="Button6" type="button" value="6" onclick="add(6)" style="width: 117px; height: 70px"/></td>
- </tr>
- <tr>
- <td style="width: 55px" align="center">
- <input id="Button7" type="button" value="7" onclick="add(7)" style="width: 117px; height: 70px"/></td>
- <td style="width: 10px" align="center">
- <input id="Button8" type="button" value="8" onclick="add(8)" style="width: 117px; height: 70px"/></td>
- <td style="width: 3px" align="center">
- <input id="Button9" type="button" value="9" onclick="add(9)" style="width: 117px; height: 70px"/></td>
- </tr>
- <tr>
- <td style="width: 55px" align="center">
- </td>
- <td style="width: 10px" align="center">
- <input id="Button10" type="button" value="0" onclick="add(0)" style="width: 117px; height: 70px"/></td>
- <td style="width: 3px" align="center">
- </td>
- </tr>
- </table>
i want that maxlength on textbox1 is 3 and when it feel with 3 nos then focus goes to textbox2 (maxlength=3) and nos enter into it and when it feel with 3 nos then focus goes to textbox3 and nos enter into it .
i make one javascript function to enter nos in textbox
Expand|Select|Wrap|Line Numbers
- function add(number)
- {
- //if(document.getElementById("no").maxlength < "3")
- {
- document.getElementById("no").value=document.getElementById("no").value + number;
- } // no is id of textbox1
and how to switch on second after entring 3 nos in firsttextbox
how can i do this using javascript