Automatically submit form after selection

Discussion in 'Javascript' started by Marco, Feb 21, 2011.

  1. Marco

    Marco Guest

    Hi,

    I want to automatically an html form when the user selects one item from a
    drop down menu. It doesn't work as expected. I get the error message:

    this.submit is not a function

    and the form is not automatically submitted. What's wrong? Here's my code:

    <?xml version='1.0' encoding='utf-8' standalone='yes'?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head><meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
    <title>
    PageTitle
    </title>
    </head>
    <body>

    <form action="" method="post">
    <p>
    <select name="foo" onchange="this.submit();">
    <option value="1">First</option>
    <option value="2">Second</option>
    </select>
    <input type="submit" name="submit" value="Submit" />
    </p>
    </form>

    </body>
    </html>

    Regards
    Marco
    Marco, Feb 21, 2011
    #1
    1. Advertising

  2. Marco wrote:

    > I want to automatically an html form when the user selects one item from a
    > drop down menu. It doesn't work as expected. I get the error message:
    >
    > this.submit is not a function
    >
    > and the form is not automatically submitted. What's wrong? Here's my code:


    > <form action="" method="post">
    > <p>
    > <select name="foo" onchange="this.submit();">


    this.form.submit()


    --

    Martin Honnen
    http://msmvps.com/blogs/martin_honnen/
    Martin Honnen, Feb 21, 2011
    #2
    1. Advertising

  3. Marco wrote:

    > I want to automatically an html form when the user selects one item from a
    > drop down menu.


    Be aware that this creates an accessibility issue.

    > It doesn't work as expected. I get the error message:
    >
    > this.submit is not a function
    >
    > and the form is not automatically submitted. What's wrong? Here's my code:
    >
    > <?xml version='1.0' encoding='utf-8' standalone='yes'?>
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html
    > xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


    This document is _not_ "html" as you stated above, it is _XHTML_.

    Please do not use XHTML unless you have to and know what you are doing.
    Your statement above aside, you probably do neither:

    - You are including an XML declaration that declares UTF-8 as character
    encoding, while forcing HTML UAs into Quirks/Compatibility Mode with it
    (as the DOCTYPE-switcher code cannot find <!DOCTYPE html …> in the first
    line.

    UTF-8 is one of the XML default character encodings and does not need to
    be declared to begin with.

    - `standalone=yes' option is simply wrong here; this document is explicitly
    _not_ standalone as it needs the referred DTD in order to be parsed.

    Chances are that you are also serving this as text/html, while
    application/xhtml+xml would be recommended.

    <http://www.w3.org/TR/xhtml-media-types/#text-html>

    Declare and use HTML 4.01 Strict, and serve it as text/html, instead.

    > <head><meta
    > http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />


    An XHTML document has to be well-formed ─ and so its character encoding
    known ─ well before the XML parser reaches this line. This element only
    makes sense for HTML-compatible XHTML documents served as `text/html' (which
    you are probably doing anyway, akthough I am not so sure about the HTML-
    compatibility), and then it should be "text/html; …" there.

    This `meta' element is necessary only for resources that you expect to be
    used without HTTP anyway, as the corresponding HTTP header takes precedence
    (and SHOULD be present).

    > <body>
    >
    > <form action="" method="post">
    > <p>
    > <select name="foo" onchange="this.submit();">


    You are trying to submit the control, but such an object does not have a
    submit() method. Submit the form instead:

    this.form.submit();


    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, Feb 21, 2011
    #3
  4. Marco

    Marco Guest

    On 2011-02-21 Stefan Weiss <> wrote:

    > On 21/02/11 16:54, Marco wrote:
    > > I want to automatically an html form when the user selects one item from a
    > > drop down menu. It doesn't work as expected. I get the error message:
    > >
    > > this.submit is not a function

    >
    > Your onchange attribute is on the <select> element, so 'this' refers to
    > the select. You want this.form.submit(), but...


    I also tried this.

    > > <form action="" method="post">
    > > <p>
    > > <select name="foo" onchange="this.submit();">
    > > <option value="1">First</option>
    > > <option value="2">Second</option>
    > > </select>
    > > <input type="submit" name="submit" value="Submit" />

    >
    > This <input> element is named "submit", which is a bad idea. form.submit
    > now refers to this button instead of the form's submit() method. Use a
    > different name for the button.


    That's the solution. Thanks.


    Marco
    Marco, Feb 21, 2011
    #4
  5. Marco

    Marco Guest

    On 2011-02-21 Thomas 'PointedEars' Lahn <> wrote:

    >> I want to automatically an html form when the user selects one item froma
    >> drop down menu.

    >
    >Be aware that this creates an accessibility issue.


    Why? (BTW: This was not my idea. The client's request.)

    > This document is _not_ "html" as you stated above, it is _XHTML_.


    Sorry, my fault.

    > Please do not use XHTML unless you have to and know what you are doing.


    I'm not an expert in those things. I read a book and it says XHTML should be
    used in new documents that are created from scratch to increase accessibility
    and it's easier for the browsers to cope with XML compared to SGML.

    > Your statement above aside, you probably do neither:
    >
    > - `standalone=yes' option is simply wrong here; this document is explicitly
    > _not_ standalone as it needs the referred DTD in order to be parsed.


    I collected my information from various sources, so I just included this line
    because somewhere was stated that every XML file begins with this line. I'll
    remove it.

    > Chances are that you are also serving this as text/html, while
    > application/xhtml+xml would be recommended.


    I serve application/xhtml+xml.

    > Declare and use HTML 4.01 Strict, and serve it as text/html, instead.


    My book says I should go for XHTML for new documents, and XHTML served as
    text/html is wrong in my opinion.

    > > <head><meta
    > > http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />

    >
    > An XHTML document has to be well-formed ─ and so its character encoding
    > known ─ well before the XML parser reaches this line. This element only
    > makes sense for HTML-compatible XHTML documents served as
    > `text/html'


    Thanks, that's what I thought before. Makes sense. But they included this line
    in the book and I also found it in many web pages, that's why I put it here.

    > (which you are probably doing anyway,


    Why do you think so?


    > This `meta' element is necessary only for resources that you expect to be
    > used without HTTP anyway, as the corresponding HTTP header takes precedence
    > (and SHOULD be present).


    Is present.

    Thanks for your corrections/explanations.
    BTW: The book mentioned is Head First HTML+XHTML with CSS


    Marco
    Marco, Feb 21, 2011
    #5
  6. Marco wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >>> I want to automatically an html form when the user selects one item from
    >>> a drop down menu.

    >> Be aware that this creates an accessibility issue.

    >
    > Why?


    Because it makes the form harder to use with the keyboard.

    > (BTW: This was not my idea. The client's request.)


    It is part of your job as a (Web) developer to tell the customer which of
    their requests make sense (in a Web context) and which don't.

    >> Please do not use XHTML unless you have to and know what you are doing.

    >
    > I'm not an expert in those things. I read a book and it says XHTML should
    > be used in new documents that are created from scratch to increase
    > accessibility and it's easier for the browsers to cope with XML compared
    > to SGML.


    That statement is wrong for a number of reasons that are off-topic here.
    Please subscribe to comp.infosystems.www.authoring.html.

    >> Chances are that you are also serving this as text/html, while
    >> application/xhtml+xml would be recommended.

    >
    > I serve application/xhtml+xml.


    So this Web application does not need to work in Microsoft Internet Explorer
    or other MSHTML-based browsers? Because with this Content-Type you are only
    going to see a download dialog there.

    >> Declare and use HTML 4.01 Strict, and serve it as text/html, instead.

    >
    > My book says I should go for XHTML for new documents, and XHTML served as
    > text/html is wrong in my opinion.


    It is certainly error-prone to serve XHTML as text/html, and the advantages
    in doing so are few. When it is the only viable option, it is acceptable
    though. Further constraints (like XML-based CMSs) aside, the best option
    nowadays is to declare and use HTML 4.01 (and serve it as text/html, of
    course).

    >> This [`meta'] element only makes sense for HTML-compatible XHTML
    >> documents served as `text/html'

    >
    > Thanks, that's what I thought before. Makes sense. But they included this
    > line in the book and I also found it in many web pages, that's why I put
    > it here.
    >
    >> (which you are probably doing anyway,

    >
    > Why do you think so?


    Because the rest of the markup suggested general cluelessness.

    Unfortunately, it is a frequently observable pattern that people use XHTML
    without even needing its features (or being aware of them or proper XHTML
    syntax in the first place) ─ because it's "cool" and whatnot ─, and serve it
    as text/html so that browsers parse and error-correct it as if it was only
    HTML tag soup. This pattern includes clueless people complaining about
    *perceived* W3C Validator bugs when they write `<' or `&' in their XHTML
    `script' elements, which they are then trying to "fix" by using bad old
    pseudo-comments, which actually comments out the entire PCDATA-typed content
    of the `script' element in XHTML, leaving only `<script/>' (but they are not
    aware of this as the XHTML is parsed like HTML). BTST much too often to not
    develop a sixth sense for it ;->

    > Thanks for your corrections/explanations.


    You're welcome.

    > BTW: The book mentioned is Head First HTML+XHTML with CSS


    Ask for a refund.


    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, Feb 21, 2011
    #6
  7. Marco

    Marco Guest

    On 2011-02-21 Thomas 'PointedEars' Lahn <> wrote:

    > > Thomas 'PointedEars' Lahn wrote:
    > >>> I want to automatically an html form when the user selects one item from
    > >>> a drop down menu.
    > >> Be aware that this creates an accessibility issue.

    > >
    > > Why?

    >
    > Because it makes the form harder to use with the keyboard.


    I tried it in several browsers and keyboard navigation seems to work fine.

    > > (BTW: This was not my idea. The client's request.)

    >
    > It is part of your job as a (Web) developer to tell the customer which of
    > their requests make sense (in a Web context) and which don't.


    I do. But if he insists on a particular behaviour I have to deliver what he
    requests otherwise I can watch out for a new job soon.

    > >> Chances are that you are also serving this as text/html, while
    > >> application/xhtml+xml would be recommended.

    > >
    > > I serve application/xhtml+xml.

    >
    > So this Web application does not need to work in Microsoft Internet
    > Explorer or other MSHTML-based browsers?


    No. The other webapplications of the customer don't work on IE either.

    > Because the rest of the markup suggested general cluelessness.


    As I mentined before, I'm not an expert.


    Marco
    Marco, Feb 21, 2011
    #7
  8. Marco wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> > Thomas 'PointedEars' Lahn wrote:
    >> >>> I want to automatically an html form when the user selects one item
    >> >>> from a drop down menu.
    >> >> Be aware that this creates an accessibility issue.
    >> > Why?

    >> Because it makes the form harder to use with the keyboard.

    >
    > I tried it in several browsers and keyboard navigation seems to work fine.


    Tab to the `select' element (which you misnamed "drop down menu"; how this
    element is displayed is not formally specified and varies greatly among
    browsers and platforms), then press the Up or Down key (with or without
    pressing the Alt key along), and at least when the control loses focus (e.g.
    you tab away) you will see the form being submitted even though the user did
    not explicitly say that the selected value was the one they wanted to submit
    or that they were finished filling out the form.

    >> >> Chances are that you are also serving this as text/html, while
    >> >> application/xhtml+xml would be recommended.
    >> > I serve application/xhtml+xml.

    >> So this Web application does not need to work in Microsoft Internet
    >> Explorer or other MSHTML-based browsers?

    >
    > No. The other webapplications of the customer don't work on IE either.


    For that, I envy you.

    >> Because the rest of the markup suggested general cluelessness.

    >
    > As I mentined before, I'm not an expert.


    How to serve Valid markup is not expert knowledge, at least it should not
    be.


    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, Feb 21, 2011
    #8
  9. Marco

    Evertjan. Guest

    Marco wrote on 21 feb 2011 in comp.lang.javascript:

    >>Be aware that this creates an accessibility issue.

    >
    > Why? (BTW: This was not my idea. The client's request.)


    You are the expert, at least the client is paying you for that.
    So he will implicitly expect from you not to do things that are detrimental
    to him, even on his request.
    And if he still wants you to do such things, you should decline.
    You are "the doctor", so put your professional judgement before your
    earnings.

    PS: Some clients I just tell "that isn't possible",
    in stead of "that is strongly inadvisable",
    meaning I won't want to put them at unnecessary risk.


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Feb 22, 2011
    #9
    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,177
  2. John Devlon
    Replies:
    1
    Views:
    944
    Alexey Smirnov
    Sep 24, 2009
  3. Marco Alting
    Replies:
    7
    Views:
    498
    Thomas 'PointedEars' Lahn
    Oct 30, 2003
  4. Replies:
    3
    Views:
    655
  5. Kevin Audleman

    How do I automatically submit a form

    Kevin Audleman, Jan 17, 2008, in forum: Javascript
    Replies:
    5
    Views:
    133
    The Natural Philosopher
    Jan 18, 2008
Loading...

Share This Page