Form element scope

[Steve]

Hi everyone,

I have a test page. When I press the button, it bring form.html,
which is fine.
When I press Enter key in the textbox, it gives me an error saying
this.form.cmd is not an object. But in the button, it used the code
this.form.cmd.value='dispense'. Why does it give me the error? I
think in a function, it should recognize the document, form and its
objects, should it?

Thank a lot.

Here is the page.
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">

<script language='javascript1.2' >

function microsoftKeyPress(upc) {
if (window.event.keyCode == 13){
this.form.cmd.value="view";
f.submit();
}}

</script>
<input type="text" name="upc" value="upc"
onKeyPress="microsoftKeyPress(this.value)">
<input type="button" name="Submit3" value="Dispense" class="smallText"
onClick="this.form.cmd.value='dispense';this.form.submit()">
</form>

 

[RobB]

Hi everyone,

I have a test page. When I press the button, it bring form.html,
which is fine.
When I press Enter key in the textbox, it gives me an error saying
this.form.cmd is not an object. But in the button, it used the code
this.form.cmd.value='dispense'. Why does it give me the error? I
think in a function, it should recognize the document, form and its
objects, should it?

Thank a lot.

Here is the page.
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">

<script language='javascript1.2' >

function microsoftKeyPress(upc) {
if (window.event.keyCode == 13){
this.form.cmd.value="view";
f.submit();
}}

</script>
<input type="text" name="upc" value="upc"
onKeyPress="microsoftKeyPress(this.value)">
<input type="button" name="Submit3" value="Dispense" class="smallText"
onClick="this.form.cmd.value='dispense';this.form.submit()">
</form>

You've got two separate functions there: one (Button.onclick) is
anonymous, a property of the "Submit3" Button object, the other is
global (microsoftKeyPress) and is a property of window. Two different
scopes - 'this' in a top-level function points to window, in a form
event handler property, to the element object it's a property of.

You've also passed an argument (upc) for no reason, and referenced the
form as 'f' with no supporting code. Also effectively disabled the
form completely for JS-disabled users.

 

[Steve]

Thank you for the help. Could you give me more info?

I changed the code, but the line

this.document.form.cmd.value="view";

still caused problem.

The next line this.document.form.cmd.submit();

works. Why one worked, the other did not? You said "this" means
window object, didn't you?

In the code: onClick="this.form.cmd.value..., do you mean "this" refer
to the button? If this is what you mean, then "this.form.cmd.value"
does not make sense.

Here is the page.
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">

<script language='javascript1.2' >

function microsoftKeyPress() {
if (window.event.keyCode == 13){
this.document.form.cmd.value="view";
this.document.form.cmd.submit();
}}

</script>
<input type="text" name="upc" value="upc"
onKeyPress="microsoftKeyPress()">
<input type="button" name="Submit3" value="Dispense"
onClick="this.form.cmd.value='dispense';this.form.submit()">
</form>

 

[RobB]

Thank you for the help. Could you give me more info?

I changed the code, but the line

this.document.form.cmd.value="view";

still caused problem.

The next line this.document.form.cmd.submit();

works. Why one worked, the other did not? You said "this" means
window object, didn't you?

In the code: onClick="this.form.cmd.value..., do you mean "this" refer
to the button? If this is what you mean, then "this.form.cmd.value"
does not make sense.

Here is the page.
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">

<script language='javascript1.2' >

function microsoftKeyPress() {
if (window.event.keyCode == 13){
this.document.form.cmd.value="view";
this.document.form.cmd.submit();
}}

</script>
<input type="text" name="upc" value="upc"
onKeyPress="microsoftKeyPress()">
<input type="button" name="Submit3" value="Dispense"
onClick="this.form.cmd.value='dispense';this.form.submit()">
</form>

You still haven't explained what you needed to do.

Never a good idea to make a form impossible to submit w/o JavaScript.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>

<script type="text/javascript">
//<![CDATA[

function handle_keypress(e)
{
e = e || window.event; //get Event object
var kC = e.keyCode || e.which; //key code
if (e && kC && kC == 13) //enter key?
{
var tgt = e.srcElement || e.target; //'upc' field
if (tgt)
{
var f = tgt.form; //Form object
f.cmd.value = 'view'; //set flag
}
}
return true; //why not...
}

function handle_enter()
{
var el;
if (el = document.getElementById('upc'))
el.onkeypress = handle_keypress;
}

onload = handle_enter;

//]]>
</script>
</head>
<body>
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">
<input id="upc" type="text" name="upc" value="upc">
<input type="submit" name="Submit3" value="Dispense" class="smallText"
onClick="this.form.cmd.value='dispense'">
</form>
</body>
</html>

Keep this in mind: embedding a script in the middle of a form doesn't
make it a part of the form. Different browsers will modify the scope
of varibles in such a script, but it's nothing to rely on. Always
treat them like separate entities.

In the code: onClick="this.form.cmd.value..., do you mean "this" refer
to the button? If this is what you mean, then "this.form.cmd.value"
does not make sense.

Sure it does.

this == Button
..form == form property, points to Form object (every form element has
one)
..cmd == hidden field of that name in form
..value == its value property

'this' in that other (stand-alone) function points to 'window', and a
window object has no .form property - what would it refer to if it
did?

 

[RobB]

Thank you for the help. Could you give me more info?

I changed the code, but the line

this.document.form.cmd.value="view";

still caused problem.

The next line this.document.form.cmd.submit();

works. Why one worked, the other did not? You said "this" means
window object, didn't you?

In the code: onClick="this.form.cmd.value..., do you mean "this" refer
to the button? If this is what you mean, then "this.form.cmd.value"
does not make sense.

Here is the page.
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">

<script language='javascript1.2' >

function microsoftKeyPress() {
if (window.event.keyCode == 13){
this.document.form.cmd.value="view";
this.document.form.cmd.submit();
}}

</script>
<input type="text" name="upc" value="upc"
onKeyPress="microsoftKeyPress()">
<input type="button" name="Submit3" value="Dispense"
onClick="this.form.cmd.value='dispense';this.form.submit()">
</form>

You still haven't explained what you needed to do.

Never a good idea to make a form impossible to submit w/o JavaScript.

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>

<script type="text/javascript">
//<![CDATA[

function handle_keypress(e)
{
e = e || window.event; //get Event object
var kC = e.keyCode || e.which; //key code
if (e && kC && kC == 13) //enter key?
{
var tgt = e.srcElement || e.target; //'upc' field
if (tgt)
{
var f = tgt.form; //Form object
f.cmd.value = 'view'; //set flag
}
}
return true; //why not...
}

function handle_enter()
{
var el;
if (el = document.getElementById('upc'))
el.onkeypress = handle_keypress;
}

onload = handle_enter;

//]]>
</script>
</head>
<body>
<form name="newRxForm" method="post" action="form.html">
<input type="hidden" name="cmd" value="dispense">
<input id="upc" type="text" name="upc" value="upc">
<input type="submit" name="Submit3" value="Dispense" class="smallText"
onClick="this.form.cmd.value='dispense'">
</form>
</body>
</html>

Keep this in mind: embedding a script in the middle of a form doesn't
make it a part of the form. Different browsers will modify the scope
of varibles in such a script, but it's nothing to rely on. Always
treat them like separate entities.

In the code: onClick="this.form.cmd.value..., do you mean "this" refer
to the button? If this is what you mean, then "this.form.cmd.value"
does not make sense.

Sure it does.

this == Button
.form == form property, points to Form object (every form element has
one)
.cmd == hidden field of that name in form
.value == its value property

'this' in that other (stand-alone) function points to 'window', and a
window object has no .form property - what would it refer to if it
did?

Oops...don't forget to remove this from the submit button, else moz
will run it even when the enter key is used:

onClick="this.form.cmd.value='dispense'"