Button with onClick inside Form (with Submit Button)

Dr. Leff · Sep 10, 2007

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

Thomas 'PointedEars' Lahn · Sep 10, 2007

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

Thomas 'PointedEars' Lahn · Sep 10, 2007

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

Thomas 'PointedEars' Lahn · Sep 10, 2007

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

Jeremy · Sep 11, 2007

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

Thomas 'PointedEars' Lahn · Sep 11, 2007

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

John Hosking · Sep 11, 2007

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.

Lee · Sep 11, 2007

Dr. Leff said:

Gutsy move, posting both your FAX and pager numbers to USENET.

--

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Function call from button to automatic	7	Mar 17, 2023
<Button ...> display is fine, except for two things	1	Oct 23, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023
Sending SUBMIT to an email address	1	Nov 17, 2020
Problems with using event handlers for button and textarea input	1	Nov 29, 2021
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated	1	Aug 29, 2023
Remove Start Button from Clock	2	Jan 16, 2021

Button with onClick inside Form (with Submit Button)

Dr. Leff

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Thomas 'PointedEars' Lahn

Jeremy

Thomas 'PointedEars' Lahn

John Hosking

Lee

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads