Editing value of text field

@ProGrapeNov 24.2006

Hiya,

I am just getting started with JavaScript and am writing a rudimentary calculator as an exercise. Here is my question: how do I change the value of a text field? For instance, this is an example of what I have tried:

[code=html] …

// whatever is type in the text field, change the value to the input string. function change (input) { // here is where I have a problem document.text1.value = input; }

…

<body> <input type = “text” name = “text1” onChange = “change(“boink”)”> </body> </html> [/code]

to post a comment

JavaScript

14 Comments(s) _↴

@developmentNov 24.2006 — #

[code=php]
 <script>
 
  function change (input)
  {
   // here is where I have a problem
   document.form_name.text1.value = input;
  }
 
 </script>
 
 <body>
 <form name="form_name" id="form_name">
 <input type="text" name="text1" id="text1">
 <a href="javascript:change('mariguana');">Change input</a>
 </form>
 </body>
 </html>[/code]

don't forget the form tag, names and ids.

@ProGrapeauthorNov 24.2006 — #Hi,

Yes, that works, and gives me a better idea of how to do it, but I was looking for some way to update a textfield as I type into another one (yes, the example shows updating the same one, but the code should be similar). Somehow I thought there would be some way to process a text-input event.

Also, your answer raises the question of which param is used in referring to a text field or form, the name or the id?

Thanks

Grape

@ProGrapeauthorNov 24.2006 — #Sorry to post twice in my own thread. To be more specific, using what Development told me, I was able to make it so that when I change the value in one text field, it does send a new value to another text field, but

it doesn't show the change until I click somewhere else on the page!

This is disastrous, as I need it to show up immediately as I type! Thanks again for any suggestions.

@developmentNov 25.2006 — #probably you use onChange=, try with onkeypress=

@ProGrapeauthorNov 25.2006 — #Thank you very much! That has worked perfectly!

@ProGrapeauthorNov 25.2006 — #I spoke too soon.

@ProGrapeauthorNov 25.2006 — #ok, this is what happened. It does update the text field now, but there seems to be a delay. That is, it often updates with the previous value. Here is some code. If you type into the first two text boxes, the next two are updated to say whether the input is valid. In this case, input is valid if it is empty or a number with no more than one decimal point and no more than two digits after the decimal if there is one.

[code=html]<html>
 <head>
 <script type = "text/javascript">
 <!--
 function processInput (type) {
 var input;
 if (type == 'pst')
 input = document.form.pst.value;
 else if (type == 'gst')
 input = document.form.gst.value;
 if (isValid(input)) {
 if (type == 'pst')
 document.form.pst_amt.value = 'valid';
 else if (type == 'gst')
 document.form.gst_amt.value = 'valid';
 }
 else {
 if (type == 'pst')
 document.form.pst_amt.value = 'invalid';
 else if (type == 'gst')
 document.form.gst_amt.value = 'invalid';
 }
 }
 function isValid (input) {
 var length = input.length;
 var isValid = true;
 var curChar;
 var numDots = 0;
 for (i = 0; i < length; i++) {
 curChar = input.charAt(i);
 if (!(curChar == '0' || curChar == '1' ||
 curChar == '2' || curChar == '3' ||
 curChar == '4' || curChar == '5' ||
 curChar == '6' || curChar == '7' ||
 curChar == '8' || curChar == '9' ||
 curChar == '.'))
 isValid = false;
 if (curChar == '.')
 numDots++;
 }
 if (numDots > 1)
 isValid = false;
 if (numDots == 1 && (length - input.indexOf('.')) > 3)
 isValid = false;
 return isValid;
 }
 // -->
 </script>
 </head>
 <body>
 <form name = "form" id = "form">
 <table>
 <tr>
 <td>
 PST:
 </td>
 <td>
 <input type = "text" name = "pst" id = "pst" onKeyPress  = "javascript:processInput('pst')">
 </td>
 </tr>
 <tr>
 <td>
 GST:
 </td>
 <td>
 <input type = "text" name = "gst" id = "gst" onKeyPress = "javascript:processInput('gst')">
 </td>
 </tr>
 <tr>
 <td>
 PST Amount:
 </td>
 <td>
 <input type = "text" name = "pst_amt" id = "pst_amt" onfocus = "this.blur()">
 </td>
 </tr>
 <tr>
 <td>
 GST-only Amount:&nbsp;&nbsp;&nbsp;
 </td>
 <td>
 <input type = "text" name = "gst_amt" id = "gst_amt" onfocus = "this.blur()">
 </td>
 </tr>
 <tr>
 <td>
 Subtotal:
 </td>
 <td>
 <input type = "text" name = "subtot" onfocus = "this.blur()">
 </td>
 </tr>
 <tr>
 <td>
 Total:
 </td>
 <td>
 <input type = "text" name = "tot" onfocus = "this.blur()">
 </td>
 </tr>
 </table>
 </form>
 </body>
 </html>[/code]

@ProGrapeauthorNov 25.2006 — #ha ha ha

@ProGrapeauthorDec 02.2006 — #Hello, I am wondering if anyone can make a suggestion to get the other textfields to update immediately as I type without requiring any onther input such as pressing enter or clicking a button etc.

Thanks

Grape.

@mjdamatoDec 02.2006 — #Your code was way over complicated. I have parsed it down to just a couple of lines. Take a look at the methodology.

As for the problem of the fields not always updating immediately, O jst added onkeydown AND onkeyup triggers to the fields

&lt;html&gt;
 &lt;head&gt;
 &lt;script type = "text/javascript"&gt;
 &lt;!--
 function processInput (fieldObj) {
 
 <i>    </i>var input = fieldObj.value;
 
 <i>    </i>//Check if field is NAN (Not a Number) OR if field
 //has more than two decimal places
 if ( isNaN(input) || (Math.round(input*100) != (input*100)) ) {
 document.form[fieldObj.name+'_amt'].value = 'invalid';
 } else {
 document.form[fieldObj.name+'_amt'].value = 'valid';
 }
 
 }
 
 
 // --&gt;
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form name = "form" id = "form"&gt;
 &lt;table&gt;
 &lt;tr&gt;
 &lt;td&gt;
 PST:
 &lt;/td&gt;
 &lt;td&gt;
 &lt;input type = "text" name = "pst" id = "pst" onKeyUp="javascript:processInput(this)" onKeyDown="javascript:processInput(this)"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 GST:
 &lt;/td&gt;
 &lt;td&gt;
 &lt;input type = "text" name = "gst" id = "gst" onKeyUp="javascript:processInput(this)" onKeyDown = "javascript:processInput(this)"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 PST Amount:
 &lt;/td&gt;
 &lt;td&gt;
 &lt;input type = "text" name = "pst_amt" id = "pst_amt" readonly style="background-color:#cecece;"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 GST-only Amount:&amp;nbsp;&amp;nbsp;&amp;nbsp;
 &lt;/td&gt;
 &lt;td&gt;
 &lt;input type = "text" name = "gst_amt" id = "gst_amt" readonly style="background-color:#cecece;"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 Subtotal:
 &lt;/td&gt;
 &lt;td&gt;
 &lt;input type = "text" name = "subtot" readonly style="background-color:#cecece;"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;
 Total:
 &lt;/td&gt;
 &lt;td&gt;
 &lt;input type = "text" name = "tot" readonly style="background-color:#cecece;"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@ProGrapeauthorDec 04.2006 — #Wow, nice job shortening the code! :eek:

I'll give it a try tomorrow after my logic exam. Thanks very much for your help!

Grape

@ProGrapeauthorDec 05.2006 — #yes it works very well, thanks ?

do we really need to call processInput on key down as well if we are doing it on up?

@mjdamatoDec 05.2006 — #yes it works very well, thanks ?

do we really need to call processInput on key down as well if we are doing it on up?[/QUOTE]

Well, I ran into the same problem you described where the input was not processed consistently. I tried both onkeyup and onkeydown individually and had the same results. By adding both the problem went away. The script is executed so quickly that it shouldn't make a difference.

But, that just made me realize that users can input text w/o using the keyboard - such as right-clicking and pasting text they saved previoulsy. You should also add an onchange trigger as well.

@ProGrapeauthorDec 13.2006 — #mjdamato, thanks again. I tried it without onkeydown, and it seems to work! I too noticed I could copy and paste illegal strings into the fields... onchange seems to give similar results as before (not immediate reaction upon field value change), so I decided to deal with copypaste just by checking everything the next time anything is clicked then reverting to the last valid value entered and/or alerting the user (the calculator exercise turned into a fully fledged little project of a fairly specific-purpose calculator for my mom to use at work -- I'll post a link once I've finished it. there's bee some delay because its exam time right now).

If anyone has any ideas on how to detect a paste that would be neat. It should be possible to catch a ctrl-v, but I don't know about right-click-paste or edit-menu-paste.

Also in #JavaScript _↴

rotating slide show Simple Text Box Validation Problem Shortening conditions

Success!

Help @ProGrape spread the word by sharing this article on Twitter...

Tweet This

Editing value of text field

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Editing value of text field

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴