Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript to update a text box

Posted on 2011-10-27
2
Medium Priority
?
276 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:net-workx
2 Comments
 
LVL 11

Accepted Solution

by:
kelvinwkw earned 2000 total points
ID: 37042419
<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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37042907
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question