Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Need help with textboxes

Reply
Thread Tools

Need help with textboxes

 
 
Kodiak
Guest
Posts: n/a
 
      09-16-2007
I am trying to write some javascript code in which you enter some text
in one text box and the text will also appear in the second text box.
For example, if I write the word "Test" both text boxes should have
the same word in them. I need to be able to see the work actually
being typed out in both text boxes as well. If I trye the letter T
then both text boxes should have the same result all the type. If I
delete the letter T then both boxes should delete the letter T and so
forth. If anyone can help with this problem I woule really appreciate
it. Here is a code sample I am using below!

<html>
<head>
<script type="text/javascript">
function checkKey()
{
txtOutput.value = txtEnterValue.value;
}
</script>
</head>

<body>

<p>Type a word.<br>
<input type="text" name="txtEnterValue" onkeypress="checkKey()"> </
p>
<p>The result should appear in this box as you type.<br>
<input type="text" name="txtOutput"> </p>

</body>
</html>

 
Reply With Quote
 
 
 
 
Daz
Guest
Posts: n/a
 
      09-16-2007
On Sep 16, 12:27 pm, Kodiak <(E-Mail Removed)> wrote:
> I am trying to write some javascript code in which you enter some text
> in one text box and the text will also appear in the second text box.
> For example, if I write the word "Test" both text boxes should have
> the same word in them. I need to be able to see the work actually
> being typed out in both text boxes as well. If I trye the letter T
> then both text boxes should have the same result all the type. If I
> delete the letter T then both boxes should delete the letter T and so
> forth. If anyone can help with this problem I woule really appreciate
> it. Here is a code sample I am using below!
>
> <html>
> <head>
> <script type="text/javascript">
> function checkKey()
> {
> txtOutput.value = txtEnterValue.value;}
>
> </script>
> </head>
>
> <body>
>
> <p>Type a word.<br>
> <input type="text" name="txtEnterValue" onkeypress="checkKey()"> </
> p>
> <p>The result should appear in this box as you type.<br>
> <input type="text" name="txtOutput"> </p>
>
> </body>
> </html>


Neither txtEnterValue or txtOutput are variables in the global scope.

I would suggest putting your text inputs inside of a form where they
belong, then modifying the onkeypress event to pass back a reference
to the form, like so...

<html>
<head>
<script type="text/javascript">
function checkKey(form)
{
form.txtOutput.value = form.txtEnterValue.value;
}

</script>
</head>

<body>
<form name="myForm">
<p>
Type a word.<br>
<input type="text" name="txtEnterValue"
onkeypress="checkKey(this.form)">
</p>
<p>
The result should appear in this box as you type.<br>
<input type="text" name="txtOutput">
</p>
</form>
</body>
</html>

You'll find that you get some strange behaviour, however, as the event
fires the moment it's pressed, which is before it actually types a
character into the input box. I would recommend using "onkeyup"
instead. If it's important to you that the characters appear almost
instantaneously, you can use a timer. This means that just about each
character should appear as it's entered if the timer function executes
often enough, and will compensate for when a user holds down a key.

<html>
<head>
<script type="text/javascript">
function copyText() {
document.forms['myForm'].txtOutput.value =
document.forms['myForm'].txtEnterValue.value
}

window.onload = function() {
setInterval("copyText()", 50)
}
</script>
</head>

<body>
<form name="myForm">
<p>
Type a word.<br>
<input type="text" name="txtEnterValue">
</p>
<p>
The result should appear in this box as you type.<br>
<input type="text" name="txtOutput">
</p>
</form>
</body>
</html>

Note that here, I've used a different method to get the information
from the form. All forms and their children are stored in an array
called "forms", which is a property of the "document". So, to access
children in a form with the name "anotherForm", you could do this:

document.forms.anotherForm.elementName

You can also access it like this:

document["forms"]["anotherForm"]["someChildName"]

Although it should only be used if needed, as dot notation is better
and more consistent, and looks neater.

What you see above, is basically a multi dimensional array.

You can also call on a form by it's position in the document array:

document.form[0]

Personally, I don't do this, as I believe it leaves more to go wrong.


My examples are from from perfect. They simply show a few fundamental
techniques for achieving what you want (and there or many more). There
is no reason why you couldn't use a combination of "onkeydown", and
"onkeyup" along with the timer. The timer can be activated when the
key goes down, and deactivated when the key goes up.

Hope this helps.

 
Reply With Quote
 
 
 
 
Daz
Guest
Posts: n/a
 
      09-16-2007
EDIT:
> You can also call on a form by it's position in the FORMS array:
>
>
> My examples are FAR from perfect.


Sorry about the typos.

 
Reply With Quote
 
Lee
Guest
Posts: n/a
 
      09-16-2007
Kodiak said:
>
>I am trying to write some javascript code in which you enter some text
>in one text box and the text will also appear in the second text box.
>For example, if I write the word "Test" both text boxes should have
>the same word in them. I need to be able to see the work actually
>being typed out in both text boxes as well.


That's a pretty silly requirement. Is this for a class?


--

 
Reply With Quote
 
Daz
Guest
Posts: n/a
 
      09-16-2007
On Sep 16, 4:45 pm, Lee <(E-Mail Removed)> wrote:
> That's a pretty silly requirement. Is this for a class?
>
> --


Sorry Lee, but that's a pretty arrogant statement...

The fact that the OP is having trouble obtaining references to form
elements, strongly suggests that he's just starting out with
JavaScript. That doesn't mean he has to write something useful to
start with. I am sure his only goal is to create something simple, and
understand how it works, even if it serves no real purpose.

While criticism is usually welcome, it's usually only welcome when
it's helpful, and reasons as to why a particular method of doing
something may not be the best. You're comment offers absolutely no
help, and gives the impression that anything posted will put under
scrutiny, which is not what we are here to do.

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      09-16-2007
Daz wrote:
> You'll find that you get some strange behaviour, however, as the event
> fires the moment it's pressed, which is before it actually types a
> character into the input box. I would recommend using "onkeyup"
> instead.


That part is actually the only good advice in your posting.

> If it's important to you that the characters appear almost
> instantaneously, you can use a timer. This means that just about each
> character should appear as it's entered if the timer function executes
> often enough, and will compensate for when a user holds down a key.


It will not, that is bad advice. ECMAScript implemenations are
single-threaded, and system timer tick intervals may be higher
than the 50 ms alotted here.

It is also not necessary to use a timer function for "instantaneous"
appearance. Listening to mouse and keyboard events suffices.

> <html>


A DOCTYPE declaration is missing before.

> <head>


A declaration of the used encoding and the default scripting language is
missing here.

> <script type="text/javascript">
> function copyText() {
> document.forms['myForm'].txtOutput.value =
> document.forms['myForm'].txtEnterValue.value
> }


Yuck. This can be improved in a number of ways, including the most simple
one of assigning the reference to a variable:

var f = document.forms['myForm'], es = f.elements;

And then:

es["txtOutput"].value = es["txtEnterValue"].value;

> window.onload = function() {


This is a proprietary definition of an event listener, inherently
error-prone. It is not necessary, as the HTML `body' element has
an intrinsic standards-compliant `onload' event handler attribute
to facilitate this.

> setInterval("copyText()", 50)


Because of the unknown timer tick interval, it is better to use
setTimeout() instead of setInterval() for time-critical processes.

Both methods are proprietary properties of Window host objects and
should be called so: window.setTimeout(...), window.setInterval(...)

> }
> </script>
> </head>
>
> <body>


<body onload="...">

See above.

> <form name="myForm">


The `action' attribute is required. The `name' attribute would be
unnecessary if you simply passed the element reference "onkeyup" with
`this.form' or `this' (the latter being most compatible).

> <p>
> Type a word.<br>
> <input type="text" name="txtEnterValue">


`type="text"' is redundant as that is the default value.

<input name="txtEnterValue"
onkeyup="copyText(this.form)">

> </p>


Nonsense. The `p' element is to mark up *p*aragraphs. There is no
paragraph here, so the `div' element should be used instead.

> <p>
> The result should appear in this box as you type.<br>
> <input type="text" name="txtOutput">


See above.

> </p>
> </form>
> </body>
> </html>


Your markup is far from being syntactically or semantically correct.
Due to the former, it is unlikely to work consistently:
http://diveintomark.org/archives/200..._wont_help_you

For syntactical correctness, consult at least http://validator.w3.org/

> Note that here, I've used a different method to get the information
> from the form. All forms and their children are stored in an array
> called "forms",


`forms' is not an array, see below. `children' is too limited, because
a reference to a HTMLFormElement includes access to all its descendant elements.

> which is a property of the "document". So, to access children in a form
> with the name "anotherForm", you could do this:


That is not accessing `children' of/in the form, it is accessing form
controls represented by DOM objects, which is quite different. `children'
would include all child elements. Neither need form controls be child
elements of the `form' element, nor can a form contain only form controls.

> document.forms.anotherForm.elementName


This is completely proprietary referencing, and so inherently error-prone.
Mostly standards-compliant and fully backwards-compatible referencing of the
above would be

document.forms["anotherForm"].elements["elementName"]

> You can also access it like this:
>
> document["forms"]["anotherForm"]["someChildName"]


That is not standards-compliant either.

document["forms"]["anotherForm"]["elements"]["someChildName"]

would be.

> Although it should only be used if needed, as dot notation is better


It would only be better if standards-compliant referencing was used.

> and more consistent,


No. Bracket property accessors allow their argument to be any string value.
Dot property accessors require their operand to be an identifier. Using
dot property accessors in favor of bracket property accessors will cause a
mix of dot and bracket property accessors in cases where the control name is
not an identifier. This is explained in the FAQ.

However, W3C DOM Level 2 HTML specifies that referencing the items of a
HTMLCollection object in an ECMAScript implementation is (only) supported
through the bracket property accessor, so there is not much choice here:

http://www.w3.org/TR/DOM-Level-2-HTM...t-binding.html
(see the description for the namedItem() method of HTMLCollection objects)

> and looks neater.


Only a matter of opinion.

> What you see above, is basically a multi dimensional array.


Not at all. It is merely a sequence of property accesses, where the first
property access is resolved first, then the second, and so forth.

ECMAScript implementations have no built-in concept of associative arrays,
i.e. arrays where the index may also be a non-numeric string. If such
referencing is used on Array objects, that is not adding elements to the
array data structure, but adding properties to the Array object which
encapsulates that data structure. As indicated by the Array object's
length property to yield an unchanged value.

> You can also call on a form by it's position in the document array:


Neither `document' nor `document.forms' are arrays. `document' is a
reference to an HTMLDocument object, and `document.forms' is therefore
a reference to an HTMLCollection object.

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268

> document.form[0]

[...]
> My examples are from from perfect.


Your misconceptions about the used languages and interfaces are numerous.
You should refrain from giving further advice until you have grasped the
basics of that, because any advice you might give in spite of that has a
very high probability of being bad advice. That would force more
knowledgeable people to correct most if not all of your postings and to
waste their time with that, in place of or in addition to investing time
to post good advice.


PointedEars
--
"Use any version of Microsoft Frontpage to create your site. (This won't
prevent people from viewing your source, but no one will want to steal it.)"
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      09-16-2007
Daz wrote on 16 sep 2007 in comp.lang.javascript:

> On Sep 16, 4:45 pm, Lee <(E-Mail Removed)> wrote:
>> That's a pretty silly requirement. Is this for a class?
>>
>> --


[please do not quote even part of a signature on usenet]

>
> Sorry Lee, but that's a pretty arrogant statement...
>
> The fact that the OP is having trouble obtaining references to form
> elements, strongly suggests that he's just starting out with
> JavaScript. That doesn't mean he has to write something useful to
> start with. I am sure his only goal is to create something simple, and
> understand how it works, even if it serves no real purpose.
>
> While criticism is usually welcome, it's usually only welcome when
> it's helpful, and reasons as to why a particular method of doing
> something may not be the best. You're comment offers absolutely no
> help, and gives the impression that anything posted will put under
> scrutiny, which is not what we are here to do.


So there exists a "what we are here to do"?

That certainly must be your personal conception of usenet,
that it is one gigantic helpdesk.

Iteration:
>> That's a pretty silly requirement. Is this for a class?

> ... a pretty arrogant statement


I certainly don't think it is arrogant,
and I would not use those words easily if I where you,
but I deduct I am not.

Reiteration:
>> Is this for a class?


I too would like an answer to that from the OP.

While the requirement is rather silly,
it is a good subject for a home experiment in a teaching assignment.

If so, we should, I think not spoil the learning effect by doing such
experiment for him or her.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Lee
Guest
Posts: n/a
 
      09-16-2007
Daz said:
>
>On Sep 16, 4:45 pm, Lee <(E-Mail Removed)> wrote:
>> That's a pretty silly requirement. Is this for a class?
>>
>> --

>
>Sorry Lee, but that's a pretty arrogant statement...


Pot. Kettle.

>The fact that the OP is having trouble obtaining references to form
>elements, strongly suggests that he's just starting out with
>JavaScript. That doesn't mean he has to write something useful to
>start with. I am sure his only goal is to create something simple, and
>understand how it works, even if it serves no real purpose.
>
>While criticism is usually welcome, it's usually only welcome when
>it's helpful, and reasons as to why a particular method of doing
>something may not be the best. You're comment offers absolutely no
>help, and gives the impression that anything posted will put under
>scrutiny, which is not what we are here to do.


Certainly it is part of "what we are here to do". If you blindly
give every poster exactly what they ask for, without considering
why they're asking for it, and what misconceptions or ulterior
motives may lie beneath the request, you're being irresponsible.

Years of experience in this newsgroup suggests that when a poster
asks for something that's trivial and pointless, there's a very
good chance that it's a homework assignment. We shouldn't be
doing homework assignments for students. Do you disagree?

You'll notice that I didn't refuse help. They had already
received help. I simply pointed out why I suspected that it
may be a homework assignment and asked if it, in fact, is.

It may well not be. It might be an attempt at learning on their
own, in which case, more power to them, or it might be an ill-
conceived required "feature" on a web site. There might even be
a very good reason for it, but the odds seem to be against it.

It certainly seems worth asking.


--

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      09-17-2007
On Sep 17, 4:25 am, "Evertjan." <(E-Mail Removed)> wrote:
> > On Sep 16, 4:45 pm, Lee <(E-Mail Removed)> wrote:

[...]
> >> Is this for a class?

>
> I too would like an answer to that from the OP.
>
> While the requirement is rather silly,
> it is a good subject for a home experiment in a teaching assignment.
>
> If so, we should, I think not spoil the learning effect by doing such
> experiment for him or her.


That presumes that the "learning effect" of struggling with a problem
is more useful that being taught the answer.

Giving novice students brain teasers and expecting them to work it out
themselves is not always the best way to teach. Recent experiments
show that for new learning, it is much more valuable to present
questions with fully worked examples and solutions. Questions that
require application of knowledge should only be asked once the basic
knowledge has been acquired.

Whether the question originated from a school assignment or someone
trying to learn from some other source doesn't make much difference to
me. Such a basic question infers a very new student, the answer
should be framed within that context.


--
Rob

 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      09-17-2007
RobG wrote on 17 sep 2007 in comp.lang.javascript:

> On Sep 17, 4:25 am, "Evertjan." <(E-Mail Removed)> wrote:
>> > On Sep 16, 4:45 pm, Lee <(E-Mail Removed)> wrote:

> [...]
>> >> Is this for a class?

>>
>> I too would like an answer to that from the OP.
>>
>> While the requirement is rather silly,
>> it is a good subject for a home experiment in a teaching assignment.
>>
>> If so, we should, I think not spoil the learning effect by doing such
>> experiment for him or her.

>
> That presumes that the "learning effect" of struggling with a problem
> is more useful that being taught the answer.


Indeed it does.

> Giving novice students brain teasers and expecting them to work it out
> themselves is not always the best way to teach.


I wouldn't think that is a good way to go, not without asking the OP what
it's intentions are, and what work he/dhe has done sofar.

> Recent experiments
> show that for new learning, it is much more valuable to present
> questions with fully worked examples and solutions. Questions that
> require application of knowledge should only be asked once the basic
> knowledge has been acquired.


I wouln't trust those "recent experiments", since they are
counterintuitive and I don't know what controlled environment is
presumed.

> Whether the question originated from a school assignment or someone
> trying to learn from some other source doesn't make much difference to
> me. Such a basic question infers a very new student, the answer
> should be framed within that context.


So, as I said, without confirmation of tat context, we should presume the
OP is helped best by not answering his/her school asignment for him/her.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
need help to fill textboxes from a selected item in datagrid-selected index changed. mldardy ASP .Net 0 09-28-2010 02:59 PM
Need help with JavaScript Replace Method for multiple textboxes Barnes Javascript 2 07-08-2004 05:35 PM
Please help!!! Need datagrid selection to fill textboxes...Need quick!! TN Bella ASP .Net 1 06-18-2004 01:31 AM
Need help...with multiple textboxes and SQL....please help! Teep ASP .Net 1 06-17-2004 06:26 AM
NEED HELP W/ ENABLE/DISABLE CHECKBOXES AND TEXTBOXES HolaGoogle ASP General 2 09-25-2003 03:54 PM



Advertisments