onClick submitForm()

[Erik]

I need to submit a form using a hyperlink, and I need to pass a
variable associated with that hyperlink.

Example: I have a page where employees enter event information, and
they are supplied a dropdown box to pick the promoter for that event.
If the promoter does not exist in the database, they need to add
him/her to the database so that the promoter can be associated with
the event. If the promoter does not exist, I want to provide a link
(Add Promoter), that will submit the form, and pass a variable to the
query page, either in the form scope or url scope, that is
"mode=addPromot er", so that I can take them immediately send them to
the promoters page, and then I will take them back to the event page
to fill in the rest of the information.

So, in a nutshell, I need to submit a form using a hyperlink, and to
also pass a variable in either the url scope or form scope.

Any help is greatly appreciated.

[Thomas 'PointedEars' Lahn]

Erik wrote:

I need to submit a form using a hyperlink, and I need to pass a
variable associated with that hyperlink.
You don't need to and you don't want to.
Example: I have a page where employees enter event information, and
they are supplied a dropdown box to pick the promoter for that event.
If the promoter does not exist in the database, they need to add
him/her to the database so that the promoter can be associated with
the event. If the promoter does not exist, I want to provide a link
(Add Promoter), that will submit the form, and pass a variable to the
query page, either in the form scope or url scope, that is
"mode=addPromot er", so that I can take them immediately send them to
the promoters page, and then I will take them back to the event page
to fill in the rest of the information.

A submit button with another `name' and/or `value' attribute
value than the default submit button will serve that purpose
and won't require neither support of client-side JavaScript
nor unreliable and time-consuming changes to the `action'
value of the form.
PointedEars

[Erik H]

I understand that possibility, but I need to use a hyperlink.

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

[Thomas 'PointedEars' Lahn]

Erik H wrote:

I understand that possibility, but I need to use a hyperlink.

You may want to explain why you think a hyperlink is necessary.
FWIW, here you are:

<a
href="javascrip t:doSomethingWi thTheActionAttr ibute(...);docu ment.forms[...].submit();"
onclick="doSome thingWithTheAct ionAttribute(.. .);
document.forms[...].submit(); return false;">Submit</a>

will also serve the purpose if client-side JavaScript is supported
and the `action' attribute of the `form' element can be manipulated
by assigning values to a property of the respective DOM object and
submitting forms by scripts is allowed.

The doSomethingWith TheActionAttrib ute(...) function is up to you,
however, depending on the values the resource specified with the
`action' attribute expects.
PointedEars

[Lasse Reichstein Nielsen]

Thomas 'PointedEars' Lahn <Po*********@we b.de> writes:

<a
href="javascrip t:doSomethingWi thTheActionAttr ibute(...);docu ment.forms[...].submit();"
onclick="doSome thingWithTheAct ionAttribute(.. .);
document.forms[...].submit(); return false;">Submit</a>

There is no need to have a javascript:-URI in the href. If the browser
supports javascript, then the onclick will work. If not, the href
won't work either. That is, there is almost never any need for a
javascript:-URI.

It is better to let the href point to an HTML page that makes sense.
Either a page that works without the javascript, or that lets the
server perform the action that the client-side javascript couldn't,
or just a link to a page that explains that this page needs javascript.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Erik]

The reason for using a hyperlink is aesthetics. Using a button would
definitely be simple, I use that for this type situation in other places,
but here I want/need to use something small, so either an image or a
hyperlink would work best.

My javascript abilities are still novice, so I'm a little lost with what
you suggested. My basic experience tells me that I can use
<a href="#" onclick="submit Form()">Add Promoter</a>, and then create a
function that will in turn submit the form, and at the same time pass the
variable of 'mode=addPromot er'. I am using ColdFusion, so I can pass the
variable in either the form or url scope.

Also, what I can use here will work when the user needs to edit the
promoter, so I can pass 'mode=editPromo ter' on a different page.

[Thomas 'PointedEars' Lahn]

Lasse Reichstein Nielsen wrote:

Thomas 'PointedEars' Lahn <Po*********@we b.de> writes:

<a
href="javascrip t:doSomethingWi thTheActionAttr ibute(...);docu ment.forms[...].submit();"
onclick="doSome thingWithTheAct ionAttribute(.. .);
document.forms[...].submit(); return false;">Submit</a>
There is no need to have a javascript:-URI in the href.

But there is.
If the browser
supports javascript, then the onclick will work. If not, the href
won't work either. That is, there is almost never any need for a
javascript:-URI.
Please note that event handlers are standardized, `javascript:' URIs are
not. The latter is `common practice' anyway, so the above combination has
a 100% chance to work if client-side JavaScript is supported and enabled.
It is better to let the href point to an HTML page that makes sense.
Either a page that works without the javascript, or that lets the
server perform the action that the client-side javascript couldn't,
You forgot that the form data to be submitted is then lost, so the
Good Thing you are suggesting and I generally agree with is AFAIS
not applicable here.

If you want people without JavaScript to submit forms, use form buttons
in the first place. If you don't like their look, use CSS to format them,
or use <input type="image" ...> for submit buttons (but note that Netscape
4.x users are then excluded.)
or just a link to a page that explains that this page needs javascript.

Doing that is the best way to piss off users. The better way is to write
that hyperlink dynamically using DOM scripting, document.write( ...) or
HTMLElement.app endChild(...), respectively.

And the best way is to discard hyperlinks for form operation, use
server-side scripting where possible, and use client-side scripting
if it reduces traffic (ref.: form validation.)
PointedEars

[Lasse Reichstein Nielsen]

Thomas 'PointedEars' Lahn <Po*********@we b.de> writes:

Lasse Reichstein Nielsen wrote:

If the browser supports javascript, then the onclick will work. If
not, the href won't work either. That is, there is almost never
any need for a javascript:-URI.

Please note that event handlers are standardized, `javascript:' URIs are
not. The latter is `common practice' anyway, so the above combination has
a 100% chance to work if client-side JavaScript is supported and enabled.

Do you know of *one* browser where the javascript:-URI works and the
onclick attribute doesn't? If there isn't one, there is no need for
the URI, since it will only ever be used by non-javascript browsers.
You forgot that the form data to be submitted is then lost, so the
Good Thing you are suggesting and I generally agree with is AFAIS
not applicable here.
That is a point. If there is another way to submit the form when
Javascript is off, then clicking the link can be a problem. The
javascript:-URI doesn't appear to do anything with Javascript off.
If you want people without JavaScript to submit forms, use form buttons
in the first place.
If you want people *with* Javascript to submit forms, use form buttons
anyway. That is what the user expects.

If a form uses a link instead of a submit button, I would easily be
confuzed about how to submit it.

or just a link to a page that explains that this page needs javascript.

Doing that is the best way to piss off users.

Is it so much better than making a page that fails completely if
Javascript is disabled? At least this way, the user will know what
went wrong.

However, I must admit that when I suggest such a link, it is partly
because I want the try to write the explanation for why his site cannot
work without Javascript. It can be an eye opener.
The better way is to write that hyperlink dynamically using DOM
scripting, document.write( ...) or HTMLElement.app endChild(...),
respectively.
That is a solution. If the link is vital to the page, the entire
page can be written that way.
And the best way is to discard hyperlinks for form operation,
Definitly!
use server-side scripting where possible, and use client-side
scripting if it reduces traffic (ref.: form validation.)

Yep,
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Thomas 'PointedEars' Lahn]

Erik wrote:

The reason for using a hyperlink is aesthetics.
You should learn that esthetics must always be implemented
in a way that does not oppose usability to be successful.
Using a button would definitely be simple, I use that for this type
situation in other places, but here I want/need to use something small,
so either an image or a hyperlink would work best.
What is it that you don't like `<input type="image" ...>'?
My javascript abilities are still novice, so I'm a little lost with what
you suggested. My basic experience tells me that I can use
<a href="#" onclick="submit Form()">Add Promoter</a>, and then create a
function that will in turn submit the form, and at the same time pass the
variable of 'mode=addPromot er'.
No, the user-defined submitForm() method must change the `action'
property of the DOM form object and *then* call its submit() method:

function submitForm(oFor m)
{
if (oForm && typeof oForm.action != "undefined" && oForm.submit)
{
oForm.action = "foobar";
oForm.submit();
}

return false;
}

<a
href="javascrip t:submitForm(do cument.forms[...])"
onclick="return submitForm(docu ment.forms[...]);">Submit</a>
I am using ColdFusion, so I can pass the
variable in either the form or url scope.
You could also manipulate the `value' property of a DOM `input'
object and then call the submit() method of the form object:

function submitForm(oFor m)
{
if (oForm
&& oForm.elements
&& oForm.elements["foo"]
&& oForm.elements["foo"].value)
&& oForm.submit)
{
oForm.elements["foo"].value = "bar";
oForm.submit();
}

return false;
}

Maybe it is required to use the setTimeout(...) function
to wait a few (milli)seconds before submitting the form:

setTimeout('doc ument.forms[...].submit()', 42);
Also, what I can use here will work when the user needs to edit the
promoter, so I can pass 'mode=editPromo ter' on a different page.

You need to pass $promoterID to that page,
too, using one of the suggested solutions.
PointedEars

[Thomas 'PointedEars' Lahn]

Lasse Reichstein Nielsen wrote:

Thomas 'PointedEars' Lahn <Po*********@we b.de> writes:

Lasse Reichstein Nielsen wrote:

> If the browser supports javascript, then the onclick will work. If
> not, the href won't work either. That is, there is almost never
> any need for a javascript:-URI.
Please note that event handlers are standardized, `javascript:' URIs are
not. The latter is `common practice' anyway, so the above combination has
a 100% chance to work if client-side JavaScript is supported and enabled.

Do you know of *one* browser where the javascript:-URI works and the
onclick attribute doesn't?

No, but that is irrelevant.
If there isn't one,
Although I (or you) don't know one, there may be one.
there is no need for the URI, since it will only ever be used by
non-javascript browsers.
You don't get the point. UAs that don't know the event handler will ignore
it and access the URI, while UAs that are standards-compliant will ignore
the URI since the event is canceled with the last statement in the handler.

You forgot that the form data to be submitted is then lost, so the
Good Thing you are suggesting and I generally agree with is AFAIS
not applicable here.

That is a point. If there is another way to submit the form when
Javascript is off, then clicking the link can be a problem. The
javascript:-URI doesn't appear to do anything with Javascript off.

OK, maybe I made myself not clear enough: The hyperlink to an alternative
document that is accessed when JavaScript support is not available, is in
*this* case complete nonsense since the form data provided (namely the
promoter's name to add) is then lost.

If you want people without JavaScript to submit forms, use form buttons
in the first place.

If you want people *with* Javascript to submit forms, use form buttons
anyway. That is what the user expects.

If a form uses a link instead of a submit button, I would easily be
confuzed about how to submit it.

Full ACK.

> or just a link to a page that explains that this page needs javascript.

Doing that is the best way to piss off users.

Is it so much better than making a page that fails completely if
Javascript is disabled? At least this way, the user will know what
went wrong.

You mean they know then that the webauthor is incompetent
enough not to foresee that certain possibility. Great.
However, I must admit that when I suggest such a link, it is partly
because I want the try to write the explanation for why his site cannot
work without Javascript. It can be an eye opener.

You played the devil's advocate again? ;-)

The better way is to write that hyperlink dynamically using DOM
scripting, document.write( ...) or HTMLElement.app endChild(...),
respectively.

That is a solution. If the link is vital to the page, the entire
page can be written that way.

No, that would be definitely a Bad Thing unless users without JavaScript
don't get there in the first place, i.e. it is not even listed in search
engines. But you then can disregard users without JavaScript anyway and
the time-consuming and sometimes hard-to-read DOM scripting is no longer
required.
PointedEars