Button with onClick inside Form (with Submit Button)

D

Dr. Leff

In Internet Explorer,
I get the error message "Object Expected" when
we click on the button ("Text") when I click in
Internet Explorer.

In Mozilla, clicking the button invokes the Action
(recordurlvote.scgi)

.. (Obviously, this is a simplified
version of a larger program I am developing.) Can somebody spot what
I am
doing wrong. I tried INPUT TYPE=BUTTON and various flavors of setting
up
the Javascript for the function being called!

<HTML><BASE HREF="/users/mflll/T/"><HEAD><TITLE> Hello</Title></
HEAD><BODY>
<HEAD><STYLE type="text/css">P.c {text-align: center} H1.c <text-
align:center></STYLE></HEAD>
aaadlm
<SCRIPT TYPE=JAVASCRIPT>
function s() {alert ("works");};
</SCRIPT>
<FORM METHOD="POST" ACTION="http://www.wiu.edu/cgi/users/mflll/T/
recordurlvote.scgi">
<BUTTON Value="Display" NAME="r"
onClick="s()">Text</BUTTON>

<P><INPUT TYPE="submit">
</FORM>

I believe the problem is the syntax to have a button inside a form do
one thing, a local javascript function, when the button is clicked
and another thing (the url specified in the ACTION)
when the submit button is invoked.)

I also tried putting a ;return false after the call to s() but that
did not
help

Dr. Laurence Leff, ASsociate Professor of Computer Science,
Western Illinois University, Macomb IL 61455 Fax 309 298 2302 Pager
309 367 0787
 
T

Thomas 'PointedEars' Lahn

dn said:
There was so much wrong with your example source that I can only state:
I sincerely hope your actual code looks NOTHING like your example...

Pot, kettle, black.

A DOCTYPE declaration is required here. This piece of markup should first
be declared HTML 4.01 Transitional, for it is not Valid HTML 4.01 Strict yet.
vvvvvvvv
<HTML>
<BASE HREF="/users/mflll/T/">

That element and attribute is rarely necessary, and should always be used
with caution. In any way, it must be the child element of the `head'
element, not of the `html' element.
<HEAD>
<TITLE> Hello
</Title>

The `title' element should not contain leading or trailing whitespace.

A declaration of the used encoding and the default scripting language should
be included here.
</HEAD>
<BODY>
<HEAD>

The `body' element MUST NOT contain a `head' element. The `html' element
is the only element that may have a `head' element as its child element.
<STYLE type="text/css">
P.c {text-align: center}
H1.c { text- align:center}

Class names should be descriptive. `c' certainly is not.

There MUST NOT be whitespace after the `-' of the property name.
Maybe a typo.
</STYLE>
<SCRIPT TYPE="text/javascript">
function s() {

Identifiers should be descriptive. `s' certainly is not.
alert ("works");
return false;

The indentation is broken here due to a mix of tabulator characters and
space characters being used instead of only interoperable space characters
(2 or 4 for each indentation level is recommended). Also, alert() is a
property of Window objects and should be called so:

window.alert(...);

Returning `false' serves no purpose here, as the target element is not
an `a' element, but a `button' element.
}
</SCRIPT>
</HEAD>
<body>
<FORM METHOD="POST" ACTION="http://www.wiu.edu/cgi/users/mflll/T/recordurlvote.scgi">
<BUTTON Value="Display" NAME="r" onClick="return s();">Text</BUTTON>

The `button' element has some issues with interoperability despite its being
defined in HTML 4.01, and it is not necessary here. The control also does
not need a name here, and it should be generated with client-side scripting
so that it is only displayed with the support for the former is present.

<script type="text/javascript">
document.write('<input type="button" value="Text" onclick="s()">');
<P>
<INPUT TYPE="submit">

The `p' element should be closed explicitly, although HTML allows to omit
the close tag. However, the former would be much less error-prone, generally.

Not setting the `value' attribute for the input[type="submit"] element
causes it to use the default value, which is different with every user
agent and platform. That may not be desired.
</FORM>
</body>
</html>

At least http://validator.w3.org/ and http://jigsaw.w3.org/css-validator
should be applied on markup and CSS code before it is posted.


PointedEars
 
T

Thomas 'PointedEars' Lahn

dn said:
garbage in garbage out

Criticizing others for their bad code, providing no explanation as to why
it is bad, and then posting equally bad code serves no purpose other than
having a bashing at someone. That is hardly reasonable. The second code
or posting should then better have not been posted at all.


PointedEars
 
T

Thomas 'PointedEars' Lahn

dn said:
I've taken your emailed suggestions.

Thank you :)
I would like to point out that its possible the OP does not care whether
or not their code is correct, they just want it to work. I cleaned it
up enough to remedy the problem ... If he wants to learn best practices
or "go Valid" then thats a choice he/she should make for self.

The Web is full of resources to aid in that endeavor.

However, incorrect code is unlikely to work:

http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you


HTH

PointedEars
 
J

Jeremy

Dr. Leff said:
In Internet Explorer,
I get the error message "Object Expected" when
we click on the button ("Text") when I click in
Internet Explorer.

In Mozilla, clicking the button invokes the Action
(recordurlvote.scgi)

. (Obviously, this is a simplified
version of a larger program I am developing.) Can somebody spot what
I am
doing wrong. I tried INPUT TYPE=BUTTON and various flavors of setting
up
the Javascript for the function being called!

<HTML><BASE HREF="/users/mflll/T/"><HEAD><TITLE> Hello</Title></
HEAD><BODY>
<HEAD><STYLE type="text/css">P.c {text-align: center} H1.c <text-
align:center></STYLE></HEAD>
aaadlm
<SCRIPT TYPE=JAVASCRIPT>
function s() {alert ("works");};
</SCRIPT>
<FORM METHOD="POST" ACTION="http://www.wiu.edu/cgi/users/mflll/T/
recordurlvote.scgi">
<BUTTON Value="Display" NAME="r"
onClick="s()">Text</BUTTON>

<P><INPUT TYPE="submit">
</FORM>

I believe the problem is the syntax to have a button inside a form do
one thing, a local javascript function, when the button is clicked
and another thing (the url specified in the ACTION)
when the submit button is invoked.)

I also tried putting a ;return false after the call to s() but that
did not
help

Dr. Laurence Leff, ASsociate Professor of Computer Science,
Western Illinois University, Macomb IL 61455 Fax 309 298 2302 Pager
309 367 0787


First step to is to fix your code as others have suggested. However,
nobody let you in on a secret of the button element.

If a button element with type="submit" is inside a form, it will submit
the form. The default type of a button (in Mozilla, at least) is
"submit". Therefore, in addition to proper code, you need to specify
the button type as "button":

<button type="button" onclick="...">text</button>

On a related note, the name and value of your button do nothing. A
button element is not successful.

Otherwise it will always submit the form when you click it unless you
cancel the even with javascript (which is a bit less graceful than using
the attribute that was intended to make this distinction).

Jeremy
 
T

Thomas 'PointedEars' Lahn

Randy said:
Thomas 'PointedEars' Lahn said the following on 9/10/2007 4:35 PM:

Pot, kettle, black:

if(window && window.alert && ......)

I don't think this would suffice, unless the part marked with ellipses
contains a feature test as to whether or not it likely that the method
can be called.
And yes, I can name a UA that has a window object, supports script, but
does not support alert in any form, it throws errors.

Please do. If that really is the case, I (we) may have to adapt my (our)
scripts to ensure code quality.


PointedEars
 
J

John Hosking

dn said:
Thomas 'PointedEars' Lahn wrote:
I would like to point out that its possible the OP does not care whether
or not their code is correct, they just want it to work.

Two thoughts occur to me here:

1. How can you (me,we,OP) be sure something will work if it's not correct?

2. Supposing, just supposing, that the OP does *not* care whether their
code is correct (and when I try to suppose that, I think, "what a doofus
that OP must be"), what about the rest of us? If you reserve to yourself
(and all other posters, respectively) the right to post bad code which
might "work", said code needs to be labelled in all cases with a notice,
"Warning! Suspect code which (probably)(maybe) works for the OP but is
actually kind of crappy." Or something.

I cleaned it
up enough to remedy the problem ... If he wants to learn best practices
or "go Valid" then thats a choice he/she should make for self.

Meaning, AIUI, seekers of best practices should disdain your advice. Eh?
The Web is full of resources to aid in that endeavor.

I thought this NG was supposed to be such a resource.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top