Javascript to update a text box

I have the following code and javascript functions, basically its a softkeyboard but i need to be able to get the buttons to update the currently focussed form item.

EG, when a user clicks into a text box, they can use the clear button to clear the contents and then use the numbers/letters which will update the currently selected text box, when they click onto the next text box the buttons for numbers/letters will update that form item.

This works if you hard code the form item name into the function so just need to make it dynamic for each form field.

Can anyone help?

Thanks
<script language="JavaScript" type="text/javascript">
<!--
    function num(x) {
        document.softkeyboard.this(focus).value += x;
    }
    function letter(x) {
        document.softkeyboard.this(focus).value += x;
    }
//-->
</script>

Open in new window

<form name="softkeyboard" method="POST" action="#">
    <table>
        <tr>
            <td>Product: </td>
            <td><input type="text" name="txtProductName" size="50" align="center" id="txtProductName" value="<% =RSquoteline("txtProductName") %>"></td>
        </tr>
        <tr>
            <td>Quantity: </td>
            <td><input type="text" name="intQty" size="5" align="center" id="intQty" value="<% =RSquoteline("intQty") %>"></td>
        </tr>
        <tr>
            <td>Price (<%=strCurrencySymbol%>): </td>
            <td><input type="text" name="intPrice" size="5" align="center" id="intPrice" value="<% =formatNumber(RSquoteline("intPrice"),2) %>"></td>
        </tr>
        <tr>
            <td>Vat Rate: </td>
            <td><input type="text" name="intPrice" size="5" align="center" id="Text1" value="<% =RSquoteline("intVatRate") %>"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Update</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <table style="border: 1px; width: 100%;" cellpadding="5" cellspacing="0">
	                <tr>
		                <td align="center">
                            <INPUT class="KeyboardButton" TYPE="button" value="  1  " onClick="num('1')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  2  " onClick="num('2')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  3  " onClick="num('3')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  4  " onClick="num('4')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  5  " onClick="num('5')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  6  " onClick="num('6')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  7  " onClick="num('7')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  8  " onClick="num('8')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  9  " onClick="num('9')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  O  " onClick="num('0')">
                        <br>
                            <INPUT class="KeyboardButton" TYPE="button" value="  Q  " onClick="letter('Q')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  W  " onClick="letter('W')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  E  " onClick="letter('E')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  R  " onClick="letter('R')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  T  " onClick="letter('T')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  Y  " onClick="letter('Y')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  U  " onClick="letter('U')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  I  " onClick="letter('I')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  O  " onClick="letter('O')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  P  " onClick="letter('P')">
                        <br>
                            <INPUT class="KeyboardButton" TYPE="button" value="  A  " onClick="letter('A')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  S  " onClick="letter('S')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  D  " onClick="letter('D')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  F  " onClick="letter('F')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  G  " onClick="letter('G')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  H  " onClick="letter('H')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  J  " onClick="letter('J')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  K  " onClick="letter('K')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  L  " onClick="letter('L')">
                        <br>
                            <INPUT class="KeyboardButton" TYPE="button" value="  Z  " onClick="letter('Z')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  X  " onClick="letter('X')">
			                <INPUT class="KeyboardButton" TYPE="button" value="  C  " onClick="letter('C')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  V  " onClick="letter('V')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  B  " onClick="letter('B')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  N  " onClick="letter('N')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  M  " onClick="letter('M')">           
		                <br>
			                <INPUT class="KeyboardButton" TYPE="button" value=" Clear " onClick="document.softkeyboard.this(focus).value = ''; ">
                            <INPUT class="KeyboardButton" TYPE="button" value="  -  " onClick="letter('-')">
		                </td>
	                </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

Open in new window

net-workxAsked:
Who is Participating?
 
kelvinwkwCommented:
<script language="JavaScript" type="text/javascript">
<!--
            var field = '';
            function setField(v){
                  field = v;
            }
    function num(v) {
           field.value += v;
    }
    function letter(v) {
          if ( v == "" )
                field.value = "";
          else if ( v == "-" ){
                field.value = field.value.substring(0, field.value.length-1);
          }else
                        field.value += v;
    }
//-->
</script>

<form name="softkeyboard" method="POST" action="#">
    <table>
        <tr>
            <td>Product: </td>
            <td><input type="text" name="txtProductName" size="50" align="center" id="txtProductName" value="sss" onblur="setField(this);"></td>
        </tr>
        <tr>
            <td>Quantity: </td>
            <td><input type="text" name="intQty" size="5" align="center" id="intQty" value="1" onblur="setField(this);"></td>
        </tr>
        <tr>
            <td>Price (tm): </td>
            <td><input type="text" name="intPrice" size="5" align="center" id="intPrice" value="1" onblur="setField(this);"></td>
        </tr>
        <tr>
            <td>Vat Rate: </td>
            <td><input type="text" name="intPrice" size="5" align="center" id="Text1" value="sss" onblur="setField(this);"></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Update</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center;">
                <table style="border: 1px; width: 100%;" cellpadding="5" cellspacing="0">
                      <tr>
                            <td align="center">
                            <INPUT class="KeyboardButton" TYPE="button" value="  1  " onClick="num('1')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  2  " onClick="num('2')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  3  " onClick="num('3')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  4  " onClick="num('4')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  5  " onClick="num('5')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  6  " onClick="num('6')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  7  " onClick="num('7')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  8  " onClick="num('8')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  9  " onClick="num('9')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  O  " onClick="num('0')">
                        <br>
                            <INPUT class="KeyboardButton" TYPE="button" value="  Q  " onClick="letter('Q')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  W  " onClick="letter('W')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  E  " onClick="letter('E')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  R  " onClick="letter('R')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  T  " onClick="letter('T')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  Y  " onClick="letter('Y')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  U  " onClick="letter('U')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  I  " onClick="letter('I')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  O  " onClick="letter('O')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  P  " onClick="letter('P')">
                        <br>
                            <INPUT class="KeyboardButton" TYPE="button" value="  A  " onClick="letter('A')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  S  " onClick="letter('S')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  D  " onClick="letter('D')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  F  " onClick="letter('F')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  G  " onClick="letter('G')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  H  " onClick="letter('H')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  J  " onClick="letter('J')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  K  " onClick="letter('K')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  L  " onClick="letter('L')">
                        <br>
                            <INPUT class="KeyboardButton" TYPE="button" value="  Z  " onClick="letter('Z')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  X  " onClick="letter('X')">
                                  <INPUT class="KeyboardButton" TYPE="button" value="  C  " onClick="letter('C')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  V  " onClick="letter('V')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  B  " onClick="letter('B')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  N  " onClick="letter('N')">
                            <INPUT class="KeyboardButton" TYPE="button" value="  M  " onClick="letter('M')">          
                            <br>
                                  <INPUT class="KeyboardButton" TYPE="button" value=" Clear " onClick="letter(''); ">
                            <INPUT class="KeyboardButton" TYPE="button" value="  -  " onClick="letter('-')">
                            </td>
                      </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
0
 
Michel PlungjanIT ExpertCommented:
Interesting using onblur for this...
Would onfocus not be more correct?

Also please wrap in [ code ] tags or past into the code editor (link under each comment field)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.