Javascript Copy Text Boxes..I'm being stupid!

[@sh]

I know this is probably a real simple one, but I'm obviously missing
something..

I'm building a function that I'll use throughout a website in the situation
that I have two text boxes - the two text boxes will generally contain the
same data. After the user completes the value of the first textbox, I want
to onChange the value of the first textbox into the second textbox UNLESS
the second textbox already has a value.

Here's what I've done so far...

IN THE HEAD
function CopyTextBoxes(TextBox1,TextBox2) {
if(TextBox2.value = '') {
TextBox2.value = TextBox1.value}
}

IN THE BODY WITHIN THE FORM
<input name="MailFrom" type="text" id="MailFrom" size="60" maxlength="100"
onChange="CopyTextBoxes('MailReplyTo','MailFrom')">
<input name="MailReplyTo" type="text" id="MailFrom" size="60"
maxlength="100">

I hate javascript, and will really appreciate your help!

Thanks!

 

[Rob]

I know this is probably a real simple one, but I'm obviously missing
something..

I'm building a function that I'll use throughout a website in the
situation that I have two text boxes - the two text boxes will generally
contain the same data. After the user completes the value of the first
textbox, I want to onChange the value of the first textbox into the second
textbox UNLESS the second textbox already has a value.

Here's what I've done so far...

IN THE HEAD
function CopyTextBoxes(TextBox1,TextBox2) {
if(TextBox2.value = '') {
TextBox2.value = TextBox1.value}
}

IN THE BODY WITHIN THE FORM
<input name="MailFrom" type="text" id="MailFrom" size="60" maxlength="100"
onChange="CopyTextBoxes('MailReplyTo','MailFrom')">
<input name="MailReplyTo" type="text" id="MailFrom" size="60"
maxlength="100">

I hate javascript, and will really appreciate your help!

Thanks!

I've always found weird/unexpected problems with different browsers when
using foo.value. I would make both ID's unique and use
document.getElementById(TextBox2).value =
document.getElementById(TextBox1).value;

 

[Thomas 'PointedEars' Lahn]

[...]
IN THE HEAD
function CopyTextBoxes(TextBox1,TextBox2) {
if(TextBox2.value = '') {
TextBox2.value = TextBox1.value}
}

IN THE BODY WITHIN THE FORM
<input name="MailFrom" type="text" id="MailFrom" size="60"
maxlength="100" onChange="CopyTextBoxes('MailReplyTo','MailFrom')">
<input name="MailReplyTo" type="text" id="MailFrom" size="60"
maxlength="100">

If the intent is to copy the value of the control named `MailReplyTo' to
the control named `MailFrom', as the code suggests, then the event handler
of the wrong control is used. Think about it: if `MailFrom' changes, the
event fires. But every change is also a change of value, so the value just
changed will be overwritten by the value of `MailReplyTo'. (If instead
`MailFrom' should be read-only, then the appropriate attribute should be
set, and no client-side scripting at all would be required.)

If instead the intent is to copy the new value of `MailFrom' (the
control that fires the event) to `MailReplyTo', the copy direction
needs to be _reversed_.

Since the former does not make much sense to me, I assume that the latter
applies.

Post to comp.lang.i-hate-javascript instead!

I've always found weird/unexpected problems with
different browsers when using foo.value.

Could you please elaborate?

I would make both ID's unique

Of course, as they have to.

and use
document.getElementById(TextBox2).value =
document.getElementById(TextBox1).value;

No, use unique names for the `elements' collection instead.
Quickhack:

function copyValue(textBox1, textBox2)
{
if (textBox1 && textBox2)
{
var f, es;
if (typeof textBox1 == "string"
&& document.forms
&& (f = document.forms[0])
&& (es = f.elements))
{
textBox1 = es[textBox1];
}

if (textBox1)
{
if (typeof textBox2 == "string"
&& (f = textBox1.form
|| (document.forms && (f = document.forms[0])))
&& f && (es = f.elements))
{
textBox2 = es[textBox2];
}

if (textBox2)
{
textBox2.value = textBox1.value;
}
else
{
alert('Error: target does not exist.');
}
}
else
{
alert('Error: source does not exist.');
}
}
else
{
alert('Error: source and target must not be empty/null.');
}
}

<form ...>
<input name="MailFrom" size="60" maxlength="100"
onchange="copyValue(this, 'MailReplyTo')">
<input name="MailReplyTo" size="60" maxlength="100">
</form>

Note that if the names/IDs used here are semantic, RFC2822 "Internet
Message Format" does not require the Reply-To header value to be set
the same as the From header value. User agents have to use and will
use the From header value automatically for the To header of replies
if Reply-To is missing.


PointedEars

 

[Tony]

I know this is probably a real simple one, but I'm obviously missing
something..

Looks like

I'm building a function that I'll use throughout a website in the situation
that I have two text boxes - the two text boxes will generally contain the
same data. After the user completes the value of the first textbox, I want
to onChange the value of the first textbox into the second textbox UNLESS
the second textbox already has a value.

Here's what I've done so far...

IN THE HEAD
function CopyTextBoxes(TextBox1,TextBox2) {
if(TextBox2.value = '') { **** here is your problem
TextBox2.value = TextBox1.value}
}

Your if statement is SETTING TextBox2.value to '', which returns true,
and then sets TextBox2.value.

What you want is to TEST the value:

if(TextBox2.value == '') ...

Note the double-equal sign. That is how to check for equality in
conditionals.

That one gets me all the time, actually - it's easy to miss typing the
second equal when you're going fast...

 

[Thomas 'PointedEars' Lahn]

Your if statement is SETTING TextBox2.value to '',

Ahh, I missed that.

which returns true,

It does not return anything. You describe JavaScript 1.2-specific
behavior as implemented in Netscape Navigator 4.0 to 4.05 (June 1997)
and in other browsers if <script ... language="JavaScript1.2"> is used.
There the AssignmentExpression _evaluates to_ `true' if successful,
`false' otherwise.

However, version/implementation-unspecific behavior is that TextBox2.value
is indeed assigned a value; that value is the empty string which
type-converts to `false', ...

and then sets TextBox2.value.

.... therefore the block is _never_ executed and TextBox2.value is _never_
assigned TextBox1.value.

What you want is to TEST the value:

if(TextBox2.value == '') ...

Note the double-equal sign. That is how to check for equality in
conditionals.
[...]

It still does not make sense, see

PointedEars

 

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 12/13/2005 1:55 PM:

Tony wrote:




Ahh, I missed that.




It does not return anything. You describe JavaScript 1.2-specific
behavior as implemented in Netscape Navigator 4.0 to 4.05 (June 1997)
and in other browsers if <script ... language="JavaScript1.2"> is used.
There the AssignmentExpression _evaluates to_ `true' if successful,
`false' otherwise.

However, version/implementation-unspecific behavior is that TextBox2.value
is indeed assigned a value; that value is the empty string which
type-converts to `false', ...

You are not testing the .value of that input. The test, as above, is
testing to see if you can set it's value to '', which you can, which
evaluates to true.

var myVar;
if (myVar = '3'){
alert('This alert will always fire in a decent UA')
}

 

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn said the following on 12/13/2005 1:55 PM:

You are not testing the .value of that input. The test, as above, is
testing to see if you can set it's value to '', which you can, which
evaluates to true.

That is so in JavaScript 1.2 _only_. Other versions and implementations
will evaluate that to `false' because the empty string is a false-value:

var myVar;
if (myVar = '')
{
alert('This alert will be displayed with JavaScript 1.2 only.');
}

var myVar;
if (myVar = '3'){
alert('This alert will always fire in a decent UA')
}

Please read more carefully. Tony, and you in your first paragraph,
describe what I describe as being JavaScript 1.2-specific behavior
in my first paragraph. However, what is more likely to happen is
the version/implementation-unspecific behavior I described in my
second one.

In your second paragraph you are mixing things up; of course this will
always fire, because in JavaScript 1.2 the assignment is successful and,
for other versions/implementations, '3' is a true-value.

It was already clarified by Tony that the assignment, which should
have been a comparison, was the problem; what was left to be clarified
by me was the interpretation of the assignment. Your posting did not
reveal any new facts.


PointedEars