<select onchange="this.form.submit()"> and Submit button on one form

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • white lightning

    <select onchange="this.form.submit()"> and Submit button on one form

    How to have <select onchange="this. form.submit()"a nd also a Submit
    button on one form?

    I have something like this:

    <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"
    enctype="multip art/form-data" name="form1">
    <select onchange="this. form.submit();" name="prod">
    <option value="">Select product</option>
    <option value="12">abc</option>
    </select>

    <input type="submit" name="submit" value="Submit" />
    </form>

    In the above code, this.form.submi t() within the <selectdoes not
    have any effect. The submit button works fine.

    But when I removed the submit button from the <form>, the
    this.form.submi t() works fine.

    How can I have both form submissions within a single form?

    Thanks!
  • Doug Gunnoe

    #2
    Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

    On Sep 15, 10:06 pm, white lightning <crescent...@ya hoo.comwrote:
    How to have <select onchange="this. form.submit()"a nd also a Submit
    button on one form?
    >
    I have something like this:
    >
    <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"
    enctype="multip art/form-data" name="form1">
      <select onchange="this. form.submit();" name="prod">
            <option value="">Select product</option>
           <option value="12">abc</option>
      </select>
    >
      <input type="submit" name="submit" value="Submit" />
    </form>
    >
    In the above code, this.form.submi t() within the <selectdoes not
    have any effect. The submit button works fine.
    >
    But when I removed the submit button from the <form>, the
    this.form.submi t() works fine.
    >
    How can I have both form submissions within a single form?
    >
    Thanks!
    What do you suppose 'this' refers to in your code?

    Try:

    document.forms[x].submit()

    Replace x with the correct index for your form, if your form is the
    first in the document, it would be
    document.forms[0].submit()




    Comment

    • white lightning

      #3
      Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

      >
      What do you suppose 'this' refers to in your code?
      >
      Try:
      >
      document.forms[x].submit()
      >
      Replace x with the correct index for your form, if your form is the
      first in the document, it would be
      document.forms[0].submit()
      No that also does not work!

      Comment

      • Kiran Makam

        #4
        Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

        On Sep 16, 8:06 am, white lightning <crescent...@ya hoo.comwrote:
        But when I removed the submit button from the <form>, the
        this.form.submi t() works fine.
        The name of your submit button is 'submit' which is overriding the
        form's submit function. Rename the button to something else, it should
        work fine:

        <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"
        enctype="multip art/form-data" name="form1">
        <select onchange="this. form.submit();" name="prod">
        <option value="">Select product</option>
        <option value="12">abc</option>
        </select>

        <input type="submit" name="mySubmitB utton" value="Submit" />
        </form>

        - Kiran Makam

        Comment

        • Doug Gunnoe

          #5
          Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

          On Sep 15, 11:13 pm, Kiran Makam <kiranm...@gmai l.comwrote:
          On Sep 16, 8:06 am, white lightning <crescent...@ya hoo.comwrote:
          >
          But when I removed the submit button from the <form>, the
          this.form.submi t() works fine.
          >
          The name of your submit button is 'submit' which is overriding the
          form's submit function. Rename the button to something else, it should
          work fine:
          >
          <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"
          enctype="multip art/form-data" name="form1">
            <select onchange="this. form.submit();" name="prod">
                  <option value="">Select product</option>
                 <option value="12">abc</option>
            </select>
          >
            <input type="submit" name="mySubmitB utton" value="Submit" />
          </form>
          >
          - Kiran Makam
          Good catch!

          My bad, OP. 'this.form' just did not look right to me for some reason,
          but apparently it is.

          byw, what does 'this' refer to in this case? Certainly not the select
          element?

          Comment

          • Thomas 'PointedEars' Lahn

            #6
            Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

            Doug Gunnoe wrote:
            On Sep 15, 11:13 pm, Kiran Makam <kiranm...@gmai l.comwrote:
            >On Sep 16, 8:06 am, white lightning <crescent...@ya hoo.comwrote:
            >>But when I removed the submit button from the <form>, the
            >>this.form.sub mit() works fine.
            >The name of your submit button is 'submit' which is overriding the
            >form's submit function. Rename the button to something else, it should
            >work fine:
            >>
            ><form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"
            >enctype="multi part/form-data" name="form1">
            > <select onchange="this. form.submit();" name="prod">
            > <option value="">Select product</option>
            > <option value="12">abc</option>
            > </select>
            >>
            > <input type="submit" name="mySubmitB utton" value="Submit" />
            ></form>
            >[...]
            >
            [...]
            byw, what does 'this' refer to in this case? Certainly not the select
            element?
            No, it refers to the element object representing the `select' element in the
            DOM tree :) That object implements a `form' property, which is also defined
            in W3C DOM Level 2 HTML:

            <http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-94282980>

            AFAIK, the value of this in event handler attribute values (double meaning)
            is not defined in any public standard yet. I have yet to see a scriptable
            UA where it does not work so, though. (The `body' element makes one known
            exception to the rule, but that is considered a bug.)

            We have already discussed this several times before.
            (Double meaning again ;-))


            HTH

            PointedEars
            --
            Use any version of Microsoft Frontpage to create your site.
            (This won't prevent people from viewing your source, but no one
            will want to steal it.)
            -- from <http://www.vortex-webdesign.com/help/hidesource.htm>

            Comment

            • Joost Diepenmaat

              #7
              Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on one form

              Doug Gunnoe <douggunnoe@gma il.comwrites:
              Good catch!
              >
              My bad, OP. 'this.form' just did not look right to me for some reason,
              but apparently it is.
              yes.
              byw, what does 'this' refer to in this case? Certainly not the select
              element?
              of course it does. see HTMLSelectEleme nt (or any other form
              "sub-element") in:



              --
              Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

              Comment

              • Thomas 'PointedEars' Lahn

                #8
                Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                Joost Diepenmaat wrote:
                Doug Gunnoe <douggunnoe@gma il.comwrites:
                >byw, what does 'this' refer to in this case? Certainly not the select
                >element?
                >
                of course it does. see HTMLSelectEleme nt (or any other form
                "sub-element") in:
                "Form control" is the precise, concise, and well-understood term for what
                you call 'form "sub-element"' here. However, the meaning of `this' in event
                handler attribute values is by far not limited to form controls.
                You are referring to an obsolete Specification[1] here, though.
                The current Specification is
                <http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>


                PointedEars
                ___________
                [1] See <http://www.w3.org/TR/DOM-Level-2-HTML/>, "Status of this document",
                final paragraph
                --
                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$8 300dec7@news.de mon.co.uk>

                Comment

                • dhtml

                  #9
                  Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                  Thomas 'PointedEars' Lahn wrote:
                  Joost Diepenmaat wrote:
                  >Doug Gunnoe <douggunnoe@gma il.comwrites:
                  >>byw, what does 'this' refer to in this case? Certainly not the select
                  >>element?
                  >of course it does. see HTMLSelectEleme nt (or any other form
                  >"sub-element") in:
                  >
                  "Form control" is the precise, concise, and well-understood
                  Awesome job on that!



                  Glad you figured it out.

                  term for what
                  you call 'form "sub-element"' here. However, the meaning of `this' in event
                  handler attribute values is by far not limited to form controls.
                  >
                  Garrett

                  Comment

                  • sasuke

                    #10
                    Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                    On Sep 16, 11:35 am, Thomas 'PointedEars' Lahn <PointedE...@we b.dewrote:
                    Doug Gunnoe wrote:
                    byw, what does 'this' refer to in this case? Certainly not the select
                    element?
                    >
                    No, it refers to the element object representing the `select' element in the
                    DOM tree :)
                    Would it be a better interpretation if the above sentence be framed as
                    "it refers to the instance of the implementation of the HTMLElement
                    interface which represents the 'select' element in the DOM tree"?

                    Comment

                    • Henry

                      #11
                      Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                      On Sep 16, 6:17 pm, sasuke wrote:
                      >On Sep 16, 11:35 am, Thomas 'PointedEars' Lahn wrote:
                      >Doug Gunnoe wrote:
                      >>byw, what does 'this' refer to in this case? Certainly
                      >>not the select element?
                      >
                      >No, it refers to the element object representing the `select'
                      >element in the DOM tree :)
                      >
                      Would it be a better interpretation if the above sentence be
                      framed as "it refers to the instance of the implementation of
                      the HTMLElement interface which represents the 'select'
                      element in the DOM tree"?
                      Saying "instance of the implementation of the HTMLElement interface"
                      would seem wrong. Objects would not be implementations of interfaces,
                      but rather implement interfaces. Remember that this object (if
                      sufficiently standard) would also implement the Node, Element and
                      HTMLSelectEleme nt interfaces.

                      Comment

                      • Joost Diepenmaat

                        #12
                        Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on one form

                        Thomas 'PointedEars' Lahn <PointedEars@we b.dewrites:
                        Joost Diepenmaat wrote:
                        >Doug Gunnoe <douggunnoe@gma il.comwrites:
                        >>byw, what does 'this' refer to in this case? Certainly not the select
                        >>element?
                        >>
                        >of course it does. see HTMLSelectEleme nt (or any other form
                        >"sub-element") in:
                        >
                        "Form control" is the precise, concise, and well-understood term for what
                        you call 'form "sub-element"' here.
                        Ah right. Thanks.
                        However, the meaning of `this' in event handler attribute values is by
                        far not limited to form controls.
                        I know that, I was just pointing out the spec where it's specified that
                        those form controls all have a form property, reflecting the containing
                        form.

                        --
                        Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

                        Comment

                        • Thomas 'PointedEars' Lahn

                          #13
                          Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                          [Quoting repaired]

                          sasuke wrote:
                          On Sep 16, 11:35 am, Thomas 'PointedEars' Lahn <PointedE...@we b.dewrote:
                          >Doug Gunnoe wrote:
                          >>byw, what does 'this' refer to in this case? Certainly not the select
                          >>element?
                          >No, it refers to the element object representing the `select' element in the
                          >DOM tree :)
                          >
                          Would it be a better interpretation if the above sentence be framed as
                          "it refers to the instance of the implementation of the HTMLElement
                          interface which represents the 'select' element in the DOM tree"?
                          No, because the (C++/Java) class of which the (C++/Java) element object is
                          an instance would implement several (DOM) interfaces. In fact, ISTM we are
                          usually dealing with two interacting application layers here: a (C++/Java)
                          class that implements one or more (DOM) interfaces, and instances thereof;
                          and corresponding ECMAScript host objects that provide restricted access to
                          those instances (and in some implementations also to the [C++/Java] class
                          in a certain way and to a certain extent) from within the ECMAScript
                          implementation.

                          But it would appear that your smiley detector is borken.


                          PointedEars

                          Comment

                          • white lightning

                            #14
                            Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                            On Sep 16, 2:13 pm, Kiran Makam <kiranm...@gmai l.comwrote:
                            The name of your submit button is 'submit' which is overriding the
                            form's submit function. Rename the button to something else, it should
                            work fine:
                            >
                            <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post"
                            enctype="multip art/form-data" name="form1">
                              <select onchange="this. form.submit();" name="prod">
                                    <option value="">Select product</option>
                                   <option value="12">abc</option>
                              </select>
                            >
                              <input type="submit" name="mySubmitB utton" value="Submit" />
                            </form>
                            >
                            THAT WORKS! THANKS FOR THE EXPLANATION!

                            Comment

                            • Doug Gunnoe

                              #15
                              Re: &lt;select onchange=&quot; this.form.submi t()&quot;&gt; and Submit button on oneform

                              On Sep 16, 1:00 pm, Joost Diepenmaat <jo...@zeekat.n lwrote:
                              I know that, I was just pointing out the spec where it's specified that
                              those form controls all have a form property, reflecting the containing
                              form.
                              Thanks to Thomas, Joost, and the others who answered. It makes perfect
                              sense now.

                              The above snip is where I was confused.

                              Comment

                              Working...