Button with onClick inside Form (with Submit Button)

Discussion in 'Javascript' started by Dr. Leff, Sep 10, 2007.

  1. Dr. Leff

    Dr. Leff Guest

    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
     
    Dr. Leff, Sep 10, 2007
    #1
    1. Advertising

  2. dn wrote:
    > 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()">');
    </script>

    > <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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Sep 10, 2007
    #2
    1. Advertising

  3. dn wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> dn wrote:
    >>> 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.

    >
    > 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
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Sep 10, 2007
    #3
  4. dn wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> dn wrote:
    >>> Thomas 'PointedEars' Lahn wrote:
    >>>> dn wrote:
    >>>>> 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.
    >>> 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.

    >
    > 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
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Sep 10, 2007
    #4
  5. Dr. Leff

    Jeremy Guest

    Dr. Leff wrote:
    > 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
     
    Jeremy, Sep 11, 2007
    #5
  6. Randy Webb wrote:
    > Thomas 'PointedEars' Lahn said the following on 9/10/2007 4:35 PM:
    >> Also, alert() is a property of Window objects and should be called so:
    >>
    >> window.alert(...);

    >
    > 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
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Sep 11, 2007
    #6
  7. Dr. Leff

    John Hosking Guest

    dn wrote:
    > Thomas 'PointedEars' Lahn wrote:


    >>
    >> 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.


    >
    > 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.

    --
    John
    Pondering the value of the UIP: http://improve-usenet.org/
     
    John Hosking, Sep 11, 2007
    #7
  8. Dr. Leff

    Lee Guest

    Dr. Leff said:

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


    --
     
    Lee, Sep 11, 2007
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    6,237
  2. Network-Man
    Replies:
    5
    Views:
    78,498
    gaul1
    Jul 7, 2012
  3. Guest
    Replies:
    2
    Views:
    1,601
    Guest
    Oct 25, 2004
  4. Replies:
    2
    Views:
    259
  5. Replies:
    3
    Views:
    699
Loading...

Share This Page