Cannot reference elements of an object with on-submit event handler

[wASP]

Hi,

I'm having a problem referencing the elements within an object
after a method of that object (a member function) has been activated
with an onsubmit handler:
- - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
<script language="javas cript" type="text/javascript">
function js_onsubmit_hnd l_fn ()
{
var ndx = 0;

alert ("POINT 1" + "::max1>" + this.vald_ray_m ax1
+ "::max2>" + this.vald_ray_m ax2
+ "::error>" + this.wipe_error _msg);

this.vald_ray[ndx]
= rqrd_fld_vald ("textbox01" , "label01", this.vald_ray[ndx]);

ndx++;

this.vald_ray[ndx]
= rqrd_fld_vald ("textbox02" , "label02", this.vald_ray[ndx]);

ndx++;

event.returnVal ue = this.vald_ray[ndx];
alert ("POINT 4");

}

function valdtn_obj_def ()
{
this.vald_ray_m ax1 = 2;
this.vald_ray_m ax2 = 4;
this.wipe_error _msg = "----------------------------";
this.vald_ray = new Array ();
for (var ndx = 0; ndx < this.vald_ray_m ax2; ndx++)
this.vald_ray[ndx] = true;
this.js_onsubmi t_hndl = js_onsubmit_hnd l_fn;
}

var valdtn_obj = new valdtn_obj_def ();

document.getEle mentById("Form_ 01").onsubmit
= valdtn_obj.js_o nsubmit_hndl;

</script>
- - - - - - - - - - - - - - -
- - - - - - - - - - - - - -

I KNOW that the handler is activated, as the alert box comes up.

Can anyone clue me in?

(I'm using IE6, BTW.)

THANKS!
- wASP

[RobG]

wASP wrote:

Hi,

I'm having a problem referencing the elements within an object
after a method of that object (a member function) has been activated
with an onsubmit handler:
You are trying to reference properties of the object.
- - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
<script language="javas cript" type="text/javascript">
The language attribute has been depreciated, keep type:

<script type="text/javascript">

function js_onsubmit_hnd l_fn ()
{
var ndx = 0;

alert ("POINT 1" + "::max1>" + this.vald_ray_m ax1
'this' refers to the form, but vald_ray_max1 is a property of the
valdtn_obj object.

alert ("POINT 1" + "::max1>" + valdtn_obj.vald _ray_max1

will report the value you are seeking.

Having the name of the object hard-coded into the function does not seem
to be a good idea.

+ "::max2>" + this.vald_ray_m ax2
+ "::error>" + this.wipe_error _msg);

this.vald_ray[ndx]
= rqrd_fld_vald ("textbox01" , "label01", this.vald_ray[ndx]);

ndx++;

this.vald_ray[ndx]
= rqrd_fld_vald ("textbox02" , "label02", this.vald_ray[ndx]);

ndx++;

event.returnVal ue = this.vald_ray[ndx];
alert ("POINT 4");

}

function valdtn_obj_def ()
{
this.vald_ray_m ax1 = 2;
this.vald_ray_m ax2 = 4;
this.wipe_error _msg = "----------------------------";
this.vald_ray = new Array ();
for (var ndx = 0; ndx < this.vald_ray_m ax2; ndx++)
this.vald_ray[ndx] = true;
this.js_onsubmi t_hndl = js_onsubmit_hnd l_fn;
}

var valdtn_obj = new valdtn_obj_def ();

document.getEle mentById("Form_ 01").onsubmit
= valdtn_obj.js_o nsubmit_hndl;

</script>

[...]

This seems to be overly complex and not very reusable - are you sure
this is the right approach?
--
Rob

[Thomas 'PointedEars' Lahn]

RobG wrote:

wASP wrote:

<script language="javas cript" type="text/javascript">
The language attribute has been depreciated, keep type:

^^^^^^^^^^^
<http://www.w3.org/TR/html4/conform.html#h-4.1>
<script type="text/javascript">

<script type="applicati on/javascript">

(will probably) obsolete(s) this[1]. Therefore, I am very much interested
as to whether using this new value is viable in your HTML user agents.
PointedEars
___________
[1]
<http://www1.ietf.org/mail-archive/web/ietf-announce/current/msg01349.html>

[wASP]

On Mon, 14 Nov 2005 21:37:18 +1000, RobG <rg***@iinet.ne t.au> wrote:

wASP wrote:

Hi,

I'm having a problem referencing the elements within an object
after a method of that object (a member function) has been activated
with an onsubmit handler:
You are trying to reference properties of the object.

Properties, fields, member variables - I once got set straight
on using the term "properties " in reference to fields in a C# forum:
"Properties " refer to something else entirely in C#.

That just goes to show you how the terminology can be so confusing
when moving from one realm to another.

- - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
<script language="javas cript" type="text/javascript">

The language attribute has been depreciated, keep type:

<script type="text/javascript">

function js_onsubmit_hnd l_fn ()
{
var ndx = 0;

alert ("POINT 1" + "::max1>" + this.vald_ray_m ax1

'this' refers to the form, but vald_ray_max1 is a property of the
valdtn_obj object.

I thought "js_onsubmit_hn dl_fn" would become a member function
once I made it a member of a class:
this.js_onsubmi t_hndl = js_onsubmit_hnd l_fn;

Oh well - ya' learn sum'tin' new ev'ry day.

alert ("POINT 1" + "::max1>" + valdtn_obj.vald _ray_max1

will report the value you are seeking.

Having the name of the object hard-coded into the function does not seem
to be a good idea.

I know - but what else can I do?

I thought that "this" would refer to everything in the object to which
the function/method was a member.

+ "::max2>" + this.vald_ray_m ax2
+ "::error>" + this.wipe_error _msg);

this.vald_ray[ndx]
= rqrd_fld_vald ("textbox01" , "label01", this.vald_ray[ndx]);

ndx++;

this.vald_ray[ndx]
= rqrd_fld_vald ("textbox02" , "label02", this.vald_ray[ndx]);

ndx++;

event.returnVal ue = this.vald_ray[ndx];
alert ("POINT 4");

}

function valdtn_obj_def ()
{
this.vald_ray_m ax1 = 2;
this.vald_ray_m ax2 = 4;
this.wipe_error _msg = "----------------------------";
this.vald_ray = new Array ();
for (var ndx = 0; ndx < this.vald_ray_m ax2; ndx++)
this.vald_ray[ndx] = true;
this.js_onsubmi t_hndl = js_onsubmit_hnd l_fn;
}

var valdtn_obj = new valdtn_obj_def ();

document.getEle mentById("Form_ 01").onsubmit
= valdtn_obj.js_o nsubmit_hndl;

</script>

[...]

This seems to be overly complex and not very reusable - are you sure
this is the right approach?

It's a fragment of the overall project - this code is being generated
by server-side code written in C# - and it's more reuseable/flexible
than what can be determined by what I've posted - I just weeded out
all of the irrelevancies.

Thanks Rob!

- wASP

[RobG]

wASP wrote:

On Mon, 14 Nov 2005 21:37:18 +1000, RobG <rg***@iinet.ne t.au> wrote:

wASP wrote:

Hi,

I'm having a problem referencing the elements within an object
after a method of that object (a member function) has been activated
with an onsubmit handler: You are trying to reference properties of the object.

Properties, fields, member variables - I once got set straight
on using the term "properties " in reference to fields in a C# forum:
"Properties " refer to something else entirely in C#.

That just goes to show you how the terminology can be so confusing
when moving from one realm to another.

Yes, but JavaScript is pretty simple - there are no classes.

Since you come from an OO environment, have a browse of Douglas
Crockfords stuff:

<URL:http://www.crockford.c om/javascript/>

Particularly the first two articles - "JavaScript : The Wrrrld's Most
Misunderstood Programming Language" and "A Survey of the JavaScript
Programming Language".

- - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
<script language="javas cript" type="text/javascript"> The language attribute has been depreciated, keep type:

<script type="text/javascript">

function js_onsubmit_hnd l_fn ()
{
var ndx = 0;

alert ("POINT 1" + "::max1>" + this.vald_ray_m ax1

'this' refers to the form, but vald_ray_max1 is a property of the
valdtn_obj object.

I thought "js_onsubmit_hn dl_fn" would become a member function
once I made it a member of a class:
this.js_onsubmi t_hndl = js_onsubmit_hnd l_fn;

Oh well - ya' learn sum'tin' new ev'ry day.

What "this" refers to can be difficult to determine if you don't have a
good understanding of the scope chain. The best way to find out what it
refers to is to insert a debug line:

alert((this);
return;

If you're using Firefox it will generally give you a pretty good idea of
what 'this' is.

alert ("POINT 1" + "::max1>" + valdtn_obj.vald _ray_max1

will report the value you are seeking.

Having the name of the object hard-coded into the function does not seem
to be a good idea.
I know - but what else can I do?

Validating forms on the client has been attempted thousands of times,
usually poorly. One strategy is to 'type' form controls - add the
'type' as a class name and use it to determine the validation function
to run on the control.

The 'validator' can be an object, or just a set of functions. Putting
them in an object encapsulates them and may be better for maintenance.

Below is a bit of an example, it does trivial validation (just checks if
there is anything in the control) and pesters you with alerts, but you
get the idea. Preferably the response to invalid input would be to put
messages in the form rather that direct the user to fix things.

I've used a switch statement to select the validation to be run, but
there are many other ways to do it.
e.g.

<script type="text/javascript">

var FormValidator = (function(){

function checkDate(el){
// stuff to validate a date input
var elValid = !!el.value
showDetail(el, elValid);
return elValid;
}

function checkName(el){
// stuff to validate a name input
var elValid = !!el.value
showDetail(el, elValid);
return elValid;
}

function checkEmail(el){
// stuff to validate an email input
var elValid = !!el.value
showDetail(el, elValid);
return elValid;
}

function showDetail(el, isValid){
alert('Checking : ' + ((el.name)?el.n ame:'anonymouse ')
+ '\nContent: ' + ((el.value)?el. value:'')
+ '\nValid? ' + ((isValid)? 'Yes' : 'No')
);
}

return ({
checkForm : function()
{
var fEls = this.elements;
var el, i=0;
var cName;
var isValid = true;
while ( (el = fEls[i++]) ){
if (el.className &&
(cName = el.className.ma tch(/\bfcType_[\w\d]+\b/) )){

switch (cName[0].split('_')[1])
{
case 'date' : isValid = checkDate(el);
break;
case 'name' : isValid = checkName(el);
break;
case 'email' : isValid = checkEmail(el);
break;
default : ;
}
}
}
return confirm(
'Form checked as: '
+ ((isValid)?'val id':'invalid')
+ '\nSumbit?');
}
});
})();

window.onload = function(){
var allForms = document.forms;
var i=allForms.leng th;
while (i--){
allForms[i].onsubmit = FormValidator.c heckForm;
}
};

</script>
</head>
<body>

<form action="">
<input type="text" class="fcType_d ate" name="date">
<input type="text" class="fcType_n ame" name="name">
<input type="text" class="fcType_e mail" name="email">
<input type="submit" class="fcType_s ubmit">
</form>

[...]
It's a fragment of the overall project - this code is being generated
by server-side code written in C# - and it's more reuseable/flexible
than what can be determined by what I've posted - I just weeded out
all of the irrelevancies.

Thanks! :-)
--
Rob

[wASP]

On Tue, 15 Nov 2005 01:09:58 GMT, RobG <rg***@iinet.ne t.au> wrote:

wASP wrote:

On Mon, 14 Nov 2005 21:37:18 +1000, RobG <rg***@iinet.ne t.au> wrote:

wASP wrote:
Hi,

I'm having a problem referencing the elements within an object
after a method of that object (a member function) has been activated
with an onsubmit handler:
You are trying to reference properties of the object.
Properties, fields, member variables - I once got set straight
on using the term "properties " in reference to fields in a C# forum:
"Properties " refer to something else entirely in C#.

That just goes to show you how the terminology can be so confusing
when moving from one realm to another.

Yes, but JavaScript is pretty simple - there are no classes.

So I'm looking for something that isn't there - which explains why
I can't find it.

Since you come from an OO environment, have a browse of Douglas
Crockfords stuff:

<URL:http://www.crockford.c om/javascript/>

Particularly the first two articles - "JavaScript : The Wrrrld's Most
Misunderstoo d Programming Language" and "A Survey of the JavaScript
Programming Language".
I've looked through some of it, and saved the link.

- - - - - - - - - - - - - -
- - - - - - - - - - - - - - -
<script language="javas cript" type="text/javascript">
The language attribute has been depreciated, keep type:

<script type="text/javascript">
function js_onsubmit_hnd l_fn ()
{
var ndx = 0;

alert ("POINT 1" + "::max1>" + this.vald_ray_m ax1
'this' refers to the form, but vald_ray_max1 is a property of the
valdtn_obj object.

I thought "js_onsubmit_hn dl_fn" would become a member function
once I made it a member of a class:
this.js_onsubmi t_hndl = js_onsubmit_hnd l_fn;

Oh well - ya' learn sum'tin' new ev'ry day.

What "this" refers to can be difficult to determine if you don't have a
good understanding of the scope chain. The best way to find out what it
refers to is to insert a debug line:

alert((this);
return;

If you're using Firefox it will generally give you a pretty good idea of
what 'this' is.

I was just now looking through this page:
http://www.crockford.com/javascript/private.html

... and I saw something interesting:
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
By convention, we make a private self parameter. This is used to make
the object available to the private methods. This is a workaround for
an error in the ECMAScript Language Specification which causes this
to be set incorrectly for inner functions.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

So, it would appear that the "this" mechanism has a bit of a bug in it.

alert ("POINT 1" + "::max1>" + valdtn_obj.vald _ray_max1

will report the value you are seeking.

Having the name of the object hard-coded into the function does not seem
to be a good idea.

I know - but what else can I do?

Validating forms on the client has been attempted thousands of times,
usually poorly. One strategy is to 'type' form controls - add the
'type' as a class name and use it to determine the validation function
to run on the control.

The 'validator' can be an object, or just a set of functions. Putting
them in an object encapsulates them and may be better for maintenance.

This is what I'm doing ... sort of ... only most of it
is on the server-side of things - C# - ASP.NET.

Below is a bit of an example, it does trivial validation (just checks if
there is anything in the control) and pesters you with alerts, but you
get the idea. Preferably the response to invalid input would be to put
messages in the form rather that direct the user to fix things.

I've used a switch statement to select the validation to be run, but
there are many other ways to do it.
e.g.

<script type="text/javascript">

var FormValidator = (function(){

function checkDate(el){
// stuff to validate a date input
var elValid = !!el.value
showDetail(el, elValid);
return elValid;
}

function checkName(el){
// stuff to validate a name input
var elValid = !!el.value
showDetail(el, elValid);
return elValid;
}

function checkEmail(el){
// stuff to validate an email input
var elValid = !!el.value
showDetail(el, elValid);
return elValid;
}

function showDetail(el, isValid){
alert('Checking : ' + ((el.name)?el.n ame:'anonymouse ')
+ '\nContent: ' + ((el.value)?el. value:'')
+ '\nValid? ' + ((isValid)? 'Yes' : 'No')
);
}

return ({
checkForm : function()
{
var fEls = this.elements;
var el, i=0;
var cName;
var isValid = true;
while ( (el = fEls[i++]) ){
if (el.className &&
(cName = el.className.ma tch(/\bfcType_[\w\d]+\b/) )){

switch (cName[0].split('_')[1])
{
case 'date' : isValid = checkDate(el);
break;
case 'name' : isValid = checkName(el);
break;
case 'email' : isValid = checkEmail(el);
break;
default : ;
}
}
}
return confirm(
'Form checked as: '
+ ((isValid)?'val id':'invalid')
+ '\nSumbit?');
}
});
})();

window.onloa d = function(){
var allForms = document.forms;
var i=allForms.leng th;
while (i--){
allForms[i].onsubmit = FormValidator.c heckForm;
}
};

</script>
</head>
<body>

<form action="">
<input type="text" class="fcType_d ate" name="date">
<input type="text" class="fcType_n ame" name="name">
<input type="text" class="fcType_e mail" name="email">
<input type="submit" class="fcType_s ubmit">
</form>

That's an interesting approach - and I've saved this post as a file
in my "JavaScript " folder - but it doesn't work well with my overall system.
In my scheme of things, the overall process is driven by the server-side
part of this.

The way that I have it set up now, I've got a label control associated with
the control to be validated (textbox in this case), and I display my error
messages in that label - on both server-side and client-side (JavaScript).
I've got the basic mechanism working now, but I have one more little problem.

I'm trying to figure out a way to deactivate the label control when
the error condition is resolved (and there is no longer an error),
but I can't seem to find what I need in the way of documentation
for doing this. I don't want to remove the label control from the
DOM hierarchy, just deactivate it - so that I can reuse it in the
event that there is another error condition. I don't know how
to do that with JavaScript.

I Googled on "JavaScript attributes", and "JavaScript setactive",
but I don't see anything that might be useful.

Do you know of any books/websites that go beyond the fundamentals
of JavaScript?

Thanks Rob.

- wASP

[Richard Cornford]

wASP wrote:
<snip>

I was just now looking through this page:
http://www.crockford.com/javascript/private.html

... and I saw something interesting:
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
By convention, we make a private self parameter. This is used
to make the object available to the private methods. This is
a workaround for an error in the ECMAScript Language Specification
which causes this to be set incorrectly for inner functions.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

So, it would appear that the "this" mechanism has a bit of a
bug in it.

There is no bug. Language implementations do precisely what the
specification says they should do. Douglas is arguing that the it would
have been better if the handling of - this - had been specified
differently, which is certainly a valid argument, but doesn't change the
language as we have it.

At least it is possible to work out what - this - will refer to in any
language context.

Richard.

[wASP]

On Wed, 16 Nov 2005 00:11:30 -0000, "Richard Cornford" <Ri*****@litote s.demon.co.uk>
wrote:

wASP wrote:
<snip>

I was just now looking through this page:
http://www.crockford.com/javascript/private.html

... and I saw something interesting:
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
By convention, we make a private self parameter. This is used
to make the object available to the private methods. This is
a workaround for an error in the ECMAScript Language Specification
which causes this to be set incorrectly for inner functions.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

So, it would appear that the "this" mechanism has a bit of a
bug in it.

There is no bug. Language implementations do precisely what the
specificatio n says they should do. Douglas is arguing that the it would
have been better if the handling of - this - had been specified
differently, which is certainly a valid argument, but doesn't change the
language as we have it.

At least it is possible to work out what - this - will refer to in any
language context.

Richard.

... and this is where we could get into a debate as to just what
exactly a "bug" is - but I'm really not interested in getting into that
- so I'll just "bow out" and let it go ...

- wASP

[RobG]

wASP wrote:
[...]

The way that I have it set up now, I've got a label control associated with
the control to be validated (textbox in this case), and I display my error
messages in that label - on both server-side and client-side (JavaScript).
I've got the basic mechanism working now, but I have one more little problem.
Do you mean you have a text input or similar to display the error
message in? (I suppose you don't mean a label element)

You could write the error to a div or span element. The error message
element can be associated with the appropriate form control using
patterns in the ID, something like:

<input id="someControl 01" ... >I am a text input 01
<input id="someControl 01_Error" ... >Error for input 01 goes here

<input id="someControl 02" ... >I am a text input 02
<input id="someControl 02_Error" ... >Error for input 02 goes here


I'm trying to figure out a way to deactivate the label control when
the error condition is resolved (and there is no longer an error),
but I can't seem to find what I need in the way of documentation
for doing this. I don't want to remove the label control from the
DOM hierarchy, just deactivate it - so that I can reuse it in the
event that there is another error condition. I don't know how
to do that with JavaScript.
Form controls can be 'deactivated' by setting their disabled attribute
to 'true'. By default, it is set to false (i.e. not disabled).
Disabling it will stop its value from being submitted, but even if its
value is submitted you can ignore it at the server.

You can hide the control by setting its - style.visibilit y - to
'hidden'. That way the control just disappears without affecting the
layout of your page (show it again with 'visible').

You can also set the display property to 'none' (hidden) and ''
(default), but that removes/replaces the element in the document flow so
it will probably make stuff jump around in the page.


I Googled on "JavaScript attributes", and "JavaScript setactive",
but I don't see anything that might be useful.
JavaScript doesn't have those properties/attributes, a good
understanding of the difference between JavaScript, HTML and the
Document Object Model (DOM) in essential.
Do you know of any books/websites that go beyond the fundamentals
of JavaScript?

I think the stock answer is:

"they are all crap, but the least crap is David Flanagan's
'javascript: The Definitive Guide' (O'Reilly)."

You can peruse it using Amazon's book-viewer:

<URL:http://www.amazon.com/gp/reader/1565923928/ref=sib_dp_pt/104-3429070-6769519#reader-page>

It even gets the thumbs-up every now and again. But you will probably
get the best advice and assistance right here.

--
Rob