Firing event handler with rolling image script obtained from a tutorialwebsite.

[Bundy]

Hi

On my webpages I have replaced the submit button with a rolling submit
button using the script below (Script 1). This script is used by many
of my webpages and is included in a external file.

There are two webpages that use onSubmit event handler to fire a script
in an external file but the event handler is no longer firing.
onSubmit ="return validating_username_and_password()"

How would I change the script below so that it will fire onSubmit event
handler or any other event handler?

Script 1
<!--
// copyright 1999-2001 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but keep this
// notice with the code.
var submitRolls = new Object();

function submitroll(src, oversrc, name)
{
this.src=src;
this.oversrc=oversrc;
this.name=name;
this.alt="Submit Query";
this.write=submitroll_write;
}

function submitroll_write()
{
var thisform = 'document.forms[' + (document.forms.length - 1) + ']';
submitRolls[this.name] = new Object();
submitRolls[this.name].over = new Image();
submitRolls[this.name].over.src = this.oversrc;
submitRolls[this.name].out = new Image();
submitRolls[this.name].out.src = this.src;

document.write
(
'<A onMouseOver="if (document.images)document.images[\'' + this.name +
"'].src=submitRolls['" + this.name + '\'].over.src"' +
' onMouseOut="if (document.images)document.images[\'' + this.name +
"'].src=submitRolls['" + this.name + '\'].out.src"' +
' HREF="javascript:'
);

if (this.sendfield)
{
if (! this.sendvalue)
this.sendvalue = 1;
document.write(thisform, ".elements['", this.sendfield, "'].value='",
this.sendvalue, "';");
}

document.write(thisform + '.submit();void(0);"');
if (this.msg)document.write(' onClick="return confirm(\'' , this.msg,
'\')"');
document.write('>');

document.write('<IMG SRC="' + this.src + '" ALT="' + this.alt + '"
BORDER=0 NAME="' + this.name + '"');
if (this.height)document.write(' HEIGHT=' + this.height);
if (this.width)document.write(' WIDTH=' + this.width);
if (this.otheratts)document.write(' ' + this.otheratts);
document.write('></A>');
if (this.sendfield)
{
document.write('<INPUT TYPE=HIDDEN NAME="' + this.sendfield + '">');
document.forms[document.forms.length -
1].elements[this.sendfield].value='';
}
}

//-->

Your help will again be appreciated. (This is my secong request for
assistance today).

Regards

Bundy

[RobG]

Bundy wrote:

Hi

On my webpages I have replaced the submit button with a rolling submit
button using the script below (Script 1). This script is used by many
of my webpages and is included in a external file.

There are two webpages that use onSubmit event handler to fire a script
in an external file but the event handler is no longer firing.
onSubmit ="return validating_username_and_password()"

What you are doing is calling the submit() method of the form rather
than using a submit button. The effect is that the form's submit
method is not called when the pseudo submit button is clicked. It also
means that users with JavaScript disabled or not available, or those
where your script doesn't run properly, can't submit your forms.

If you wish to use a roll-over for the submit button, then use an input
type image (which is a submit button by default) and ditch all that
code. There are some side effects to that in IE if you are using
multiple submit buttons for the one form.

If you want to keep using an A element and onclick to call the form's
submit method (not a good idea), then at least use CSS and the A
element's hover attribute to swap the image, using the code you have is
very inefficient. You should be able to adapt the following:

<URL: http://www.alistapart.com/articles/slidingdoors2/ >

It also means your buttons only need one image that slides up/down or
left/right, not two. The result is no pre-loading, no extra img
objects, no additional script, etc. You can use the same strategy for
an image button, but since IE doesn't support the hover attribute on
anything other than A elements, use onmouseover/out to slide the image.
Then users without javascript can still submit your forms.

How would I change the script below so that it will fire onSubmit event
handler or any other event handler?

I would ditch it altogether and use a real submit button.

Script 1
<!--

HTML comments delimiters inside script elements are completely
unnecessary, just don't use them.

[...]
--
Rob

[Bundy]

Thank you

I have got rid of all the code and instead using two images with
onmouseover and onmouseout.

Will look into using one image with CSS.

Regards

Bundy