asked on

behaviors, HTC, and onSubmit

Hello, I'm trying to write a HTML component that I can
attach a behaviour for the onSubmit event of a form.

ie, something like this:

--------------------------------------------------------

<COMPONENT>
<ATTACH EVENT="onsubmit" ONEVENT="ValidateData" />
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function ValidateData()
{
... do some validation ...
}
</SCRIPT>
</COMPONENT>

--------------------------------------------------------

...which is used in the following manner:

--------------------------------------------------------
<STYLE>
.ValidationForm {behavior:url(ValidationForm.htc)}
</STYLE>
<HTML>
<FORM CLASS="ValidationForm">
Income: <INPUT TYPE="text" LENGTH=50 NAME="Income">
<INPUT TYPE="submit" VALUE="Submit Form">
</FORM>
</HTML>
--------------------------------------------------------

Now the trouble is returning false from the ValidateData()
function doesn't seem to cancel the form submission like
it does if I was to do this the 'convential' way using
embedded (or otherwise) script (ie. <FORM onSubmit="return(ValidationForm());">) Is this a limitation, or am I doing something wrong?

Thanks for your help!

Craig

DreamMaster

You should call the function using return validateData()

That will make the return work...

Cheers,
Max.

FancyPants

ASKER

Thanks Max, I've already tried that with no success.

FancyPants

ASKER

Thanks Max, I've already tried that with no success.

DreamMaster

So this

<COMPONENT>
<ATTACH EVENT="onsubmit" ONEVENT="ValidateData" />
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function ValidateData()
{
... do some validation ...
}
</SCRIPT>
</COMPONENT>

would become

<COMPONENT>
<ATTACH EVENT="onsubmit" ONEVENT="return ValidateData" />
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function ValidateData()
{
... do some validation ...
}
</SCRIPT>
</COMPONENT>

Cheers,
Max.

DreamMaster

In that case please show me the code you have tried...

Max.

FancyPants

ASKER

Well, if you were just to put a return(false); in the
body of the validateData function of the above code you will notice that the form is still submitted.

Thanks,
Craig.

DreamMaster

Yes...but you need both....return false in the body and the return ValidateData did you do that?

Max.

FancyPants

ASKER

Yep, have tried both.. have tried all different combinations I can think of.. still no joy.

Thanks,
Craig.

DreamMaster

Have never heared of this being a limitation.....there must be something that is going wrong...

Max.

FancyPants

ASKER

Yes, I know, hence my question :) Even if you just put
a return(false); statement in the event handler the form
is still submitted.

Thanks for your help,
Craig.

DreamMaster

I will look up some more information in the morning need to sleep now....

Max.

DreamMaster

Probably the best thing I could tell you to do now..is to create a seperate function that will submit the form...this event will only be triggered when the function gets to that part if not you will simply return to the page as you were...

Max.

ZhongYu

You should use

event.returnVlaue = false;

BTW, I would use:
<attach event="onsubmit" handler="ValidateData"/>
If yours work too, it seems there are so many valid syntaxes.

webwoman

Take out the component and attach tags, see if it works then. If so, then it's because of the way you're using the javascript, NOT because the javascript itself is wrong.

I suspect that might be the case. Not sure though, but it would make sense.

ASKER CERTIFIED SOLUTION

ZhongYu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

FancyPants

ASKER

Exactly what I needed... Thanks ZhongYu.

Craig.

backdraf

<public:component>
<public:attach event="onsubmit" onevent="fnValidate()" />
<script language="vbscript">
function fnValidate()
if element.document.all.txtTest.value = "" then
window.event.cancelbubble = true
window.event.returnvalue = false
end if
end function
</script>
</public:component>