Dumb newbie question- object references

Marc Wilson · Nov 25, 2003

I'm amending a website with some Javascript validation code.

I have a piece of HTML code that contains a form, and a JavaScript function
that does some validation. So far so good.

The code works fine in IE. But it fails miserably in NS/Mozilla.

NB- I've simplified this, the validation actually does a lot more than one
field.

The JavaScript function is defined in the <HEAD> element of the page.

The function looks something like...

_______________________________
function AVForm(form)
{
if (form.description1.length > 500)
{ alert('Length of description1 must not exceed 500 characters');
return false;
}
form.submit();
}

_______________________________

The form is something like:

________________________________

<form method="POST" ENCTYPE="multipart/form-data"
action="...url" name="add_description">

There's a textarea called description1

At the end of the form is a clickable image.

<a href="javascript:AVform(add_description);">
<image src="..." alt="Click to submit form">
....

</form>
___________________________________

The problem is- this works fine in IE.

The javascript routine is called, validates the form, if all is well, the
form is submitted and we go on to the next stage.

In Mozillla, nothing happens. If you have the JavaScript console open, you
see a message saying: add_description is not defined.

But add_description is the name of the form that contains the link.
Is there something about passing object references by name that's odd in
Mozillla?

Am I missing something basic and stupid?

I've been going up the wall trying to sort this one out.

Help?

--
Marc Wilson

Cleopatra Consultants Limited - IT Consultants
2 The Grange, Cricklade Street, Old Town, Swindon SN1 3HG
Tel: (44/0) 70-500-15051 Fax: (44/0) 870 164-0054
Mail: (e-mail address removed) Web: http://www.cleopatra.co.uk
_________________________________________________________________
Try MailTraq at https://my.mailtraq.com/register.asp?code=cleopatra

Michael Winter · Nov 25, 2003

Marc Wilson wrote on 25 Nov 2003:

function AVForm(form)
{
if (form.description1.length > 500)

Use form.elements['description1'].length. It is more compatible: some
browsers don't like a control name being used as a property of a Form
object. The same goes for referencing forms in a document (see a
later comment).

{ alert('Length of description1 must not exceed 500
characters');

alert should be qualified: window.alert(...);

return false;
}
form.submit();
}

<form method="POST" ENCTYPE="multipart/form-data"
action="...url" name="add_description">

There's a textarea called description1

You should really use a better name for an identifier - it should be
meaningful. 'description' is fine. Having three descriptions simply
named 'description1', 'description2', and 'description3' is not.

At the end of the form is a clickable image.

<a href="javascript:AVform(add_description);">

1) *Never* use a JavaScript protocol specifier. Use an intrinsic
event[1]: that's what they're there for. If JavaScript is disabled,
that URI is invalid.
2) To refer to the form, use: document.forms['add_description']

That should get your script working (assuming there are no other
errors), but you could use a button for this entire section instead:

<BUTTON type="submit" value="Send description"><IMG src="..."
alt="Click to submit form"></BUTTON>

....then add onsubmit to your form:

<FORM ...other attributes... onsubmit="return AVForm(this)">

....and validate like so:

function AVForm(form) {
if (500 < form.elements['description1'].length) {
window.alert('...');
return false; // Cancel submission
}
return true; // Let the submission complete
}

Of course, this would mean big changes, so it's just a suggestion.
One advantage is that you need not use a void link (href="#"). A
disadvantage is how a button renders the image (you might not like
it).

Hope that helps,
Mike

[1] If you use intrinsic events, be sure to specify the default
scripting language using a META element:

<META http-equiv="Content-Script-Type" content="text/javascript">

Lee · Nov 25, 2003

Marc Wilson said:

I'm amending a website with some Javascript validation code.

I have a piece of HTML code that contains a form, and a JavaScript function
that does some validation. So far so good.

The code works fine in IE. But it fails miserably in NS/Mozilla.

function AVForm(form)
{
if (form.description1.length > 500)
{ alert('Length of description1 must not exceed 500 characters');
return false;
}
form.submit();
}

<form method="POST" ENCTYPE="multipart/form-data"
action="...url" name="add_description">

<a href="javascript:AVform(add_description);">
<image src="..." alt="Click to submit form">

Two problems.

1. Most browsers won't let you refer to the form simply
as "add_description". It's probably not really criminal
that IE allows that, but it's pretty disgusting.

2. You should never submit a form from a function called
via the javascript: pseudo-protocol.

The simplest (but not really best) solution is to change:

<a href="javascript:AVform(add_description);">
to
<a href="otherPage.html"
onclick="AVform(document.add_description);return false">

where "otherPage.html" is a page that is only seen by
visitors that don't have JavaScript enabled. It should
explain and apologize.

A better solution would be to use a real image element
to submit the form, and to use the onsubmit handler of
the form to do your validation.

Lasse Reichstein Nielsen · Nov 25, 2003

Marc Wilson said:
The code works fine in IE. But it fails miserably in NS/Mozilla. ....
<a href="javascript:AVform(add_description);">
<image src="..." alt="Click to submit form">

You are misusing the "alt" attribute. It is the text that is shown
when the image isn't, not extra information. What you want is the
"title" attribute.

Why use a link and an image to submit. Just use
<input type="image" src="...">
Then put the verification in the form's onsubmit handler:
<form action="..." id="form" onsubmit="return AVform(add_description)">
(or something).

The problem is- this works fine in IE.

You are right. That is the problem.

IE allows a lot of things that are somewhere between plain wrong and
just proprietary.

The javascript routine is called, validates the form, if all is well, the
form is submitted and we go on to the next stage.

If you use the onsubmit handler as outlined above, just return false
if you don't want to submit. Otherwise the submit button does what it
should.

In Mozillla, nothing happens. If you have the JavaScript console open, you
see a message saying: add_description is not defined.

But add_description is the name of the form that contains the link.

You are using the name of the form, "add_description", as a global
variable. That only works in IE.
Use
if (document.forms['add_description'].
elements['description1'].length > 500)

Is there something about passing object references by name that's odd in
Mozillla?

No. The problem is accessing the object. You do that by name, but by
going through the proper collections, not by using the name as a global
variable.

Am I missing something basic and stupid?

Basic, yes. It's one of the first errors people discover when they
try to make IE-specific code work in other browsers. Very common,
nothing to be ashamed about (as long as you learn from it

.

Stupid, yes, and I think the stupidity is located in Redmond.

/L

Marc Wilson · Nov 26, 2003

I take the various points about using an image as a button, but I'm
making changes to a long-standing website and the customer does not want
his expensively-crafted images messing about.

The other thing I should note is that my JavaScript book says that
clicking on an image button does not fire the "onSubmit" event- it has
to be a "real" button for that. It's pants if it's true.

I've amended the site to use document.forms.add_description on the call,
and it now works fine with IE, Mozilla, Netscape. I've not had time to
test it on Opera, but I will.

By the way, inside the function, I don't need all the object
qualification, because the "myform" variable has resolved it all- it
works fine with just myform.description1 etc.

Thanks for all the help and suggestions.

I'm rapidly coming to the conclusion that the original author of the
site didn't know as much about JavaScript as he thought, and I've
probably already passed him by- he did a lot of dumb things of the sort
you might do by copying examples out of a book without thinking about it
too much.

Still lots to learn, though.

About as basic "Newbie-Question" that you can get.	3	Sep 4, 2023
How to not load an insanely big dataset in less than 50 hrs	1	Sep 2, 2023
How to display input options only after selecting an option from the 'select class' tag JS?	6	May 12, 2023
Uhhhhh, What can I do next?	6	Nov 25, 2023
Jquery not triggering / acting as expected.	0	Mar 6, 2022
Dumb Newbie Question	6	Aug 27, 2003
need some newbie help...	3	Sep 25, 2008
newbie question - regular expression	6	Mar 14, 2006

Dumb newbie question- object references

Marc Wilson

Michael Winter

Lee

Lasse Reichstein Nielsen

Marc Wilson

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads